/* ================================================================
   iGURUS PAGE COMPONENTS — Safe Scoped Component CSS
   Rule: Only .class-name selectors. No body/main/root overrides.
================================================================ */

/* ── Legal / Policy pages full-bleed fix ───────────────────────────
   .pp-wrap pulls itself up by the header height so its hero fills the
   full viewport — replaces the old body #content-wrapper overrides.
──────────────────────────────────────────────────────────────── */
.pp-wrap {
    margin-top: calc(-1 * var(--header-h, 70px));
    background: #FBFAFF;
    min-height: 100vh;
    overflow: visible;
}
.main-area.fix { overflow: visible;  margin-top: 0px !important;  }

/* ── Dashboard Layout Resets (instructor + student pages) ──────────
   These override the 60px sidebar padding on #wrapper.toggled pages.
   Safe globally: no-sidebar pages are unaffected by .toggled rules.
──────────────────────────────────────────────────────────────── */
#sidebar-wrapper          { display: none !important; width: 0 !important; }
#wrapper, #wrapper.toggled { padding-left: 0 !important; }
#wrapper.toggled #content-wrapper { margin-right: 0 !important; position: static !important; }
.dark-bkg-color.menu_darker_hide  { display: none !important; }
.instructor-pg { background: #f5f4fa !important; min-height: 100vh; }
@media (min-width: 992px) {
    #wrapper         { padding-left: 0 !important; }
    #wrapper.toggled { padding-left: 0 !important; margin-bottom: -30px !important; }
    #sidebar-wrapper { display: none !important; width: 0 !important; }
}


/* ── login ── */
/* ══════════════════════════════════════════
   PAGE BACKGROUND  (identical to register)
══════════════════════════════════════════ */
.ig-reg-page {
    min-height: calc(100vh - 82px);
    background:#FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px 0;
    position: relative;
    overflow: hidden;
}
.ig-reg-orb { position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; }
.ig-reg-orb-1 { width:700px;height:700px;background:radial-gradient(circle,rgba(164,16,52,.18),transparent 65%);top:-250px;left:-200px; }
.ig-reg-orb-2 { width:550px;height:550px;background:radial-gradient(circle,rgba(37,99,235,.15),transparent 65%);bottom:-200px;right:-150px; }
.ig-reg-orb-3 { width:400px;height:400px;background:radial-gradient(circle,rgba(219,39,119,.10),transparent 65%);top:40%;left:55%; }
.ig-reg-dots-bg { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;pointer-events:none; }

/* ══════════════════════════════════════════
   CARD SHELL  (80% = 10% each side)
══════════════════════════════════════════ */
.ig-reg-wrap {
    display: flex;
    width: 100%;
    max-width: 1240px;
    min-height: 620px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.07),
        0 32px 80px rgba(0,0,0,.55),
        0 8px 24px rgba(164,16,52,.15);
}

/* ══════════════════════════════════════════
   LEFT PANEL — White form
══════════════════════════════════════════ */
.ig-reg-left {
    flex: 0 0 48%;
    max-width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px 56px;
    background: #ffffff;
    overflow-y: auto;
}

.ig-reg-logo { display:flex;align-items:center;gap:9px;text-decoration:none;margin-bottom:28px; }
.ig-reg-logo img { max-height:30px; }
.ig-reg-logo-text {
    font-size: var(--fs-lg);font-weight:800;letter-spacing:-.5px;
    background:#A41034;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.ig-reg-title { font-size:1.7rem;font-weight:800;color:#0f0c29;line-height: var(--lh-tight);margin-bottom:5px; }
.ig-reg-sub   { font-size: var(--fs-sm);color:#6b7280;margin-bottom:22px; }

/* Google btn */
.ig-google-btn {
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:11px 20px;
    border:1.5px solid #e5e7eb;border-radius:10px;
    background:#fff;color:#374151;font-size: var(--fs-sm);font-weight:600;
    cursor:pointer;text-decoration:none;
    transition:border-color .2s,box-shadow .2s;
    margin-bottom:16px;
}
.ig-google-btn:hover { border-color:#A41034;box-shadow:0 0 0 3px rgba(164,16,52,.08);text-decoration:none;color:#374151; }
.ig-google-btn img { width:20px;height:20px; }

/* Divider */
.ig-divider { display:flex;align-items:center;gap:12px;margin-bottom:16px;color:#9ca3af;font-size:12.5px; }
.ig-divider::before,.ig-divider::after { content:'';flex:1;height:1px;background:#e5e7eb; }

/* Alert */
.ig-alert-danger { padding:10px 14px;border-radius:8px;font-size: var(--fs-sm);background:#fef2f2;border:1px solid #fecaca;color:#dc2626;margin-bottom:14px; }

/* Form fields */
.ig-fg { margin-bottom:14px;position:relative; }
.ig-label { display:block;font-size: var(--fs-xs);font-weight:600;color:#374151;margin-bottom:5px; }
.ig-label span { color:#ef4444; }
.ig-input {
    width:100%;padding:10px 13px;
    border:1.5px solid #e5e7eb;border-radius:9px;
    font-size: var(--fs-sm);color:#111827;background:#fafafa;outline:none;
    transition:border-color .2s,box-shadow .2s,background .2s;
    box-sizing:border-box;
}
.ig-input:focus { border-color:#A41034 !important;box-shadow:0 0 0 3px rgba(164,16,52,.10) !important;background:#fff; }
.ig-input.is-invalid { border-color:#ef4444 !important;background:#fff5f5; }
.ig-ferr { display:block;font-size: var(--fs-xs);color:#ef4444;margin-top:4px;font-weight:500;min-height:14px; }

/* Eye toggle */
.ig-pw-wrap { position:relative; }
.ig-pw-wrap .ig-input { padding-right:40px; }
.ig-pw-eye { position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:#9ca3af;font-size: var(--fs-sm);line-height:1; }
.ig-pw-eye:hover { color:#A41034; }

/* Remember + Forgot row */
.ig-auth-row {
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:16px;
}
.ig-auth-row label { font-size:12.5px;color:#6b7280;cursor:pointer;display:flex;align-items:center;gap:7px; }
.ig-auth-row label input { accent-color:#A41034;width:14px;height:14px; }
.ig-auth-row a { font-size:12.5px;color:#A41034;font-weight:600;text-decoration:none; }
.ig-auth-row a:hover { text-decoration:underline; }

/* Submit */
.ig-submit {
    width:100%;padding:12px;
    background:#A41034;
    color:#fff;border:none;border-radius:10px;
    font-size: var(--fs-sm);font-weight:700;cursor:pointer;
    transition:opacity .2s,transform .2s,box-shadow .2s;
    box-shadow:0 6px 20px rgba(164,16,52,.35);
    margin-bottom:13px;letter-spacing:.3px;
}
.ig-submit:hover { opacity:.88;transform:translateY(-1px);box-shadow:0 10px 28px rgba(164,16,52,.45); }

/* Alt links */
.ig-reg-alt { text-align:center;font-size:12.5px;color:#6b7280;margin-bottom:7px; }
.ig-reg-alt a { color:#A41034;font-weight:600;text-decoration:none; }
.ig-reg-alt a:hover { text-decoration:underline; }

/* ══════════════════════════════════════════
   RIGHT PANEL — Dark animated branding
   (same as register page, identical classes)
══════════════════════════════════════════ */
.ig-reg-right {
    flex:1;position:relative;background:#1C1514;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    padding:56px 44px;
}
.ig-rr-blob { position:absolute;border-radius:50%;filter:blur(80px);opacity:.52;animation:rrBlob 10s ease-in-out infinite alternate; }
.ig-rr-blob.p { width:480px;height:480px;background:radial-gradient(circle,#A41034,transparent 70%);top:-120px;left:-80px; }
.ig-rr-blob.b { width:380px;height:380px;background:radial-gradient(circle,#2563eb,transparent 70%);bottom:-80px;right:-60px;animation-duration:14s;animation-delay:-5s; }
.ig-rr-blob.k { width:300px;height:300px;background:radial-gradient(circle,#db2777,transparent 70%);top:45%;left:38%;animation-duration:12s;animation-delay:-3s; }
@keyframes rrBlob{0%{transform:translate(0,0) scale(1);}50%{transform:translate(18px,-14px) scale(1.05);}100%{transform:translate(-10px,18px) scale(.97);}}
.ig-rr-grid { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px;pointer-events:none; }
.ig-rr-shine { position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.5),transparent); }
.ig-rr-content { position:relative;z-index:1;text-align:center;max-width:420px;width:100%; }

/* Wordmark */
.ig-rr-wordmark {
    font-size:2.6rem;font-weight:900;letter-spacing:-2px;
    background:#A41034;
    background-size:200% auto;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:gShift 5s linear infinite;display:block;margin-bottom:18px;
}
@keyframes gShift{0%{background-position:0 center;}100%{background-position:200% center;}}

/* Progress bar */
.ig-rr-progress { height:2px;background:#fff;border-radius:2px;overflow:hidden;margin-bottom:20px; }
.ig-rr-progress-fill { height:100%;background:#A41034;width:0;transition:width 30s linear; }

/* Slides */
.ig-rr-slider { position:relative;min-height:320px; }
.ig-rr-slide { position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease;pointer-events:none; }
.ig-rr-slide.active { opacity:1;transform:translateY(0);pointer-events:auto;position:relative; }
.ig-rr-slide h2 { font-size:1.65rem;font-weight:800;color:#fff;line-height: var(--lh-tight);margin-bottom:10px; }
.ig-rr-slide p  { font-size: var(--fs-sm);color:rgba(255,255,255,.58);line-height:1.75;margin-bottom:22px; }

/* Feature list */
.ig-rr-feat { list-style:none;padding:0;margin:0 0 22px;text-align:left; }
.ig-rr-feat li {
    display:flex;align-items:center;gap:12px;
    padding:10px 13px;border-radius:11px;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);
    margin-bottom:8px;color:rgba(255,255,255,.85);font-size: var(--fs-sm);font-weight:500;
    transition:background .2s;
}
.ig-rr-feat li:hover {background: rgba(164, 16, 52, 0.15); }
.ig-rr-feat li .fi { width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size: var(--fs-base);flex-shrink:0; }
.ig-rr-feat li:nth-child(1) .fi { background:#A41034;color:#fff; }
.ig-rr-feat li:nth-child(2) .fi { background:#A41034;color:#fff; }
.ig-rr-feat li:nth-child(3) .fi { background:#A41034;color:#fff; }
.ig-rr-feat li:nth-child(4) .fi { background:#A41034;color:#fff; }

/* Stats */
.ig-rr-stats { display:flex;align-items:center;justify-content:center;flex-wrap:wrap; }
.ig-rr-stat  { display:flex;flex-direction:column;align-items:center;padding:0 16px; }
.ig-rr-stat strong {
    font-size:1.45rem;font-weight:900;line-height:1;display:block;
    background:#A41034;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ig-rr-stat span { font-size:9px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.38);margin-top:4px; }
.ig-rr-vdiv { width:1px;height:28px;background:rgba(255,255,255,.12); }

/* Testimonial */
.ig-rr-quote { background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:20px;text-align:left;margin-bottom:14px; }
.ig-rr-quote-text { font-size: var(--fs-sm);color:rgba(255,255,255,.78);line-height:1.75;margin-bottom:14px;font-style:italic; }
.ig-rr-quote-author { display:flex;align-items:center;gap:11px; }
.ig-rr-avatar { width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size: var(--fs-base);font-weight:800;color:#fff;flex-shrink:0; }
.ig-rr-quote-name { font-size:12.5px;font-weight:700;color:#fff;display:block; }
.ig-rr-quote-role { font-size:10.5px;color:rgba(255,255,255,.42);display:block; }

/* Dots */
.ig-rr-dots { display:flex;gap:6px;justify-content:center;margin-top:18px; }
.ig-rr-dot-btn { width:6px;height:6px;border-radius:50%;background:#A41034;border:none;cursor:pointer;padding:0;transition:all .3s; }
.ig-rr-dot-btn.active { width:20px;border-radius:4px;background:#A41034; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1199px){ .ig-reg-wrap{width:88%;} }
@media(max-width:991px){
    .ig-reg-wrap{width:92%;flex-direction:column;border-radius:18px;}
    .ig-reg-left{flex:none;max-width:100%;padding:36px 28px;}
    .ig-reg-right{display:none;}
}
@media(max-width:575px){
    .ig-reg-wrap{width:96%;border-radius:14px;}
    .ig-reg-left{padding:28px 18px;}
}

/* ── register ── */
/* ══════════════════════════════════════════
   PAGE BACKGROUND
══════════════════════════════════════════ */
.ig-reg-page {
    min-height: calc(100vh - 82px);
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px 0;
    position: relative;
    overflow: hidden;
}

/* Ambient glow orbs on page */
.ig-reg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}
.ig-reg-orb-1 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(164,16,52,.18), transparent 65%); top: -250px; left: -200px; }
.ig-reg-orb-2 { width: 550px; height: 550px; background: radial-gradient(circle, rgba(37,99,235,.15), transparent 65%); bottom: -200px; right: -150px; }
.ig-reg-orb-3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(219,39,119,.10), transparent 65%); top: 40%; left: 55%; }

/* Dot grid on page */
.ig-reg-dots-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* ══════════════════════════════════════════
   CARD SHELL  (80% width = 10% each side)
══════════════════════════════════════════ */
.ig-reg-wrap {
    display: flex;
    width: 100%;
    max-width: 1240px;
    min-height: 680px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.07),
        0 32px 80px rgba(0,0,0,.55),
        0 8px 24px rgba(164,16,52,.15);
}

/* ══════════════════════════════════════════
   LEFT PANEL — White form
══════════════════════════════════════════ */
.ig-reg-left {
    flex: 0 0 48%;
    max-width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 52px;
    background: #ffffff;
    overflow-y: auto;
}

.ig-reg-logo {  align-items:center; gap:9px; text-decoration:none; margin-bottom:28px; }
 
.ig-reg-logo-text {
    font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.5px;
    background: #A41034;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.ig-reg-title { font-size: 1.7rem; font-weight: 800; color: #0f0c29; line-height: var(--lh-tight); margin-bottom: 5px; }
.ig-reg-sub   { font-size: var(--fs-sm); color: #6b7280; margin-bottom: 22px; }

/* Google */
.ig-google-btn {
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:11px 20px;
    border: 1.5px solid #e5e7eb; border-radius: 10px;
    background: #fff; color: #374151; font-size: var(--fs-sm); font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
    margin-bottom: 16px;
}
.ig-google-btn:hover { border-color:#A41034; box-shadow:0 0 0 3px rgba(164,16,52,.08); text-decoration:none; color:#374151; }
.ig-google-btn img { width:20px; height:20px; }

/* Divider */
.ig-divider { display:flex; align-items:center; gap:12px; margin-bottom:16px; color:#9ca3af; font-size:12.5px; }
.ig-divider::before,.ig-divider::after { content:''; flex:1; height:1px; background:#e5e7eb; }

/* Alert */
.ig-alert-danger { padding:10px 14px; border-radius:8px; font-size: var(--fs-sm); background:#fef2f2; border:1px solid #fecaca; color:#dc2626; margin-bottom:14px; }

/* Role toggle */
.ig-role-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.ig-role-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 16px; border:2px solid #e5e7eb; border-radius:10px;
    font-size: var(--fs-sm); font-weight:600; color:#6b7280; cursor:pointer;
    transition:all .2s; background:#fff;
}
.ig-role-btn.active, .ig-role-btn:hover { border-color:#A41034; color:#A41034; background:rgba(164,16,52,.05); }
.ig-role-btn i { font-size: var(--fs-base); }

/* Form fields */
.ig-fg { margin-bottom:13px; position:relative; }
.ig-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.ig-label { display:block; font-size: var(--fs-xs); font-weight:600; color:#374151; margin-bottom:5px; }
.ig-label span { color:#ef4444; }
.ig-input {
    width:100%; padding:10px 13px;
    border:1.5px solid #e5e7eb; border-radius:9px;
    font-size: var(--fs-sm); color:#111827; background:#fafafa; outline:none;
    transition:border-color .2s, box-shadow .2s, background .2s;
    box-sizing:border-box;
}
.ig-input:focus { border-color:#A41034 !important; box-shadow:0 0 0 3px rgba(164,16,52,.10) !important; background:#fff; }
.ig-input.is-invalid { border-color:#ef4444 !important; background:#fff5f5; }
.ig-ferr { display:block; font-size: var(--fs-xs); color:#ef4444; margin-top:4px; font-weight:500; min-height:14px; }

/* Eye toggle */
.ig-pw-wrap { position:relative; }
.ig-pw-wrap .ig-input { padding-right:40px; }
.ig-pw-eye { position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; color:#9ca3af; font-size: var(--fs-sm); line-height:1; }
.ig-pw-eye:hover { color:#A41034; }

/* Password strength bar */
.ig-pw-strength { margin-top:8px; margin-bottom:13px; }
.ig-pw-bar-track { height:3px; border-radius:4px; background:#e5e7eb; overflow:hidden; margin-bottom:8px; }
.ig-pw-bar-fill  { height:100%; border-radius:4px; width:0; transition:width .4s, background .4s; }
.ig-pw-criteria  { display:flex; flex-wrap:wrap; gap:5px; }
.ig-pw-rule {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:100px;
    font-size: var(--fs-xs); font-weight:600;
    background:#f3f4f6; color:#9ca3af;
    border:1px solid #e5e7eb;
    transition:all .2s;
}
.ig-pw-rule.ok { background:rgba(16,185,129,.1); color:#059669; border-color:rgba(16,185,129,.3); }
.ig-pw-rule i { font-size:9px; }

/* Submit */
.ig-submit {
    width:100%; padding:12px;
    background: #A41034;
    color:#fff; border:none; border-radius:10px;
    font-size: var(--fs-sm); font-weight:700; cursor:pointer;
    transition:opacity .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 6px 20px rgba(164,16,52,.35);
    margin-bottom:13px;
    letter-spacing:.3px;
}
.ig-submit:hover { opacity:.88; transform:translateY(-1px); box-shadow:0 10px 28px rgba(164,16,52,.45); }

/* Checkbox */
.ig-check-row { display:flex; align-items:flex-start; gap:8px; margin-bottom:11px; }
.ig-check-row input[type=checkbox] { margin-top:2px; accent-color:#A41034; width:14px; height:14px; flex-shrink:0; cursor:pointer; }
.ig-check-row label { font-size: var(--fs-xs); color:#6b7280; cursor:pointer; line-height:1.45; }

/* Alt links */
.ig-reg-alt { text-align:center; font-size:12.5px; color:#6b7280; margin-bottom:7px; }
.ig-reg-alt a { color:#A41034; font-weight:600; text-decoration:none; }
.ig-reg-alt a:hover { text-decoration:underline; }

/* intl-tel-input overrides */
.iti { width: 100% !important; }
.iti__flag-container { height: 100% !important; }
.iti--separate-dial-code .iti__selected-flag {
    border-radius: 9px 0 0 9px !important;
    background: #f3f4f6 !important;
    border-right: 1px solid #e5e7eb !important;
    padding: 0 8px !important;
}
.iti--separate-dial-code input#phone_country_code {
    padding-left: 90px !important;
    border-radius: 9px !important;
    height: auto !important;
}
.iti--separate-dial-code input#phone_country_code:focus { border-color: #A41034 !important; box-shadow: 0 0 0 3px rgba(164,16,52,.10) !important; }
.iti__country-list { border-radius: 10px !important; border: 1px solid #e5e7eb !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; font-size: var(--fs-sm) !important; }
.iti__country-list .iti__country.iti__highlight { background: rgba(164,16,52,.08) !important; }
.iti__dial-code { color: #374151 !important; }
.iti__selected-dial-code { font-size: var(--fs-sm) !important; color: #374151 !important; font-weight: 600 !important; }

/* ══════════════════════════════════════════
   RIGHT PANEL — Dark animated branding
══════════════════════════════════════════ */
.ig-reg-right {
    flex: 1;
    position: relative;
    background: #1C1514;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 44px;
}

/* Right panel background blobs */
.ig-rr-blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.52; animation:rrBlob 10s ease-in-out infinite alternate; }
.ig-rr-blob.p { width:480px; height:480px; background:radial-gradient(circle,#A41034,transparent 70%); top:-120px; left:-80px; }
.ig-rr-blob.b { width:380px; height:380px; background:radial-gradient(circle,#2563eb,transparent 70%); bottom:-80px; right:-60px; animation-duration:14s; animation-delay:-5s; }
.ig-rr-blob.k { width:300px; height:300px; background:radial-gradient(circle,#db2777,transparent 70%); top:45%; left:38%; animation-duration:12s; animation-delay:-3s; }
@keyframes rrBlob { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(18px,-14px) scale(1.05);} 100%{transform:translate(-10px,18px) scale(.97);} }

.ig-rr-grid { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1px); background-size:34px 34px; pointer-events:none; }

/* Top shine accent */
.ig-rr-shine {
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 60%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167,139,250,.5), transparent);
}

.ig-rr-content { position:relative; z-index:1; text-align:center; max-width:420px; width:100%; }

/* Wordmark */
.ig-rr-wordmark {
    font-size: 2.6rem; font-weight: 900; letter-spacing: -2px;
    background: #A41034;
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: gShift 5s linear infinite;
    display: block; margin-bottom: 18px;
}
@keyframes gShift { 0%{background-position:0 center;} 100%{background-position:200% center;} }

/* Progress timer bar */
.ig-rr-progress { height:2px; background:#fff; border-radius:2px; overflow:hidden; margin-bottom:20px; }
.ig-rr-progress-fill { height:100%; background:#A41034; width:0; transition:width 30s linear; }

/* Slides */
.ig-rr-slider { position:relative; min-height:320px; }
.ig-rr-slide { position:absolute; inset:0; opacity:0; transform:translateY(16px); transition:opacity .65s ease,transform .65s ease; pointer-events:none; }
.ig-rr-slide.active { opacity:1; transform:translateY(0); pointer-events:auto; position:relative; }
.ig-rr-slide h2 { font-size:1.65rem; font-weight:800; color:#fff; line-height: var(--lh-tight); margin-bottom:10px; }
.ig-rr-slide p  { font-size: var(--fs-sm); color:rgba(255,255,255,.58); line-height:1.75; margin-bottom:22px; }

/* Feature list */
.ig-rr-feat { list-style:none; padding:0; margin:0 0 22px; text-align:left; }
.ig-rr-feat li {
    display:flex; align-items:center; gap:12px;
    padding:10px 13px; border-radius:11px;
    background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08);
    margin-bottom:8px; color:rgba(255,255,255,.85); font-size: var(--fs-sm); font-weight:500;
    transition:background .2s;
}
.ig-rr-feat li:hover {background: rgba(164, 16, 52, 0.15); }
.ig-rr-feat li .fi { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size: var(--fs-base); flex-shrink:0; }
.ig-rr-feat li:nth-child(1) .fi { background:#A41034;color:#fff; }
.ig-rr-feat li:nth-child(2) .fi { background:#A41034;color:#fff; }
.ig-rr-feat li:nth-child(3) .fi { background:#A41034;color:#fff; }
.ig-rr-feat li:nth-child(4) .fi {background:#A41034;color:#fff; }

/* Stats */
.ig-rr-stats { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.ig-rr-stat  { display:flex; flex-direction:column; align-items:center; padding:0 16px; }
.ig-rr-stat strong {
    font-size:1.45rem; font-weight:900; line-height:1; display:block;
    background:#A41034;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.ig-rr-stat span { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.38); margin-top:4px; }
.ig-rr-vdiv { width:1px; height:28px; background:rgba(255,255,255,.12); }

/* Testimonial */
.ig-rr-quote { background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:20px; text-align:left; margin-bottom:14px; }
.ig-rr-quote-text { font-size: var(--fs-sm); color:rgba(255,255,255,.78); line-height:1.75; margin-bottom:14px; font-style:italic; }
.ig-rr-quote-author { display:flex; align-items:center; gap:11px; }
.ig-rr-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size: var(--fs-base); font-weight:800; color:#fff; flex-shrink:0; }
.ig-rr-quote-name { font-size:12.5px; font-weight:700; color:#fff; display:block; }
.ig-rr-quote-role { font-size:10.5px; color:rgba(255,255,255,.42); display:block; }

/* Dot indicators */
.ig-rr-dots { display:flex; gap:6px; justify-content:center; margin-top:18px; }
.ig-rr-dot-btn { width:6px; height:6px; border-radius:50%; background:#A41034; border:none; cursor:pointer; padding:0; transition:all .3s; }
.ig-rr-dot-btn.active { width:20px; border-radius:4px; background:#A41034; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1199px) {
    .ig-reg-wrap { width:88%; }
}
@media(max-width:991px) {
    .ig-reg-wrap { width:92%; flex-direction:column; border-radius:18px; }
    .ig-reg-left { flex:none; max-width:100%; padding:36px 28px; }
    .ig-reg-right { display:none; }
}
@media(max-width:575px) {
    .ig-reg-wrap { width:96%; border-radius:14px; }
    .ig-reg-left { padding:28px 18px; }
    .ig-row-2 { grid-template-columns:1fr; }
}

/* ── two_factor_login ── */
/* ══════════════════════════════════════════
   PAGE BACKGROUND  (identical to register)
══════════════════════════════════════════ */
.ig-reg-page {
    min-height: calc(100vh - 82px);
    background: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    padding: 52px 0; position: relative; overflow: hidden;
}
.ig-reg-orb { position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none; }
.ig-reg-orb-1 { width:700px;height:700px;background:radial-gradient(circle,rgba(164,16,52,.18),transparent 65%);top:-250px;left:-200px; }
.ig-reg-orb-2 { width:550px;height:550px;background:radial-gradient(circle,rgba(37,99,235,.15),transparent 65%);bottom:-200px;right:-150px; }
.ig-reg-orb-3 { width:400px;height:400px;background:radial-gradient(circle,rgba(219,39,119,.10),transparent 65%);top:40%;left:55%; }
.ig-reg-dots-bg { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;pointer-events:none; }

/* ══════════════════════════════════════════
   CARD SHELL  (80% = 10% each side)
══════════════════════════════════════════ */
.ig-reg-wrap {
    display:flex; width:100%; min-height:560px;
    border-radius:24px; overflow:hidden; position:relative; z-index:2;
    box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 32px 80px rgba(0,0,0,.55), 0 8px 24px rgba(164,16,52,.15);
}

/* ══════════════════════════════════════════
   LEFT PANEL — White form
══════════════════════════════════════════ */
.ig-reg-left {
    flex:0 0 48%; max-width:48%;
    display:flex; flex-direction:column; justify-content:center;
    padding:52px 56px; background:#ffffff; overflow-y:auto;
}

.ig-reg-logo { display:flex;align-items:center;gap:9px;text-decoration:none;margin-bottom:28px; }
.ig-reg-logo img { max-height:30px; }
.ig-reg-logo-text {
    font-size: var(--fs-lg);font-weight:800;letter-spacing:-.5px;
    background:#A41034;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ig-reg-title { font-size:1.7rem;font-weight:800;color:#0f0c29;line-height: var(--lh-tight);margin-bottom:5px; }
.ig-reg-sub   { font-size: var(--fs-sm);color:#6b7280;margin-bottom:22px; }

/* Google btn */
.ig-google-btn {
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:11px 20px;border:1.5px solid #e5e7eb;border-radius:10px;
    background:#fff;color:#374151;font-size: var(--fs-sm);font-weight:600;
    cursor:pointer;text-decoration:none;transition:border-color .2s,box-shadow .2s;margin-bottom:16px;
}
.ig-google-btn:hover { border-color:#A41034;box-shadow:0 0 0 3px rgba(164,16,52,.08);text-decoration:none;color:#374151; }
.ig-google-btn img { width:20px;height:20px; }

/* Divider */
.ig-divider { display:flex;align-items:center;gap:12px;margin-bottom:16px;color:#9ca3af;font-size:12.5px; }
.ig-divider::before,.ig-divider::after { content:'';flex:1;height:1px;background:#e5e7eb; }

/* Alert */
.ig-alert-danger { padding:10px 14px;border-radius:8px;font-size: var(--fs-sm);background:#fef2f2;border:1px solid #fecaca;color:#dc2626;margin-bottom:14px; }

/* Form fields */
.ig-fg { margin-bottom:14px; }
.ig-label { display:block;font-size: var(--fs-xs);font-weight:600;color:#374151;margin-bottom:5px; }
.ig-label span { color:#ef4444; }
.ig-input {
    width:100%;padding:10px 13px;border:1.5px solid #e5e7eb;border-radius:9px;
    font-size: var(--fs-sm);color:#111827;background:#fafafa;outline:none;
    transition:border-color .2s,box-shadow .2s,background .2s;box-sizing:border-box;
}
.ig-input:focus { border-color:#A41034 !important;box-shadow:0 0 0 3px rgba(164,16,52,.10) !important;background:#fff; }
.ig-input.is-invalid { border-color:#ef4444 !important;background:#fff5f5; }
.ig-ferr { display:block;font-size: var(--fs-xs);color:#ef4444;margin-top:4px;font-weight:500;min-height:14px; }

/* Submit */
.ig-submit {
    width:100%;padding:12px;
    background:#A41034;
    color:#fff;border:none;border-radius:10px;font-size: var(--fs-sm);font-weight:700;cursor:pointer;
    transition:opacity .2s,transform .2s,box-shadow .2s;
    box-shadow:0 6px 20px rgba(164,16,52,.35);margin-bottom:16px;letter-spacing:.3px;
}
.ig-submit:hover { opacity:.88;transform:translateY(-1px);box-shadow:0 10px 28px rgba(164,16,52,.45); }

/* Alt links */
.ig-reg-alt { text-align:center;font-size:12.5px;color:#6b7280;margin-bottom:7px; }
.ig-reg-alt a { color:#A41034;font-weight:600;text-decoration:none; }
.ig-reg-alt a:hover { text-decoration:underline; }

/* ══════════════════════════════════════════
   RIGHT PANEL — identical to register
══════════════════════════════════════════ */
.ig-reg-right { flex:1;position:relative;background:#1C1514;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:56px 44px; }
.ig-rr-blob { position:absolute;border-radius:50%;filter:blur(80px);opacity:.52;animation:rrBlob 10s ease-in-out infinite alternate; }
.ig-rr-blob.p { width:480px;height:480px;background:radial-gradient(circle,#A41034,transparent 70%);top:-120px;left:-80px; }
.ig-rr-blob.b { width:380px;height:380px;background:radial-gradient(circle,#2563eb,transparent 70%);bottom:-80px;right:-60px;animation-duration:14s;animation-delay:-5s; }
.ig-rr-blob.k { width:300px;height:300px;background:radial-gradient(circle,#db2777,transparent 70%);top:45%;left:38%;animation-duration:12s;animation-delay:-3s; }
@keyframes rrBlob{0%{transform:translate(0,0) scale(1);}50%{transform:translate(18px,-14px) scale(1.05);}100%{transform:translate(-10px,18px) scale(.97);}}
.ig-rr-grid { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px;pointer-events:none; }
.ig-rr-shine { position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.5),transparent); }
.ig-rr-content { position:relative;z-index:1;text-align:center;max-width:420px;width:100%; }
.ig-rr-wordmark {
    font-size:2.6rem;font-weight:900;letter-spacing:-2px;
    background: #A41034; 
    background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:gShift 5s linear infinite;display:block;margin-bottom:18px;
}
@keyframes gShift{0%{background-position:0 center;}100%{background-position:200% center;}}
.ig-rr-progress { height:2px;background:#fff;border-radius:2px;overflow:hidden;margin-bottom:20px; }
.ig-rr-progress-fill { height:100%;background:#A41034;width:0;transition:width 30s linear; }
.ig-rr-slider { position:relative;min-height:320px; }
.ig-rr-slide { position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease;pointer-events:none; }
.ig-rr-slide.active { opacity:1;transform:translateY(0);pointer-events:auto;position:relative; }
.ig-rr-slide h2 { font-size:1.65rem;font-weight:800;color:#fff;line-height: var(--lh-tight);margin-bottom:10px; }
.ig-rr-slide p  { font-size: var(--fs-sm);color:rgba(255,255,255,.58);line-height:1.75;margin-bottom:22px; }
.ig-rr-feat { list-style:none;padding:0;margin:0 0 22px;text-align:left; }
.ig-rr-feat li { display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:11px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);margin-bottom:8px;color:rgba(255,255,255,.85);font-size: var(--fs-sm);font-weight:500;transition:background .2s; }
.ig-rr-feat li:hover { background: rgba(164, 16, 52, 0.15); }
.ig-rr-feat li .fi { width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size: var(--fs-base);flex-shrink:0; }
.ig-rr-feat li:nth-child(1) .fi{background:rgba(164,16,52,.25);color:#FFFFFF;}
.ig-rr-feat li:nth-child(2) .fi{background:rgba(37,99,235,.25);color:#93c5fd;}
.ig-rr-feat li:nth-child(3) .fi{background:rgba(8,145,178,.25);color:#67e8f9;}
.ig-rr-feat li:nth-child(4) .fi{background:rgba(16,185,129,.25);color:#6ee7b7;}
.ig-rr-stats { display:flex;align-items:center;justify-content:center;flex-wrap:wrap; }
.ig-rr-stat  { display:flex;flex-direction:column;align-items:center;padding:0 16px; }
.ig-rr-stat strong { font-size:1.45rem;font-weight:900;line-height:1;display:block;background:#A41034;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.ig-rr-stat span { font-size:9px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.38);margin-top:4px; }
.ig-rr-vdiv { width:1px;height:28px;background:rgba(255,255,255,.12); }
.ig-rr-quote { background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:20px;text-align:left;margin-bottom:14px; }
.ig-rr-quote-text { font-size: var(--fs-sm);color:rgba(255,255,255,.78);line-height:1.75;margin-bottom:14px;font-style:italic; }
.ig-rr-quote-author { display:flex;align-items:center;gap:11px; }
.ig-rr-avatar { width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size: var(--fs-base);font-weight:800;color:#fff;flex-shrink:0; }
.ig-rr-quote-name { font-size:12.5px;font-weight:700;color:#fff;display:block; }
.ig-rr-quote-role { font-size:10.5px;color:rgba(255,255,255,.42);display:block; }
.ig-rr-dots { display:flex;gap:6px;justify-content:center;margin-top:18px; }
.ig-rr-dot-btn { width:6px;height:6px;border-radius:50%;background:#A41034;border:none;cursor:pointer;padding:0;transition:all .3s; }
.ig-rr-dot-btn.active { width:20px;border-radius:4px;background:#A41034; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1199px){ .ig-reg-wrap{width:88%;} }
@media(max-width:991px){
    .ig-reg-wrap{width:92%;flex-direction:column;border-radius:18px;}
    .ig-reg-left{flex:none;max-width:100%;padding:36px 28px;}
    .ig-reg-right{display:none;}
}
@media(max-width:575px){
    .ig-reg-wrap{width:96%;border-radius:14px;}
    .ig-reg-left{padding:28px 18px;}
}

/* ── two_factor_login_digit_code ── */

/* ── Page background (identical to login/register) ── */
.ig-reg-page {
    min-height: calc(100vh - 82px);
    background: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    padding: 52px 0; position: relative; overflow: hidden;
}
.ig-reg-orb { position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none; }
.ig-reg-orb-1 { width:700px;height:700px;background:radial-gradient(circle,rgba(164,16,52,.18),transparent 65%);top:-250px;left:-200px; }
.ig-reg-orb-2 { width:550px;height:550px;background:radial-gradient(circle,rgba(37,99,235,.15),transparent 65%);bottom:-200px;right:-150px; }
.ig-reg-orb-3 { width:400px;height:400px;background:radial-gradient(circle,rgba(219,39,119,.10),transparent 65%);top:40%;left:55%; }
.ig-reg-dots-bg { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;pointer-events:none; }

/* ── Card shell ── */
.ig-reg-wrap {
    display: flex; width: 100%;   min-height: 580px;
    border-radius: 24px; overflow: hidden; position: relative; z-index: 2;
    box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 32px 80px rgba(0,0,0,.55), 0 8px 24px rgba(164,16,52,.15);
}
@media(max-width:1100px){ .ig-reg-wrap{ width:90%; } }
@media(max-width:900px) { .ig-reg-wrap{ width:96%; flex-direction:column; border-radius:18px; } }

/* ── LEFT: white form panel ── */
.ig-reg-left {
    flex: 0 0 50%; max-width: 50%;
    background: #fff; display: flex; flex-direction: column;
    justify-content: center; padding: 52px 56px; overflow-y: auto;
}
@media(max-width:900px){ .ig-reg-left{ flex:none;max-width:100%;padding:36px 28px; } }

/* Logo */
.ig-reg-logo { display:flex;align-items:center;gap:9px;text-decoration:none;margin-bottom:32px; }
.ig-reg-logo img { max-height:30px; }
.ig-reg-logo-text {
    font-size: var(--fs-lg);font-weight:800;letter-spacing:-.5px;
    background:#A41034;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Security badge */
.tfa-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg,rgba(164,16,52,.1),rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.2); border-radius: 100px;
    padding: 6px 16px; font-size: 11.5px; font-weight: 600; color: #A41034;
    margin-bottom: 20px; width: fit-content;
}
.tfa-badge i { color: #A41034; }

/* Shield icon */
.tfa-shield {
    width: 68px; height: 68px; border-radius: 20px;
    background: #A41034;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #fff;
    box-shadow: 0 8px 24px rgba(164,16,52,.35);
    margin-bottom: 22px;
}

.tfa-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.75rem; font-weight: 800; color: #0f0c29;
    line-height: 1.15; margin: 0 0 10px;
}
.tfa-sub { font-size: var(--fs-sm); color: #6b7280; margin: 0 0 8px; line-height: var(--lh-normal); }
.tfa-email {
    display: inline-flex; align-items: center; gap: 6px;
    background: #FDF5F6; border: 1px solid #F6D9DF;
    color: #7A0D27; font-size: var(--fs-sm); font-weight: 600;
    padding: 5px 12px; border-radius: 8px;
    margin-bottom: 28px;
}
.tfa-email i { font-size: var(--fs-xs); }

/* Errors */
.tfa-error {
    display: flex; align-items: center; gap: 8px;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
    padding: 10px 14px; color: #dc2626; font-size: var(--fs-sm); margin-bottom: 18px;
}

/* ── OTP digit boxes ── */
.tfa-otp-label {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #374151; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: space-between;
}
.tfa-otp-wrap {
    display: flex; gap: 10px; margin-bottom: 10px;
    justify-content: flex-start;
}
.tfa-digit {
    width: 52px; height: 58px; flex: 0 0 52px;
    border-radius: 12px;
    border: 2px solid #e5e7eb; background: #fafafa;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.55rem; font-weight: 800; color: #0f0c29;
    text-align: center; outline: none; caret-color: #A41034;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.tfa-digit:focus {
    border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.12);
    background: #fff;
}
.tfa-digit.filled { border-color: rgba(164,16,52,.4); background: #faf5ff; }
.tfa-digit.error-digit { border-color: #ef4444; background: #fff5f5; }

.tfa-digit-error {
    font-size: var(--fs-xs); color: #ef4444; font-weight: 500;
    min-height: 16px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 4px;
}

/* ── Role selection ── */
.tfa-role-label {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #374151; margin-bottom: 10px;
}
.tfa-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.tfa-role-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 16px; border-radius: 11px;
    font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
    border: 2px solid transparent; transition: all .25s;
}
.tfa-role-btn--student {
    background: #A41034;
    color: #fff; box-shadow: 0 5px 18px rgba(164,16,52,.35);
}
.tfa-role-btn--student:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(164,16,52,.45); }
.tfa-role-btn--instructor {
    background: #fff; color: #374151;
    border-color: #e5e7eb;
}
.tfa-role-btn--instructor:hover { border-color: #A41034; color: #A41034; background: rgba(164,16,52,.04); }

/* Footer links */
.tfa-links { display: flex; flex-direction: column; gap: 8px; }
.tfa-link-row { font-size: 12.5px; color: #9ca3af; text-align: center; }
.tfa-link-row a { color: #A41034; font-weight: 600; text-decoration: none; }
.tfa-link-row a:hover { text-decoration: underline; }

/* Timer */
.tfa-timer { font-size: var(--fs-xs); color: #9ca3af; }
.tfa-timer span { color: #A41034; font-weight: 700; }

/* ── RIGHT: dark animated branding (same as login) ── */
.ig-reg-right {
    flex: 1; position: relative; background: #1C1514; overflow: hidden;
    display: flex; align-items: center; justify-content: center; padding: 56px 44px;
}
@media(max-width:900px){ .ig-reg-right{ display:none; } }

.ig-rr-blob { position:absolute;border-radius:50%;filter:blur(80px);opacity:.52;animation:rrBlob 10s ease-in-out infinite alternate; }
.ig-rr-blob.p { width:480px;height:480px;background:radial-gradient(circle,#A41034,transparent 70%);top:-120px;left:-80px; }
.ig-rr-blob.b { width:380px;height:380px;background:radial-gradient(circle,#2563eb,transparent 70%);bottom:-80px;right:-60px;animation-duration:14s;animation-delay:-5s; }
.ig-rr-blob.k { width:280px;height:280px;background:radial-gradient(circle,#db2777,transparent 70%);top:45%;left:38%;animation-duration:12s;animation-delay:-3s; }
@keyframes rrBlob{ 0%{transform:translate(0,0) scale(1);}50%{transform:translate(18px,-14px) scale(1.05);}100%{transform:translate(-10px,18px) scale(.97);} }
.ig-rr-grid { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px;pointer-events:none; }
.ig-rr-shine { position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.5),transparent); }

.ig-rr-content { position:relative;z-index:1;text-align:center;max-width:380px;width:100%; }
.ig-rr-wordmark {
    font-family:"Plus Jakarta Sans", sans-serif;
    font-size:2.6rem;font-weight:900;letter-spacing:-2px;
    background:#A41034;
    background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:gShift 5s linear infinite;display:block;margin-bottom:6px;
}
@keyframes gShift{0%{background-position:0 center;}100%{background-position:200% center;}}
.ig-rr-sub { font-size: var(--fs-sm);color:rgba(255,255,255,.42);margin-bottom:32px;letter-spacing:.3px; }

/* Security features list */
.tfa-security-list { list-style:none;padding:0;margin:0;text-align:left; }
.tfa-security-list li {
    display:flex;align-items:center;gap:12px;
    padding:12px 14px;border-radius:12px;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);
    margin-bottom:10px;font-size: var(--fs-sm);color:rgba(255,255,255,.82);font-weight:500;
    transition:background .2s;
}
.tfa-security-list li:hover { background:rgba(164,16,52,.18); }
.tfa-sec-icon { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size: var(--fs-base);flex-shrink:0; }
.tfa-security-list li:nth-child(1) .tfa-sec-icon { background:rgba(164,16,52,.25);color:#FFFFFF; }
.tfa-security-list li:nth-child(2) .tfa-sec-icon { background:rgba(16,185,129,.25);color:#6ee7b7; }
.tfa-security-list li:nth-child(3) .tfa-sec-icon { background:rgba(6,182,212,.25);color:#67e8f9; }
.tfa-sec-text strong { color:#fff;display:block;margin-bottom:2px; }
.tfa-sec-text span { font-size:11.5px;color:rgba(255,255,255,.42); }

/* ── master ── */

/* ── Instructor page background ── */
.instructor-pg { background: #f5f4fa !important; min-height: 100vh; }

/* ══ INSTRUCTOR DASHBOARD PROFILE HEADER ══ */

/* 1. Cover photo banner */
.idb-cover {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center top;
    background-color: #1a1040;
    position: relative;
    overflow: hidden;
}
.idb-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(10,6,30,.5) 100%);
}

/* Gold top accent on cover */
.idb-cover::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #f59e0b 40%, #fbbf24 60%, transparent);
    z-index: 2;
}

/* Edit cover button */
.idb-cover-edit {
    position: absolute;
    bottom: 14px;
    right: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 9px;
    background: rgba(245,158,11,.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(245,158,11,.4);
    color: #fcd34d;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s;
    font-family: "Plus Jakarta Sans", sans-serif;
}
.idb-cover-edit:hover {
    background: rgba(245,158,11,.32);
    color: #fef08a;
    text-decoration: none;
}

/* 2. Profile strip */
.idb-profile-strip {
    background: #fff;
    border-bottom: 1px solid #eaecf4;
    padding: 0 0 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}
.idb-profile-left {
    display: flex;
    align-items: flex-end;
    gap: 18px;
}

/* 3. Large avatar — gold ring */
.idb-avatar-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    margin-top: -65px;
    flex-shrink: 0;
}
.idb-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(167,139,250,.55);
    box-shadow: 0 0 0 5px rgba(164,16,52,.2), 0 4px 20px rgba(0,0,0,.3);
    display: block;
    transition: box-shadow .2s, border-color .2s;
}
.idb-avatar:hover {
    border-color: rgba(167,139,250,.9);
    box-shadow: 0 0 0 5px rgba(164,16,52,.38), 0 6px 24px rgba(0,0,0,.35);
}
.idb-avatar-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff;
    border: 2px solid #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    box-shadow: 0 2px 8px rgba(245,158,11,.5);
    transition: opacity .2s;
}
.idb-avatar-btn:hover { opacity: .88; }

/* 4. Name & role */
.idb-profile-meta { padding-bottom: 8px; }
.idb-profile-name {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #1a1040;
    margin: 0 0 4px;
    line-height: var(--lh-tight);
}
.idb-profile-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 12px;
    border-radius: 100px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.3);
    color: #b45309;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* 5. Action buttons */
.idb-profile-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
}
.idb-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
    font-family:"Plus Jakarta Sans", sans-serif;
}
.idb-btn--gold {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(245,158,11,.4);
}
.idb-btn--gold:hover {
    background: linear-gradient(135deg, #b45309, #d97706);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245,158,11,.5);
    color: #fff !important;
}
.idb-btn--outline {
    background: transparent;
    color: #6b7280 !important;
    border: 1.5px solid #e5e7eb;
}
.idb-btn--outline:hover {
    background: #fffbf0;
    color: #b45309 !important;
    border-color: rgba(245,158,11,.4);
}

@media (max-width: 767px) {
    .idb-cover { height: 160px; }
    .idb-avatar-wrap { width: 100px; height: 100px; margin-top: -50px; }
    .idb-avatar { width: 100px; height: 100px; }
    .idb-profile-strip { flex-direction: column; align-items: flex-start; }
    .idb-profile-actions { flex-wrap: wrap; }
}

/* ── sidebar ── */

/* ══════════════════════════════════════
   INSTRUCTOR SIDEBAR — Navy + Gold
══════════════════════════════════════ */
.id-sidebar {
    background: #1C1514;
    border-radius: 18px;
    border: 1px solid rgba(37,99,235,.18);
    overflow: hidden;
    position: sticky;
    top: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(245,158,11,.1);
    scrollbar-width: thin;
    scrollbar-color: rgba(37,99,235,.3) transparent;
    font-family:"Plus Jakarta Sans", sans-serif;
    display: flex;
    flex-direction: column;
}
.id-sidebar::-webkit-scrollbar { width: 3px; }
.id-sidebar::-webkit-scrollbar-thumb { background: rgba(37,99,235,.35); border-radius:4px; }

/* ── Cover photo banner ── */
.id-sb-cover {
    position: relative; width: 100%; height: 76px;
    background-size: cover; background-position: center;
    background-color: #1a1040; overflow: hidden; flex-shrink: 0;
}
.id-sb-cover::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,6,30,.2) 0%, rgba(10,6,30,.65) 100%);
}
.id-sb-cover::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #A41034 40%, #FFFFFF 60%, transparent);
    z-index: 2;
}
.id-sb-cover-edit {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    width: 28px; height: 28px; border-radius: 7px;
    background: rgba(164,16,52,.25); backdrop-filter: blur(6px);
    border: 1px solid rgba(167,139,250,.4);
    color: #FFFFFF; font-size: .7rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none; transition: background .2s;
}
.id-sb-cover-edit:hover { background: rgba(164,16,52,.45); color: #fff; }

/* ── Profile block ── */
.id-sb-profile {
    padding: 0 18px 16px;
    border-bottom: 1px solid rgba(164,16,52,.15);
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 8px; position: relative;
}
.id-sb-avatar-wrap { position: relative; width: 68px; height: 68px; margin-top: -34px; flex-shrink: 0; }
.id-sb-avatar {
    width: 68px; height: 68px; border-radius: 50%; object-fit: cover;
    border: 2.5px solid rgba(167,139,250,.5);
    box-shadow: 0 0 0 4px rgba(164,16,52,.15), 0 4px 14px rgba(0,0,0,.25);
    display: block;
    transition: box-shadow .2s, border-color .2s;
}
.id-sb-avatar:hover {
    border-color: rgba(167,139,250,.8);
    box-shadow: 0 0 0 4px rgba(164,16,52,.3), 0 6px 18px rgba(0,0,0,.3);
}
.id-sb-avatar-badge {
    position: absolute; bottom: 1px; right: 1px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #10b981; border: 2px solid #1a1040;
}
.id-sb-avatar-cam {
    position: absolute; bottom: 0; right: -2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(164,16,52,.85); color: #fff; border: 2px solid #1a1040;
    display: flex; align-items: center; justify-content: center;
    font-size: .55rem; cursor: pointer;
    box-shadow: 0 2px 6px rgba(164,16,52,.4); transition: background .2s;
    backdrop-filter: blur(4px);
}
.id-sb-avatar-cam:hover { background: #A41034; }
.id-sb-name {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .95rem; font-weight: 800; color: #fff; margin: 0; line-height: var(--lh-tight);
}
.id-sb-meta { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.id-sb-role {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 100px;
    background: rgba(164,16,52,.18); border: 1px solid rgba(167,139,250,.35);
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #FFFFFF;
}
.id-sb-rating {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: var(--fs-xs); font-weight: 700; color: #fbbf24;
}

/* ── CTA button (Gold) ── */
.id-sb-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 14px 14px 0;
    padding: 10px 16px; border-radius: 10px;
    background: linear-gradient(135deg, #A41034, #A41034);
    color: #fff; font-size: .82rem; font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(164,16,52,.4);
    transition: opacity .2s, transform .2s;
    letter-spacing: .02em;
}
.id-sb-cta:hover { opacity: .9; transform: translateY(-1px); color: #fff; text-decoration: none; }

/* ── Student switch ── */
.id-sb-switch {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 8px 14px 0;
    padding: 8px 14px; border-radius: 9px;
    background: rgba(37,99,235,.1); border: 1px solid rgba(37,99,235,.22);
    color: rgba(147,197,253,.7); font-size: .76rem; font-weight: 600;
    text-decoration: none; transition: all .2s;
}
.id-sb-switch:hover { background: rgba(37,99,235,.2); color: #bfdbfe; text-decoration: none; }

/* ── Navigation ── */
.id-sb-nav { flex: 1; padding: 8px 10px 20px; }

.id-sb-section {
    font-size: .6rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(245,158,11,.4);
    padding: 14px 8px 5px;
    display: flex; align-items: center; gap: 8px;
}
.id-sb-section::after { content:''; flex:1; height:1px; background: rgba(245,158,11,.12); }

.id-sb-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }

.id-sb-link {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 10px;
    font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.5);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all .2s;
}
.id-sb-link:hover {
    background: linear-gradient(135deg, #A41034 0%, #3d0613 50%, #1a1a1a 100%); color: rgba(255,255,255,.9);
    text-decoration: none; padding-left: 14px;
}
.id-sb-link--active {
    background: #A41034 !important;
    color: #e9d5ff !important; font-weight: 700;
    border-left-color: #FFFFFF;
    padding-left: 13px !important;
}
.id-sb-link--active:hover { padding-left: 13px !important; }

/* ── Icon bubbles ── */
.id-sb-icon {
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size:1rem; flex-shrink: 0; transition: transform .2s;
}
.id-sb-link:hover .id-sb-icon { transform: scale(1.1); }
.id-sb-link--active .id-sb-icon { background: rgba(255,255,255,.15) !important; color: #fff !important; }

/* Navy + Gold icon palette */
.ic-dash      { background: rgba(37,99,235,.25);  color: #93c5fd; }
.ic-courses   { background: rgba(245,158,11,.2);  color: #fcd34d; }
.ic-qna       { background: rgba(6,182,212,.2);   color: #67e8f9; }
.ic-quiz      { background: rgba(245,158,11,.2);  color: #fcd34d; }
.ic-announce  { background: rgba(244,63,94,.2);   color: #fda4af; }
.ic-reviews   { background: rgba(245,158,11,.2);  color: #fcd34d; }
.ic-sells     { background: rgba(37,99,235,.22);  color: #93c5fd; }
.ic-payout    { background: rgba(16,185,129,.2);  color: #6ee7b7; }
.ic-zoom      { background: rgba(6,182,212,.2);   color: #67e8f9; }
.ic-jitsi     { background: rgba(37,99,235,.2);   color: #93c5fd; }
.ic-setting   { background: rgba(245,158,11,.15); color: #fcd34d; }
.ic-logout    { background: rgba(244,63,94,.18);  color: #fda4af; }

/* Logout */
.id-sb-logout {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 10px;
    font-size: .84rem; font-weight: 500; color: rgba(244,63,94,.65);
    text-decoration: none; cursor: pointer;
    border-left: 3px solid transparent;
    transition: all .2s;
}
.id-sb-logout:hover { background: rgba(244,63,94,.1); color: #fda4af; text-decoration: none; }

.id-sb-badge { margin-left:auto; background:#A41034; color:#fff; font-size:1rem; font-weight:700; line-height:1; padding:2px 6px; border-radius:20px; }

.id-sb-divider { height:1px; background: linear-gradient(90deg, transparent, rgba(37,99,235,.2), transparent); margin:4px 10px; }

/* ── Footer ── */
.id-sb-foot {
    padding: 12px 16px;
    border-top: 1px solid rgba(37,99,235,.15);
    font-size: 10px; color: rgba(255,255,255,.2); text-align: center;
}
.id-sb-foot a { color: rgba(245,158,11,.5); text-decoration: none; }

/* Responsive */
@media(max-width:991px){
    .id-sidebar { position:static; margin-bottom:24px; border-radius:14px; }
    .id-sb-nav ul { flex-direction:row; flex-wrap:wrap; gap:4px; }
    .id-sb-link { padding:7px 10px; font-size:.8rem; }
    .id-sb-section { display:none; }
    .id-sb-divider { display:none; }
}

/* ── sidebar ── */

/* ══════════════════════════════════════
   STUDENT SIDEBAR — Purple theme
══════════════════════════════════════ */
.student-sidebar {
    margin-top: 0;
    background: #1C1514;
    border-radius: 16px;
    overflow: hidden;
    position: sticky;
    top: calc(var(--header-h, 70px) + 16px);
    box-shadow:
        0 0 0 1px rgba(164,16,52,.18),
        0 8px 32px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(167,139,250,.08);
    font-family:"Plus Jakarta Sans", sans-serif;
}

/* ── Cover photo banner in sidebar ── */
.ss-cover {
    position: relative;
    width: 100%;
    height: 90px;
    background-size: cover;
    background-position: center;
    background-color: #6B0E29;
    overflow: hidden;
    flex-shrink: 0;
}
.ss-cover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,6,30,.2) 0%, rgba(10,6,30,.6) 100%);
}
.ss-cover-edit {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 28px; height: 28px; border-radius: 7px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff; font-size: .7rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none;
    transition: background .2s;
}
.ss-cover-edit:hover { background: rgba(255,255,255,.32); color: #fff; }

/* ── Profile block ── */
.ss-profile {
    padding: 0 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
}
.ss-avatar-wrap {
    position: relative; width: 80px; height: 80px;
    margin-top: -40px; flex-shrink: 0;
}
.ss-avatar {
    width: 80px; height: 80px; border-radius: 50%;
    object-fit: cover;
    border: 3px solid #1a1040;
    box-shadow: 0 0 0 3px rgba(227, 227, 225, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
    display: block;
}
.ss-avatar-dot {
    position: absolute; bottom: 2px; right: 2px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #10b981; border: 2px solid #1a1040;
}
.ss-avatar-cam {
    position: absolute; bottom: 0; right: 0;
    width: 26px; height: 26px; border-radius: 50%;
    background: #A41034; color: #fff;
    border: 2px solid #1a1040;
    display: flex; align-items: center; justify-content: center;
    font-size: .62rem; cursor: pointer;
    box-shadow: 0 2px 6px rgba(164,16,52,.5);
    transition: background .2s;
}
.ss-avatar-cam:hover { background: #A41034; }
.ss-name {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .95rem; font-weight: 800; color: #fff;
    line-height: var(--lh-tight); margin: 0;
}
.ss-email {
    font-size: .72rem; color: rgba(255,255,255,.38);
    margin: 0; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 100%;
}

/* ── If instructor: switch button ── */
.ss-switch {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 12px 16px 0;
    padding: 8px 14px; border-radius: 9px;
    background:#A41034; border: 1px solid #A41034;
    color: #fff; font-size: .76rem; font-weight: 600;
    text-decoration: none; transition: all .2s;
}
.ss-switch:hover { background: #A41034; color: #fff; text-decoration: none; }

/* ── Nav body ── */
.ss-nav { padding: 8px 10px 16px; }

.ss-section {
    font-size: .6rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.22);
    padding: 14px 8px 5px;
    display: flex; align-items: center; gap: 8px;
}
.ss-section::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.07); }

.ss-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }

.ss-nav ul li a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 10px;
    font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.55);
    text-decoration: none; transition: all .2s;
    border-left: 3px solid transparent;
}
.ss-nav ul li a:hover {
   background: linear-gradient(135deg, #A41034 0%, #3d0613 50%, #1a1a1a 100%);
    color: rgba(255, 255, 255, 0.9); 
    text-decoration: none;
    padding-left: 14px;
}
.ss-nav ul li.active a {
    background: #A41034; color: #e9d5ff; font-weight: 700;
    border-left-color: #FFFFFF;
    padding-left: 13px;
}

/* ── Colored icon bubbles ── */
.ss-icon {
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size:1rem; flex-shrink: 0;
    transition: transform .2s;
}
.ss-nav ul li a:hover .ss-icon { transform: scale(1.1); }

/* Per-item icon colors */
.ic-dashboard  { background: rgba(164,16,52,.25); color: #FFFFFF; }
.ic-courses    { background: rgba(164,16,52,.22); color: #FFFFFF; }
.ic-klips      { background: rgba(6,182,212,.22);  color: #67e8f9; }
.ic-shorts     { background: rgba(244,63,94,.22);  color: #fda4af; }
.ic-certs      { background: rgba(16,185,129,.22); color: #6ee7b7; }
.ic-quiz       { background: rgba(245,158,11,.22); color: #fcd34d; }
.ic-wishlist   { background: rgba(244,63,94,.22);  color: #fda4af; }
.ic-favourites { background: rgba(245,158,11,.22); color: #fcd34d; }
.ic-reviews    { background: rgba(249,115,22,.22); color: #fdba74; }
.ic-orders     { background: rgba(37,99,235,.22);  color: #93c5fd; }
.ic-settings   { background: rgba(167,139,250,.18);color: #FFFFFF; }
.ic-logout     { background: rgba(244,63,94,.18);  color: #fda4af; }

/* Active icon: match border color */
.ss-nav ul li.active a .ss-icon {
    background: rgba(255,255,255,.15); color: #fff;
}

/* Logout special */
.ss-nav ul li.ss-logout a { color: rgba(244,63,94,.75); }
.ss-nav ul li.ss-logout a:hover { background: rgba(244,63,94,.12); color: #fda4af; }

.ss-badge { margin-left:auto; background:#A41034; color:#fff; font-size:1rem; font-weight:700; line-height:1; padding:2px 6px; border-radius:20px; }

.ss-divider { height:1px; background:rgba(255,255,255,.07); margin:4px 10px; }

/* ── Mobile ── */
@media(max-width:991px){
    .student-sidebar { position:static; margin-bottom:24px; border-radius:14px; }
    .ss-nav ul { flex-direction:row; flex-wrap:wrap; gap:4px; }
    .ss-nav ul li a { padding:7px 10px; font-size:.8rem; }
    .ss-section { display:none; }
    .ss-divider { display:none; }
}
@media(max-width:575px){
    .ss-profile { padding:14px; }
    .ss-icon { width:26px; height:26px; font-size:.7rem; }
}

/* ── index ── */
/* ── Google Fonts ── */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
    --bg:         transparent;
    --card:       #ffffff;
    --card-alt:   #f8f9fc;
    --border:     #e4e7f0;
    --purple:     #A41034;
    --purple-l:   #FFFFFF;
    --cyan:       #06b6d4;
    --gold:       #f59e0b;
    --rose:       #f43f5e;
    --emerald:    #10b981;
    --orange:     #f97316;
    --text:       #111827;
    --text-sub:   #6b7280;
    --text-muted: #9ca3af;
    --radius:     16px;
    --radius-sm:  10px;
}

/* ── Base ─────────────────────────────────────────────────── */
.id { font-family:"Plus Jakarta Sans", sans-serif; padding-bottom: 60px; }
.id * { box-sizing: border-box; }

/* ── HERO ────────────────────────────────────────────────── */
.id-hero {
    background: #A41034;
    border-radius: var(--radius);
    border: none;
    padding: 36px 40px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 12px 48px rgba(164,16,52,.22), 0 4px 16px rgba(0,0,0,.12);
}
.id-hero::before,
.id-hero::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.id-hero::before {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(164,16,52,.45) 0%, transparent 65%);
    top: -140px; right: 60px;
}
.id-hero::after {
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(6,182,212,.28) 0%, transparent 65%);
    bottom: -90px; left: 180px;
}
.id-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px; pointer-events: none;
}
.id-hero__left { position: relative; z-index: 1; }
.id-hero__greeting {
    font-size: .7rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #FFFFFF; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.id-hero__greeting::before {
    content: ''; width: 18px; height: 2px;
    background: #A41034; border-radius: 2px; display: inline-block;
}
.id-hero__name {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2.4rem; font-weight: 800;
    color: #fff; line-height: 1.15; margin-bottom: 10px; letter-spacing: -.02em;
}
 
.id-hero__sub { font-size: .9rem; color: rgba(255,255,255,.72); max-width: 400px; line-height: var(--lh-normal); }
.id-hero__right {
    position: relative; z-index: 1; flex-shrink: 0;
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end;
}
.id-hero__badge {
    background: #1C1514;
    border: 1px solid #1C1514;
    backdrop-filter: blur(16px); border-radius: var(--radius-sm);
    padding: 18px 24px; text-align: center; min-width: 120px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.id-hero__badge-val {
    display: block; font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 5px;
}
.id-hero__badge-lbl {
    font-size: .68rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: #FFFFFF;
}

/* ── STAT CARDS ──────────────────────────────────────────── */
.id-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width:991px) { .id-stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width:575px) { .id-stats { grid-template-columns: 1fr; } }

.id-stat {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    border-left: 5px solid;
    padding: 22px 22px 22px 20px;
    position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: 16px;
    transition: transform .25s, box-shadow .25s;
    cursor: default;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 6px 24px rgba(0,0,0,.22);
}
.id-stat:hover { transform: translateY(-3px); }

.id-stat--courses  { border-left-color: #A41034; }
.id-stat--klips    { border-left-color: #06b6d4; }
.id-stat--earning  { border-left-color: #10b981; }
.id-stat--year     { border-left-color: #f59e0b; }
.id-stat--wishlist { border-left-color: #f43f5e; }
.id-stat--reviews  { border-left-color: #f97316; }

.id-stat--courses:hover  { box-shadow: 0 8px 28px rgba(164,16,52,.14); }
.id-stat--klips:hover    { box-shadow: 0 8px 28px rgba(6,182,212,.14); }
.id-stat--earning:hover  { box-shadow: 0 8px 28px rgba(16,185,129,.14); }
.id-stat--year:hover     { box-shadow: 0 8px 28px rgba(245,158,11,.14); }
.id-stat--wishlist:hover { box-shadow: 0 8px 28px rgba(244,63,94,.14); }
.id-stat--reviews:hover  { box-shadow: 0 8px 28px rgba(249,115,22,.14); }

.id-stat__icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
}
.id-stat--courses  .id-stat__icon { background: rgba(164,16,52,.1); color: #A41034; }
.id-stat--klips    .id-stat__icon { background: rgba(6,182,212,.1);  color: #06b6d4; }
.id-stat--earning  .id-stat__icon { background: rgba(16,185,129,.1); color: #10b981; }
.id-stat--year     .id-stat__icon { background: rgba(245,158,11,.1); color: #d97706; }
.id-stat--wishlist .id-stat__icon { background: rgba(244,63,94,.1);  color: #f43f5e; }
.id-stat--reviews  .id-stat__icon { background: rgba(249,115,22,.1); color: #f97316; }

.id-stat__body { flex: 1; min-width: 0; }
.id-stat__val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2rem; font-weight: 800;
    color: var(--text); display: block; line-height: 1; margin-bottom: 5px;
}
.id-stat__lbl {
    font-size: .72rem; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-muted);
}

/* ── SECTION LABEL ────────────────────────────────────────── */
.id-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
}
.id-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

/* ── QUICK LINKS ──────────────────────────────────────────── */
.id-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
@media (max-width:767px) { .id-links { grid-template-columns: repeat(2,1fr); } }

.id-link {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 16px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 13px;
    text-align: center; text-decoration: none;
    position: relative; overflow: hidden;
    transition: all .25s;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 6px 24px rgba(0,0,0,.22);
}
.id-link::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    border-radius: 0 0 var(--radius) var(--radius);
    transform: scaleX(0);
    transition: transform .28s;
}
.id-link:hover { transform: translateY(-3px); border-color: transparent; }
.id-link:hover::after { transform: scaleX(1); }

.id-link--courses:hover  { box-shadow: 0 10px 30px rgba(164,16,52,.13); }
.id-link--klips:hover    { box-shadow: 0 10px 30px rgba(6,182,212,.13); }
.id-link--earnings:hover { box-shadow: 0 10px 30px rgba(16,185,129,.13); }
.id-link--quiz:hover     { box-shadow: 0 10px 30px rgba(245,158,11,.13); }
.id-link--sells:hover    { box-shadow: 0 10px 30px rgba(249,115,22,.13); }
.id-link--payout:hover   { box-shadow: 0 10px 30px rgba(244,63,94,.13); }
.id-link--reviews:hover  { box-shadow: 0 10px 30px rgba(245,158,11,.13); }
.id-link--profile:hover  { box-shadow: 0 10px 30px rgba(164,16,52,.13); }

.id-link--courses::after  { background: #A41034; }
.id-link--klips::after    { background: #06b6d4; }
.id-link--earnings::after { background: #10b981; }
.id-link--quiz::after     { background: #f59e0b; }
.id-link--sells::after    { background: #f97316; }
.id-link--payout::after   { background: #f43f5e; }
.id-link--reviews::after  { background: #f59e0b; }
.id-link--profile::after  { background: #A41034; }

.id-link__icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; position: relative; z-index: 1;
    transition: transform .25s;
}
.id-link:hover .id-link__icon { transform: scale(1.1); }

.id-link--courses  .id-link__icon { background: rgba(164,16,52,.1); color: #A41034; }
.id-link--klips    .id-link__icon { background: rgba(6,182,212,.1);  color: #06b6d4; }
.id-link--earnings .id-link__icon { background: rgba(16,185,129,.1); color: #10b981; }
.id-link--quiz     .id-link__icon { background: rgba(245,158,11,.1); color: #d97706; }
.id-link--sells    .id-link__icon { background: rgba(249,115,22,.1); color: #f97316; }
.id-link--payout   .id-link__icon { background: rgba(244,63,94,.1);  color: #f43f5e; }
.id-link--reviews  .id-link__icon { background: rgba(245,158,11,.1); color: #d97706; }
.id-link--profile  .id-link__icon { background: rgba(164,16,52,.08);color: #A41034; }

.id-link__lbl {
    font-size: .8rem; font-weight: 600; color: var(--text-sub);
    line-height: var(--lh-snug); position: relative; z-index: 1;
    transition: color .25s;
}
.id-link:hover .id-link__lbl { color: var(--text); }

/* ── TABLE CARD ──────────────────────────────────────────── */
.id-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 6px 24px rgba(0,0,0,.22);
}
.id-card__head {
    padding: 18px 28px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--card-alt);
}
.id-card__head-left { display: flex; align-items: center; gap: 10px; }
.id-card__head-icon { color: var(--purple); font-size: .9rem; display: flex; align-items: center; }
.id-card__head-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 700; color: var(--text); margin: 0;
}
.id-card__head-sub { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.id-card__link {
    font-size: .78rem; font-weight: 600; color: var(--purple);
    text-decoration: none; display: flex; align-items: center; gap: 4px;
    transition: opacity .2s;
}
.id-card__link:hover { opacity: .75; }

.id-table { width: 100%; border-collapse: collapse; }
.id-table thead th {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--text-muted);
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--card-alt);
    white-space: nowrap;
}
.id-table tbody td {
    padding: 14px 24px; font-size: .85rem; color: var(--text-sub);
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle; transition: background .15s;
}
.id-table tbody tr:last-child td { border-bottom: none; }
.id-table tbody tr:hover td { background: #FDF5F6; color: var(--text); }

.id-invoice { font-weight: 700; color: var(--purple); font-size: .85rem; }
.id-course-name { font-size: .85rem; font-weight: 600; color: var(--text); }
.id-amount  { font-weight: 700; color: var(--text); }
.id-currency { font-size: .72rem; color: var(--text-muted); margin-left: 3px; }

.id-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; font-weight: 700; padding: 4px 10px;
    border-radius: 20px; line-height: var(--lh-normal); white-space: nowrap;
    letter-spacing: .03em;
}
.id-badge--success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.id-badge--warn    { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.id-badge--danger  { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }
.id-badge--info    { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }

.id-view-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size:1rem; font-weight: 600; color: var(--purple);
    text-decoration: none; padding: 5px 12px;
    border: 1px solid rgba(164,16,52,.25);
    border-radius: 8px; background: rgba(164,16,52,.04);
    transition: all .2s;
}
.id-view-btn:hover { background: rgba(164,16,52,.1); border-color: var(--purple); }

.id-empty { padding: 50px 24px; text-align: center; }
.id-empty__icon {
    width: 60px; height: 60px; border-radius: 16px;
    background: rgba(164,16,52,.08); color: var(--purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin: 0 auto 16px;
}
.id-empty__text { color: var(--text-muted); font-size: .875rem; }

/* ── index ── */
/* ── Google Fonts ── */

/* ── Section override ── */
 
.dashboard__top-wrap .instructor__cover-bg {
    border-radius: 18px; overflow: hidden;
    margin-bottom: 24px;
}

/* ── Tokens ──────────────────────────────────────────────── */
:root {
    --bg:         transparent;
    --card:       #ffffff;
    --card-alt:   #f8f9fc;
    --border:     #e4e7f0;
    --purple:     #A41034;
    --purple-l:   #FFFFFF;
    --cyan:       #06b6d4;
    --gold:       #f59e0b;
    --rose:       #f43f5e;
    --emerald:    #10b981;
    --orange:     #f97316;
    --text:       #111827;
    --text-sub:   #6b7280;
    --text-muted: #9ca3af;
    --radius:     16px;
    --radius-sm:  10px;
}

/* ── Base ─────────────────────────────────────────────────── */
.sd { font-family:"Plus Jakarta Sans", sans-serif; padding-bottom: 60px; margin-top: 10px;}
.sd * { box-sizing: border-box; }

/* ── Alerts ───────────────────────────────────────────────── */
.sd-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px; border-radius: 12px; margin-bottom: 20px;
    font-size: .85rem; line-height: 1.55; border-left: 4px solid;
}
.sd-alert--warn  { background: #fffbeb; border-color: var(--gold);  color: #92400e; }
.sd-alert--error { background: #fff1f2; border-color: var(--rose);  color: #9f1239; }

/* ── HERO — keep dark, floats on white page ───────────────── */
.sd-hero {
    background: #A41034;
    border-radius: var(--radius);
    border: none;
    padding: 36px 40px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 12px 48px rgba(164,16,52,.22), 0 4px 16px rgba(0,0,0,.12);
}
.sd-hero::before,
.sd-hero::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.sd-hero::before {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(164,16,52,.45) 0%, transparent 65%);
    top: -140px; right: 60px;
}
.sd-hero::after {
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(6,182,212,.28) 0%, transparent 65%);
    bottom: -90px; left: 180px;
}
.sd-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px; pointer-events: none;
}
.sd-hero__left { position: relative; z-index: 1; }
.sd-hero__greeting {
    font-size: .7rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #FFFFFF; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.sd-hero__greeting::before {
    content: ''; width: 18px; height: 2px;
    background: #FFFFFF; border-radius: 2px; display: inline-block;
}
.sd-hero__name {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2.4rem; font-weight: 800;
    color: #fff; line-height: 1.15; margin-bottom: 10px; letter-spacing: -.02em;
}
.sd-hero__name span {
    background: linear-gradient(90deg, #FFFFFF, #06b6d4);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sd-hero__sub { font-size: .9rem; color: rgba(255,255,255,.72); max-width: 400px; line-height: var(--lh-normal); }
.sd-hero__right {
    position: relative; z-index: 1; flex-shrink: 0;
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end;
}
.sd-hero__badge {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(167,139,250,.35);
    backdrop-filter: blur(16px); border-radius: var(--radius-sm);
    padding: 18px 24px; text-align: center; min-width: 120px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.sd-hero__badge-val {
    display: block; font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 5px;
}
.sd-hero__badge-lbl {
    font-size: .68rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: #FFFFFF;
}

/* ── STAT CARDS — white with colored left stripe ──────────── */
.sd-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width:991px) { .sd-stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width:575px) { .sd-stats { grid-template-columns: 1fr; } }

.sd-stat {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    border-left: 5px solid;
    padding: 22px 22px 22px 20px;
    position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: 16px;
    transition: transform .25s, box-shadow .25s;
    cursor: default;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 6px 24px rgba(0,0,0,.22);
}
.sd-stat:hover { transform: translateY(-3px); }

.sd-stat--courses { border-left-color: #A41034; }
.sd-stat--klips   { border-left-color: #06b6d4; }
.sd-stat--quiz    { border-left-color: #f59e0b; }
.sd-stat--reviews { border-left-color: #f43f5e; }
.sd-stat--credit  { border-left-color: #10b981; }
.sd-stat--streak  { border-left-color: #f97316; }

.sd-stat--courses:hover { box-shadow: 0 8px 28px rgba(164,16,52,.14); }
.sd-stat--klips:hover   { box-shadow: 0 8px 28px rgba(6,182,212,.14); }
.sd-stat--quiz:hover    { box-shadow: 0 8px 28px rgba(245,158,11,.14); }
.sd-stat--reviews:hover { box-shadow: 0 8px 28px rgba(244,63,94,.14); }
.sd-stat--credit:hover  { box-shadow: 0 8px 28px rgba(16,185,129,.14); }
.sd-stat--streak:hover  { box-shadow: 0 8px 28px rgba(249,115,22,.14); }

/* no ::before needed — border-left is the stripe */
.sd-stat::before { display: none; }

.sd-stat__glow { display: none; }

.sd-stat__icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
}
.sd-stat--courses  .sd-stat__icon { background: rgba(164,16,52,.1); color: #A41034; }
.sd-stat--klips    .sd-stat__icon { background: rgba(6,182,212,.1);  color: #06b6d4; }
.sd-stat--quiz     .sd-stat__icon { background: rgba(245,158,11,.1); color: #d97706; }
.sd-stat--reviews  .sd-stat__icon { background: rgba(244,63,94,.1);  color: #f43f5e; }
.sd-stat--credit   .sd-stat__icon { background: rgba(16,185,129,.1); color: #10b981; }
.sd-stat--streak   .sd-stat__icon { background: rgba(249,115,22,.1); color: #f97316; }

.sd-stat__body { flex: 1; min-width: 0; }
.sd-stat__val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2rem; font-weight: 800;
    color: var(--text); display: block; line-height: 1; margin-bottom: 5px;
}
.sd-stat__lbl {
    font-size: .72rem; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-muted);
}

/* ── SECTION LABEL ────────────────────────────────────────── */
.sd-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
}
.sd-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

/* ── QUICK LINKS ──────────────────────────────────────────── */
.sd-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
@media (max-width:767px) { .sd-links { grid-template-columns: repeat(2,1fr); } }

.sd-link {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 16px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 13px;
    text-align: center; text-decoration: none;
    position: relative; overflow: hidden;
    transition: all .25s;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 6px 24px rgba(0,0,0,.22);
}
/* colored bottom bar that slides up on hover */
.sd-link::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    border-radius: 0 0 var(--radius) var(--radius);
    transform: scaleX(0);
    transition: transform .28s;
}
.sd-link:hover { transform: translateY(-3px); border-color: transparent; }
.sd-link:hover::after { transform: scaleX(1); }

.sd-link--enrolled:hover { box-shadow: 0 10px 30px rgba(164,16,52,.13); }
.sd-link--klips:hover    { box-shadow: 0 10px 30px rgba(6,182,212,.13); }
.sd-link--wishlist:hover { box-shadow: 0 10px 30px rgba(244,63,94,.13); }
.sd-link--quiz:hover     { box-shadow: 0 10px 30px rgba(245,158,11,.13); }
.sd-link--certs:hover    { box-shadow: 0 10px 30px rgba(16,185,129,.13); }
.sd-link--orders:hover   { box-shadow: 0 10px 30px rgba(249,115,22,.13); }
.sd-link--profile:hover  { box-shadow: 0 10px 30px rgba(164,16,52,.13); }
.sd-link--shorts:hover   { box-shadow: 0 10px 30px rgba(6,182,212,.13); }

.sd-link--enrolled::after  { background: #A41034; }
.sd-link--klips::after     { background: #06b6d4; }
.sd-link--wishlist::after  { background: #f43f5e; }
.sd-link--quiz::after      { background: #f59e0b; }
.sd-link--certs::after     { background: #10b981; }
.sd-link--orders::after    { background: #f97316; }
.sd-link--profile::after   { background: #A41034; }
.sd-link--shorts::after    { background: #06b6d4; }

.sd-link__icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; position: relative; z-index: 1;
    transition: transform .25s;
}
.sd-link:hover .sd-link__icon { transform: scale(1.1); }

.sd-link--enrolled  .sd-link__icon { background: rgba(164,16,52,.1); color: #A41034; }
.sd-link--klips     .sd-link__icon { background: rgba(6,182,212,.1);  color: #06b6d4; }
.sd-link--wishlist  .sd-link__icon { background: rgba(244,63,94,.1);  color: #f43f5e; }
.sd-link--quiz      .sd-link__icon { background: rgba(245,158,11,.1); color: #d97706; }
.sd-link--certs     .sd-link__icon { background: rgba(16,185,129,.1); color: #10b981; }
.sd-link--orders    .sd-link__icon { background: rgba(249,115,22,.1); color: #f97316; }
.sd-link--profile   .sd-link__icon { background: rgba(164,16,52,.08);color: #A41034; }
.sd-link--shorts    .sd-link__icon { background: rgba(6,182,212,.08); color: #06b6d4; }

.sd-link__lbl {
    font-size: .8rem; font-weight: 600; color: var(--text-sub);
    line-height: var(--lh-snug); position: relative; z-index: 1;
    transition: color .25s;
}
.sd-link:hover .sd-link__lbl { color: var(--text); }

/* ── ORDERS CARD ──────────────────────────────────────────── */
.sd-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 6px 24px rgba(0,0,0,.22);
}
.sd-card__head {
    padding: 18px 28px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--card-alt);
}
.sd-card__title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 700; color: var(--text);
    display: flex; align-items: center; gap: 10px;
}
.sd-card__title i { color: var(--purple); font-size: .9rem; }
.sd-card__link {
    font-size: .78rem; font-weight: 600; color: var(--purple);
    text-decoration: none; display: flex; align-items: center; gap: 4px;
    transition: opacity .2s;
}
.sd-card__link:hover { opacity: .75; }

.sd-table { width: 100%; border-collapse: collapse; }
.sd-table thead th {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--text-muted);
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--card-alt);
    white-space: nowrap;
}
.sd-table tbody td {
    padding: 14px 24px; font-size: .85rem; color: var(--text-sub);
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle; transition: background .15s;
}
.sd-table tbody tr:last-child td { border-bottom: none; }
.sd-table tbody tr:hover td { background: #FDF5F6; color: var(--text); }

.sd-invoice { font-weight: 700; color: var(--purple); font-size: .85rem; }
.sd-amount  { font-weight: 700; color: var(--text); }
.sd-currency { font-size: .72rem; color: var(--text-muted); margin-left: 3px; }
.sd-gateway  { text-transform: capitalize; color: var(--text-sub); }

.sd-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; font-weight: 700; padding: 4px 10px;
    border-radius: 20px; line-height: var(--lh-normal); white-space: nowrap;
    letter-spacing: .03em;
}
.sd-badge--success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.sd-badge--warn    { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.sd-badge--danger  { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }
.sd-badge--info    { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }

.sd-view-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size:1rem; font-weight: 600; color: var(--purple);
    text-decoration: none; padding: 5px 12px;
    border: 1px solid rgba(164,16,52,.25);
    border-radius: 8px; background: rgba(164,16,52,.04);
    transition: all .2s;
}
.sd-view-btn:hover { background: rgba(164,16,52,.1); border-color: var(--purple); }

.sd-empty { padding: 50px 24px; text-align: center; }
.sd-empty__icon {
    width: 60px; height: 60px; border-radius: 16px;
    background: rgba(164,16,52,.08); color: var(--purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin: 0 auto 16px;
}
.sd-empty__text { color: var(--text-muted); font-size: .875rem; }

/* ── index ── */

/* ═══════════════════════════════════════════
   INSTRUCTOR SETTINGS — light white card
   (same structure as student, navy+gold theme)
════════════════════════════════════════════ */
.settings-page-wrapper { padding: 0; font-family:"Plus Jakarta Sans", sans-serif; }

/* ── Page header ── */
.settings-page-header {
    background: linear-gradient(135deg, #111827 0%, #1e3a8a 50%, #2563eb 100%);
    border-radius: 16px; padding: 28px 32px; margin-bottom: 28px;
    display: flex; align-items: center; gap: 16px;
    box-shadow: 0 8px 32px rgba(37,99,235,.35);
}
.settings-page-header .header-icon {
    width: 52px; height: 52px;
    background: rgba(255,255,255,.18);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xl); color: #fff; flex-shrink: 0;
}
.settings-page-header h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #fff; margin: 0; font-size: var(--fs-xl); font-weight: 800;
}
.settings-page-header p { color: rgba(255,255,255,.75); margin: 0; font-size: var(--fs-sm); }

/* ── Main card — white, same as student ── */
.settings-card {
   background-color: #FDFBF8 !important;
    background: #F5F1EA !important;
    box-shadow: 0 2px 20px rgba(10,6,24,.12);
    overflow: hidden; display: flex; min-height: 600px;
}

/* ── Sidebar nav — light bg, navy/gold active ── */
.settings-sidebar {
    width: 240px; flex-shrink: 0;
    background: #f7f5ff; border-right: 1px solid #ede9f5;
    padding: 24px 16px; display: flex; flex-direction: column; gap: 4px;
}
.settings-sidebar .nav-item { width: 100%; }
.settings-sidebar .nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 10px;
    color: #6d6c80; font-weight: 500; font-size: var(--fs-sm);
    border: none; background: transparent; width: 100%;
    text-align: left; transition: all .2s; position: relative;
}
.settings-sidebar .nav-link .nav-icon {
    width: 34px; height: 34px; border-radius: 8px;
    background: #ede9f5; display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); color: #1e1240; flex-shrink: 0; transition: all .2s;
}
.settings-sidebar .nav-link:hover { color: #1e1240; background: linear-gradient(
    135deg,
    #f7e7eb 0%,
    #fdf7f8 100%
); }
.settings-sidebar .nav-link.active {
    color: #1e1240; font-weight: 600;
    background: linear-gradient(135deg, #ede9f5 0%, #f3f0ff 100%);
}
.settings-sidebar .nav-link.active .nav-icon {
    background: #111827; color: #A41034;
    box-shadow: 0 4px 12px rgba(30,18,64,.35);
}
.settings-sidebar .nav-link.active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 28px;
    background: linear-gradient(to bottom, #f59e0b, #2563eb);
    border-radius: 0 2px 2px 0;
}

/* ── Content area ── */
.settings-content { flex: 1; padding: 32px; overflow: hidden; }

/* ── Section title ── */
.settings-section-title {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 28px; padding-bottom: 16px;
    border-bottom: 2px solid #f0ecff;
}
.settings-section-title .section-icon {
    width: 40px; height: 40px;
    background: #1C1514;
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    color: #fcd34d; font-size: var(--fs-md);
    box-shadow: 0 4px 12px rgba(30,18,64,.3);
}
.settings-section-title h5 { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: #1e1240; font-family: "Plus Jakarta Sans", sans-serif; }
.settings-section-title p  { margin: 0; font-size: var(--fs-xs); color: #6d6c80; }

/* ── Form fields ── */
.instructor__profile-form-wrap { padding: 0 !important; background: transparent !important; }
.instructor__profile-form       { padding: 0 !important; background: transparent !important; }

.instructor__profile-form .form-grp,
.settings-form .form-grp { margin-bottom: 20px; }

.instructor__profile-form .form-grp label,
.settings-form .form-grp label {
    display: block; font-size: var(--fs-sm); font-weight: 600;
    color: #1e1240; margin-bottom: 7px; letter-spacing: .01em;
}
.instructor__profile-form .form-grp label code,
.settings-form .form-grp label code { color: #d97706; background: none; padding: 0; }

.instructor__profile-form .form-grp input:not([type="file"]),
.instructor__profile-form .form-grp select,
.instructor__profile-form .form-grp textarea,
.settings-form .form-grp input:not([type="file"]),
.settings-form .form-grp select,
.settings-form .form-grp textarea {
    width: 100%; height: 46px; padding: 10px 16px;
    border: 1.5px solid #e2dff0; border-radius: 10px;
    font-size: var(--fs-sm); color: #1e1240; background: #faf9ff;
    transition: all .2s; outline: none; display: block;
}
.instructor__profile-form .form-grp input:focus,
.instructor__profile-form .form-grp select:focus,
.instructor__profile-form .form-grp textarea:focus,
.settings-form .form-grp input:focus,
.settings-form .form-grp select:focus,
.settings-form .form-grp textarea:focus {
    border-color: #f59e0b; background: #fff;
    box-shadow: 0 0 0 3px rgba(245,158,11,.12);
}
.instructor__profile-form .form-grp textarea,
.settings-form .form-grp textarea { height: 110px; resize: vertical; }
.instructor__profile-form .form-grp input[type="file"] {
    height: auto; padding: 8px 12px; background: #fff;
}

/* ── Submit buttons ── */
.instructor__profile-form .submit-btn,
.settings-form .submit-btn {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 28px; padding-top: 20px;
    border-top: 1px solid #f0ecff;
}
.instructor__profile-form .submit-btn .btn,
.settings-form .submit-btn .btn {
    background: #A41034 !important;
    color: #fff !important; border: none !important; padding: 11px 28px;
    border-radius: 10px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 14px rgba(30,18,64,.3) !important; transition: all .25s;
}
.instructor__profile-form .submit-btn .btn:hover,
.settings-form .submit-btn .btn:hover {
    background: #A41034 !important;
    box-shadow: 0 6px 20px rgba(37,99,235,.4) !important; transform: translateY(-1px);
}
.instructor__profile-form .submit-btn .btn-two,
.settings-form .submit-btn .btn-two {
    background: transparent !important; color: #e11b24 !important;
    border: 1.5px solid #e11b24 !important; box-shadow: none !important;
}
.instructor__profile-form .submit-btn .btn-two:hover,
.settings-form .submit-btn .btn-two:hover {
    background: #e11b24 !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(225,27,36,.3) !important;
}

/* ── Education/Experience tables ── */
.settings-content .dashboard__content-title {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 2px solid #f0ecff;
}
.settings-content .dashboard__content-title .title {
    font-size: 1rem; font-weight: 700; color: #1e1240; margin: 0;
}
.settings-content .dashboard__review-table table thead th {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #6d6c80;
    border-bottom: 2px solid #f3f4f6; background: #fafafa; padding: 10px 16px;
}
.settings-content .dashboard__review-table table tbody td {
    font-size: .875rem; color: #374151; padding: 12px 16px;
    border-bottom: 1px solid #f9fafb; vertical-align: middle;
}
.settings-content .dashboard__review-table table tbody tr:hover td { background: #faf7ff; }
.settings-content .dashboard__review-action { display: flex; align-items: center; gap: 8px; }
.settings-content .dashboard__review-action a {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; text-decoration: none; transition: all .2s;
}
.settings-content .dashboard__review-action a:first-child {
    background: rgba(37,99,235,.08); border: 1.5px solid rgba(37,99,235,.2); color: #2563eb;
}
.settings-content .dashboard__review-action a:first-child:hover {
    background: rgba(37,99,235,.16); border-color: #2563eb;
}
.settings-content .dashboard__review-action a:last-child {
    background: rgba(239,68,68,.07); border: 1.5px solid rgba(239,68,68,.2); color: #dc2626;
}
.settings-content .dashboard__review-action a:last-child:hover {
    background: rgba(239,68,68,.15); border-color: #dc2626;
}
.settings-content .instructor__profile-form-wrap { margin-bottom: 28px; }

/* Add Exp/Edu buttons */
.settings-content .btn-primary,
.settings-content .btn.btn-primary,
.settings-content .btn-hight-basic {
    background: #A41034 !important;
    border-color: #A41034 !important; color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(164,16,52,.28) !important;
    border-radius: 10px !important; font-weight: 600 !important;
    padding: 9px 20px !important; transition: all .2s !important;
}
.settings-content .btn-primary:hover,
.settings-content .btn.btn-primary:hover,
.settings-content .btn-hight-basic:hover {
    background: #A41034 !important;
    box-shadow: 0 6px 18px rgba(37,99,235,.4) !important;
    transform: translateY(-1px) !important;
}

/* ── Signature ── */
.instructor__profile-form img { border: 2px solid #e2dff0; border-radius: 8px; margin-top: 8px; }
.instructor__profile-form a.delete_signature {
    display: inline-block; margin-top: 6px; font-size: var(--fs-xs);
    color: #ef4444; text-decoration: underline; cursor: pointer;
}

/* ── Social icons ── */
.social-input-wrap { position: relative; }
.social-input-wrap .social-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); color: #fff; z-index: 1;
}
.social-input-wrap .social-icon.facebook { background: #1877f2; }
.social-input-wrap .social-icon.twitter  { background: #1da1f2; }
.social-input-wrap .social-icon.linkedin { background: #0a66c2; }
.social-input-wrap .social-icon.website  { background: #1e1240; }
.social-input-wrap .social-icon.github   { background: #24292e; }
.social-input-wrap input { padding-left: 46px !important; }

/* ── Modal — white ── */
.modal .modal-content { border-radius: 16px !important;   }
.modal .modal-header { border-bottom: 1px solid #f0ecff !important; }
.modal .modal-header .modal-title { font-weight: 700; color: #1e1240; font-size: 1.05rem; }
.modal .modal-footer { border-top: 1px solid #f0ecff !important; }
.modal .btn-close { box-shadow: none !important; transform: none !important; }
.modal .instructor__profile-form .form-grp input,
.modal .instructor__profile-form .form-grp textarea,
.modal .instructor__profile-form .form-grp select {
    border: 1.5px solid #e2dff0 !important; border-radius: 10px !important;
    padding: 10px 14px !important; font-size: var(--fs-sm) !important;
    background: #faf9ff !important; transition: all .2s !important; color: #1e1240 !important;
}
.modal .instructor__profile-form .form-grp input:focus,
.modal .instructor__profile-form .form-grp textarea:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important;
    background: #fff !important;
}
.modal .btn, .modal .btn-primary {
    background: #A41034 !important;
    border-color: #A41034 !important; color: #FFFFFF !important;
    border-radius: 10px !important; font-weight: 600 !important;
    padding: 9px 24px !important;
    box-shadow: 0 4px 12px rgba(164,16,52,.28) !important; transition: all .2s !important;
}
.modal .btn:hover, .modal .btn-primary:hover {
    background: #A41034 !important;
    box-shadow: 0 6px 18px rgba(37,99,235,.4) !important; transform: translateY(-1px) !important;
}
.modal .btn-close { background: none !important; box-shadow: none !important; transform: none !important; }

/* ── Responsive ── */
@media(max-width: 768px) {
    .settings-card { flex-direction: column; }
    .settings-sidebar {
        width: 100%; flex-direction: row; overflow-x: auto; padding: 12px;
        border-right: none; border-bottom: 1px solid #ede9f5;
        gap: 6px; scrollbar-width: none;
    }
    .settings-sidebar::-webkit-scrollbar { display: none; }
    .settings-sidebar .nav-item { flex-shrink: 0; }
    .settings-sidebar .nav-link { padding: 8px 14px; white-space: nowrap; border-radius: 8px; }
    .settings-sidebar .nav-link .nav-label { display: none; }
    .settings-content { padding: 20px; }
    .settings-page-header { padding: 20px; }
}
@media(max-width: 480px) {
    .settings-sidebar .nav-link .nav-label { display: block; font-size: var(--fs-xs); }
}

/* ── index ── */
/* ===== Settings Page Styles ===== */
.settings-page-wrapper {
    padding: 0;
}
.settings-page-header {
    background: #1C1514; 
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(94, 43, 255, 0.25);
}
.settings-page-header .header-icon {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.18);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    color: #fff;
    flex-shrink: 0;
}
.settings-page-header h4 {
    color: #fff;
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 700;
    font-family: var(--tg-heading-font-family);
}
.settings-page-header p {
    color: rgba(255,255,255,0.75);
    margin: 0;
    font-size: var(--fs-sm);
}

/* ===== Settings Card ===== */
.settings-card {
    background-color: #FDFBF8 !important;
    background: #F5F1EA !important;
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(94, 43, 255, 0.07);
    overflow: hidden;
    display: flex;
    min-height: 600px;
}

/* ===== Settings Sidebar Nav ===== */
.settings-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #faf9ff;
    border-right: 1px solid #ede9ff;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.settings-sidebar .nav-item {
    width: 100%;
}
.settings-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #6d6c80;
    font-weight: 500;
    font-size: var(--fs-sm);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: all 0.2s ease;
    position: relative;
}
.settings-sidebar .nav-link .nav-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f0ecff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    color: #A41034;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.settings-sidebar .nav-link:hover {
    color: #111827;
    background: linear-gradient(
    135deg,
    #f7e7eb 0%,
    #fdf7f8 100%
);
}
.settings-sidebar .nav-link.active {
    color: #111827;
    background: linear-gradient(135deg, #ede9ff 0%, #f5f0ff 100%);
    font-weight: 600;
}
.settings-sidebar .nav-link.active .nav-icon {
    background: #111827;
    color: #fff;
    box-shadow: 0 4px 12px rgba(94, 43, 255, 0.35);
}
.settings-sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 28px;
    background: #111827;
    border-radius: 0 2px 2px 0;
}

/* ===== Settings Content ===== */
.settings-content {
    flex: 1;
    padding: 32px;
    overflow: hidden;
}
.settings-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0ecff;
}
.settings-section-title .section-icon {
    width: 40px;
    height: 40px;
    background: #1C1514;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--fs-md);
    box-shadow: 0 4px 12px rgba(94, 43, 255, 0.3);
}
.settings-section-title h5 {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #2B0510;
    font-family: var(--tg-heading-font-family);
}
.settings-section-title p {
    margin: 0;
    font-size: var(--fs-xs);
    color: #6d6c80;
}

/* ===== Form Styling Overrides ===== */
.settings-form .form-grp {
    margin-bottom: 20px;
}
.settings-form .form-grp label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #2B0510;
    margin-bottom: 7px;
    letter-spacing: 0.01em;
}
.settings-form .form-grp label code {
    color: #111827;
    background: none;
    padding: 0;
    font-size: inherit;
}
.settings-form .form-grp input:not([type="file"]),
.settings-form .form-grp select,
.settings-form .form-grp textarea {
    width: 100%;
    height: 46px;
    padding: 10px 16px;
    border: 1.5px solid #e2e2f0;
    border-radius: 10px;
    font-size: var(--fs-sm);
    color: #2B0510;
    background: #fafafe;
    transition: all 0.2s ease;
    outline: none;
    font-family: var(--tg-body-font-family);
    -webkit-appearance: none;
    appearance: none;
}
.settings-form .form-grp input:focus,
.settings-form .form-grp select:focus,
.settings-form .form-grp textarea:focus {
    border-color: #111827;
 
    box-shadow: 0 0 0 3px rgba(94, 43, 255, 0.1);
}
.settings-form .form-grp textarea {
    height: 110px;
    resize: vertical;
}
.settings-form .form-grp select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235E2BFF' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

/* Submit / action buttons */
.settings-form .submit-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #f0ecff;
}
.settings-form .submit-btn .btn {
    background: linear-gradient(135deg, #111827 0%, #1C1514 100%);
    color: #fff;
    border: none;
    padding: 11px 28px;
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(94, 43, 255, 0.35);
    font-family: var(--tg-body-font-family);
}
.settings-form .submit-btn .btn:hover {
    background: linear-gradient(135deg, #4a1fe6 0%, #6840f0 100%);
    box-shadow: 0 6px 20px rgba(94, 43, 255, 0.45);
    transform: translateY(-1px);
    color: #fff;
}
.settings-form .submit-btn .btn-two {
    background: transparent;
    color: #e11b24;
    border: 1.5px solid #e11b24;
    box-shadow: none;
}
.settings-form .submit-btn .btn-two:hover {
    background: #e11b24;
    color: #fff;
    box-shadow: 0 4px 12px rgba(225, 27, 36, 0.3);
}

/* Row spacing */
.settings-form .row > [class*="col-"] {
    margin-bottom: 0;
}

/* Social input groups */
.social-input-wrap {
    position: relative;
}
.social-input-wrap .social-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    color: #fff;
    z-index: 1;
}
.social-input-wrap .social-icon.facebook { background: #1877f2; }
.social-input-wrap .social-icon.twitter  { background: #1da1f2; }
.social-input-wrap .social-icon.linkedin { background: #0a66c2; }
.social-input-wrap .social-icon.website  { background: #111827; }
.social-input-wrap .social-icon.github   { background: #24292e; }
.social-input-wrap input {
    padding-left: 46px !important;
}

/* Password strength indicator (cosmetic) */
.password-tips {
    
    border: 1px solid #ede9ff;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}
.password-tips h6 {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #2B0510;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.password-tips ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.password-tips ul li {
    font-size: var(--fs-xs);
    color: #6d6c80;
    display: flex;
    align-items: center;
    gap: 7px;
}
.password-tips ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #111827;
    flex-shrink: 0;
}

/* Mobile / Responsive */
@media (max-width: 768px) {
    .settings-card {
        flex-direction: column;
    }
    .settings-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 12px;
        border-right: none;
        border-bottom: 1px solid #ede9ff;
        gap: 6px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .settings-sidebar::-webkit-scrollbar { display: none; }
    .settings-sidebar .nav-item { flex-shrink: 0; }
    .settings-sidebar .nav-link {
        padding: 8px 14px;
        white-space: nowrap;
        border-radius: 8px;
    }
    .settings-sidebar .nav-link .nav-label { display: none; }
    .settings-sidebar .nav-link.active::after { display: none; }
    .settings-content { padding: 20px; }
    .settings-page-header { padding: 20px; }
}
@media (max-width: 480px) {
    .settings-sidebar .nav-link .nav-label { display: block; font-size: var(--fs-xs); }
}

/* ── course ── */
/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.ig-cr-hero {
    position: relative;
    background: linear-gradient(145deg, #1a0508 0%, #1C1514 60%, #1a0508 100%);
    padding: 44px 0 36px;
    overflow: hidden;
}
.ig-cr-hero::after {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 28px 28px; pointer-events: none;
}
.ig-cr-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.ig-cr-orb-1 { width:460px; height:460px; background:radial-gradient(circle,rgba(164,16,52,.28),transparent 65%); top:-160px; left:-80px; }
.ig-cr-orb-2 { width:340px; height:340px; background:radial-gradient(circle,rgba(164,16,52,.14),transparent 65%); bottom:-120px; right:-60px; }
.ig-cr-shine { position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(164,16,52,.55) 35%,rgba(164,16,52,.25) 65%,transparent); }
.ig-cr-inner { position: relative; z-index: 2; }

.ig-cr-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(164,16,52,.18); border:1px solid rgba(164,16,52,.38); border-radius:100px; padding:5px 14px; font-size: var(--fs-xs); font-weight:600; color:#FFFFFF; letter-spacing:.4px; margin-bottom:14px; }
.ig-cr-title { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:900; color:#fff; line-height:1.15; margin-bottom:8px; letter-spacing:-1px; }
.ig-cr-title span { background:#FFFFFF; background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:crGrad 6s linear infinite; }
@keyframes crGrad { 0%{background-position:0 center;} 100%{background-position:200% center;} }
.ig-cr-sub { font-size: var(--fs-sm); color:rgba(255,255,255,.52); margin-bottom:22px; line-height: var(--lh-normal); max-width:520px; }
.ig-cr-stats { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.ig-cr-stat { display:flex; align-items:center; gap:8px; }
.ig-cr-stat-val { font-size:1.3rem; font-weight:800; background:linear-gradient(90deg,#FFFFFF,#A41034); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.ig-cr-stat-lbl { font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,.40); }
.ig-cr-stat-div { width:1px; height:28px; background:rgba(255,255,255,.12); }

/* ═══════════════════════════════════════════
   SEARCH BAR
═══════════════════════════════════════════ */
.ig-cr-search-bar { background:#fff; border-bottom:1px solid #e5e7eb; padding:14px 0; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.ig-cr-search-form { display:flex; align-items:center; gap:0; background:#fafaf9; border:1.5px solid #FFFFFF; border-radius:12px; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.ig-cr-search-form:focus-within { border-color:#A41034; box-shadow:0 0 0 3px rgba(164,16,52,.08); }
.ig-cr-search-icon { padding:0 14px; color:#9ca3af; font-size: var(--fs-base); flex-shrink:0; }
.ig-cr-search-input { flex:1; padding:11px 0; border:none; background:transparent; font-size: var(--fs-sm); color:#111827; outline:none; }
.ig-cr-search-input::placeholder { color:#9ca3af; }
.ig-cr-search-btn { padding:10px 20px; background:#A41034; color:#fff; border:none; font-size: var(--fs-sm); font-weight:600; cursor:pointer; transition:opacity .2s; white-space:nowrap; }
.ig-cr-search-btn:hover { opacity:.9; }

/* ═══════════════════════════════════════════
   PAGE BODY
═══════════════════════════════════════════ */
.ig-cr-body {   padding:32px 0 64px; }

/* ═══════════════════════════════════════════
   SIDEBAR FILTERS
═══════════════════════════════════════════ */
.ig-cr-sidebar { position: sticky; top: 80px; }
.ig-cr-filter-card {  border-radius:16px; box-shadow:0 2px 16px rgba(0,0,0,.06); overflow:hidden; }
.ig-cr-filter-header { padding:16px 20px; border-bottom:1px solid #f3f4f6; display:flex; align-items:center; justify-content:space-between; }
.ig-cr-filter-title { font-size: var(--fs-sm); font-weight:700; color:#1C1514; display:flex; align-items:center; gap:8px; }
.ig-cr-filter-title i { color:#A41034; font-size: var(--fs-sm); }
.ig-cr-clear-all { font-size: var(--fs-xs); color:#A41034; font-weight:600; cursor:pointer; text-decoration:none; background:none; border:none; padding:0; }
.ig-cr-clear-all:hover { text-decoration:underline; color:#A41034; }

.ig-cr-widget { padding:18px 20px; border-bottom:1px solid #f0eced; }
.ig-cr-widget:last-child { border-bottom:none; }
.ig-cr-widget-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ig-cr-widget-label { font-size: var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.9px; color:#6b7280; }
.ig-cr-clear-btn { font-size: var(--fs-xs); color:#A41034; cursor:pointer; font-weight:600; background:none; border:none; padding:0; display:none; }
.ig-cr-clear-btn:hover { text-decoration:underline; }

/* custom checkboxes & radios */
.ig-cr-check { display:flex; align-items:center; gap:10px; padding:4px 0; cursor:pointer; }
.ig-cr-check input[type=checkbox],
.ig-cr-check input[type=radio] { display:none; }
.ig-cr-check-box {
    width:17px; height:17px; border-radius:5px;
    border:1.5px solid #d1d5db; background:#fff;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all .15s;
}
.ig-cr-check input:checked ~ .ig-cr-check-box { background:#A41034; border-color:#A41034; }
.ig-cr-check input:checked ~ .ig-cr-check-box::after { content:'✓'; color:#fff; font-size:10px; font-weight:700; line-height:1; }

.ig-cr-radio-dot {
    width:17px; height:17px; border-radius:50%;
    border:1.5px solid #d1d5db; background:#fff;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all .15s;
}
.ig-cr-check input:checked ~ .ig-cr-radio-dot { border-color:#A41034; }
.ig-cr-check input:checked ~ .ig-cr-radio-dot::after { content:''; width:8px; height:8px; border-radius:50%; background:#A41034; display:block; }

.ig-cr-check-label { font-size: var(--fs-sm); color:#374151; line-height:1; transition:color .15s; }
.ig-cr-check:hover .ig-cr-check-label { color:#A41034; }
.ig-cr-check input:checked ~ .ig-cr-check-label { color:#A41034; font-weight:600; }

/* star rating filter */
.ig-cr-stars { display:flex; align-items:center; gap:3px; }
.ig-cr-stars i { color:#f59e0b; font-size: var(--fs-xs); }
.ig-cr-stars i.empty { color:#e5e7eb; }
.ig-cr-rating-text { font-size: var(--fs-xs); color:#6b7280; margin-left:4px; }

/* sub-category section */
.sub-category-holder .ig-cr-widget { border-top:1px solid #f0eced; }

/* ═══════════════════════════════════════════
   MAIN CONTENT AREA
═══════════════════════════════════════════ */
.ig-cr-topbar {
    background:#fff; border-radius:12px; padding:14px 20px;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:12px; margin-bottom:20px;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.ig-cr-count { font-size: var(--fs-sm); color:#6b7280; }
.ig-cr-count strong { color:#1C1514; font-weight:700; }
.ig-cr-sort { display:flex; align-items:center; gap:10px; }
.ig-cr-sort-label { font-size: var(--fs-sm); color:#6b7280; font-weight:500; white-space:nowrap; }
.ig-cr-sort select.orderby {
    padding:8px 14px; border:1.5px solid #e5e7eb; border-radius:9px;
    font-size: var(--fs-sm); color:#374151; background:#fff; outline:none;
    cursor:pointer; transition:border-color .2s;
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A41034' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center;
    padding-right:30px; min-width:170px;
}
.ig-cr-sort select.orderby:focus { border-color:#A41034; box-shadow:0 0 0 3px rgba(164,16,52,.08); }

/* preloader */
.preloader-two { display:flex; align-items:center; justify-content:center; padding:60px 0; }
.preloader-two .loader-icon-two img { width:48px; height:48px; animation:spin 1s linear infinite; }
@keyframes spin { 100%{ transform:rotate(360deg); } }

/* empty state */
.ig-cr-empty { text-align:center; padding:60px 20px; }
.ig-cr-empty-icon { width:72px; height:72px; border-radius:50%; background:rgba(164,16,52,.08); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size: var(--fs-3xl); color:#A41034; }
.ig-cr-empty h5 { font-size:1.1rem; font-weight:700; color:#1C1514; margin-bottom:6px; }
.ig-cr-empty p { font-size: var(--fs-sm); color:#6b7280; }

/* ═══════════════════════════════════════════
   COURSE CARD
═══════════════════════════════════════════ */
.ig-course-card {
    background:#fff; border-radius:16px; overflow:hidden;
    box-shadow:0 2px 14px rgba(0,0,0,.07); height:100%;
    display:flex; flex-direction:column;
    transition:transform .22s, box-shadow .22s;
    border:1px solid rgba(164,16,52,.06);
}
.ig-course-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.12); }

.ig-cc-thumb { position:relative; overflow:hidden; aspect-ratio:16/9; flex-shrink:0; }
.ig-cc-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.ig-course-card:hover .ig-cc-thumb img { transform:scale(1.04); }
.ig-cc-overlay {
    position:absolute; inset:0; background:rgba(10,6,40,.55);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .25s;
}
.ig-course-card:hover .ig-cc-overlay { opacity:1; }
.ig-cc-view-btn { display:flex; align-items:center; gap:8px; padding:10px 20px; background:#fff; color:#A41034; border-radius:100px; font-size: var(--fs-sm); font-weight:700; text-decoration:none; transition:background .2s; }
.ig-cc-view-btn:hover { background:#FBEEF0; color:#A41034; text-decoration:none; }

.ig-cc-badge-row { position:absolute; top:10px; left:10px; display:flex; gap:6px; }
.ig-cc-badge { padding:3px 9px; border-radius:6px; font-size:10.5px; font-weight:700; letter-spacing:.3px; }
.ig-cc-badge.free    { background:#dcfce7; color:#166534; }
.ig-cc-badge.paid    { background:#FBEEF0; color:#A41034; }
.ig-cc-badge.cert    { background:#fef3c7; color:#92400e; }
.ig-cc-badge.new     { background:linear-gradient(135deg,#A41034,#2563eb); color:#fff; }

.ig-cc-body { padding:16px 18px; flex:1; display:flex; flex-direction:column; }
.ig-cc-cat { font-size: var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.7px; color:#A41034; margin-bottom:6px; }
.ig-cc-title { font-size: var(--fs-sm); font-weight:700; color:#0f0c29; line-height: var(--lh-snug); margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ig-cc-title a { color:inherit; text-decoration:none; }
.ig-cc-title a:hover { color:#A41034; }

.ig-cc-meta { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.ig-cc-rating { display:flex; align-items:center; gap:4px; font-size: var(--fs-xs); font-weight:700; color:#f59e0b; }
.ig-cc-rating span { color:#6b7280; font-weight:400; }
.ig-cc-dur { display:flex; align-items:center; gap:4px; font-size: var(--fs-xs); color:#9ca3af; }
.ig-cc-dur i { font-size: var(--fs-xs); }
.ig-cc-level { display:flex; align-items:center; gap:4px; font-size: var(--fs-xs); color:#9ca3af; }
.ig-cc-level i { font-size:10px; color:#FFFFFF; }

.ig-cc-instructor { display:flex; align-items:center; gap:7px; margin-bottom:12px; }
.ig-cc-inst-avatar { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#A41034,#2563eb); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; flex-shrink:0; }
.ig-cc-inst-name { font-size:12.5px; color:#6b7280; }
.ig-cc-inst-name a { color:inherit; text-decoration:none; }
.ig-cc-inst-name a:hover { color:#A41034; }

.ig-cc-footer { margin-top:auto; padding-top:12px; border-top:1px solid #f3f4f6; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ig-cc-price-wrap { display:flex; align-items:baseline; gap:6px; }
.ig-cc-price { font-size:1.15rem; font-weight:800; color:#0f0c29; }
.ig-cc-price.free { color:#16a34a; }
.ig-cc-price-orig { font-size: var(--fs-xs); color:#9ca3af; text-decoration:line-through; }

.ig-cc-cart-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; background:linear-gradient(135deg,#A41034,#2563eb);
    color:#fff; border-radius:8px; font-size:12.5px; font-weight:600;
    cursor:pointer; border:none; text-decoration:none;
    transition:opacity .2s, transform .2s; white-space:nowrap;
}
.ig-cc-cart-btn:hover { opacity:.88; transform:translateY(-1px); color:#fff; text-decoration:none; }
.ig-cc-enrolled-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; background:#dcfce7; color:#166534;
    border-radius:8px; font-size:12.5px; font-weight:600;
    text-decoration:none; white-space:nowrap;
}
.ig-cc-enrolled-btn:hover { background:#bbf7d0; color:#166534; text-decoration:none; }
.ig-cc-booked-btn {
    padding:8px 14px; background:#f3f4f6; color:#9ca3af;
    border-radius:8px; font-size:12.5px; font-weight:600; white-space:nowrap;
}

/* ═══════════════════════════════════════════
   ENROLL COUNT + INSTRUCTOR IMG
═══════════════════════════════════════════ */
.ig-cc-enroll-count { font-size: var(--fs-xs); color:#9ca3af; display:flex; align-items:center; gap:5px; margin-bottom:8px; }
.ig-cc-enroll-count i { font-size: var(--fs-xs); color:#FFFFFF; }
.ig-cc-inst-img { width:24px; height:24px; border-radius:50%; object-fit:cover; flex-shrink:0; }

/* ═══════════════════════════════════════════
   SOCIAL SHARE ON CARD
═══════════════════════════════════════════ */
.ig-cc-share-wrap { position:absolute; top:10px; right:10px; z-index:5; }
.ig-cc-share-btn {
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.92); border:none;
    display:flex; align-items:center; justify-content:center;
    font-size: var(--fs-sm); color:#374151; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    transition:background .18s, color .18s;
    backdrop-filter:blur(6px);
}
.ig-cc-share-btn:hover { background:#fff; color:#A41034; }
.ig-cc-share-dropdown {
    position:absolute; top:38px; right:0;
    background:#fff; border-radius:12px;
    box-shadow:0 8px 28px rgba(0,0,0,.18);
    padding:8px;
    display:flex; flex-direction:column; gap:4px;
    opacity:0; visibility:hidden; transform:translateY(-6px) scale(.96);
    transition:all .18s; z-index:20; min-width:42px; align-items:center;
    border:1px solid #f0ebff;
}
.ig-cc-share-wrap:hover .ig-cc-share-dropdown,
.ig-cc-share-wrap.open .ig-cc-share-dropdown { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.ig-cc-share-link {
    width:32px; height:32px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size: var(--fs-sm); text-decoration:none; border:none;
    cursor:pointer; transition:all .15s;
}
.ig-share-fb { background:#e8f0fe; color:#1877f2; }  .ig-share-fb:hover  { background:#1877f2; color:#fff; }
.ig-share-tw { background:#e8f5fe; color:#000; }     .ig-share-tw:hover  { background:#000; color:#fff; }
.ig-share-li { background:#e8f0fe; color:#0a66c2; }  .ig-share-li:hover  { background:#0a66c2; color:#fff; }
.ig-share-wa { background:#e8fde8; color:#25d366; }  .ig-share-wa:hover  { background:#25d366; color:#fff; }
.ig-share-copy { background:#f9f9f9; color:#374151; } .ig-share-copy:hover { background:#A41034; color:#fff; }

/* ═══════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════ */
.pagination-wrap { margin-top:32px; }
.pagination { display:flex; align-items:center; justify-content:center; gap:6px; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.pagination .page-item .page-link {
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:9px;
    background:#fff; border:1.5px solid #e5e7eb;
    color:#374151; font-size: var(--fs-sm); font-weight:600;
    text-decoration:none; transition:all .15s;
}
.pagination .page-item.active .page-link { background:linear-gradient(135deg,#A41034,#2563eb); border-color:transparent; color:#fff; }
.pagination .page-item .page-link:hover:not(.active) { border-color:#A41034; color:#A41034; }
.pagination .page-item.disabled .page-link,.pagination .page-item.disabled span { background:#f9fafb; color:#d1d5db; cursor:not-allowed; }
.pagination .disabled span { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; border:1.5px solid #e5e7eb; font-size: var(--fs-sm); color:#d1d5db; }
.pagination .page-dots span { border:none; background:none; color:#9ca3af; }

@media(max-width:991px) {
    .ig-cr-sidebar { position:static; margin-bottom:20px; }
    .ig-cr-filter-card { max-height:none; }
}
@media(max-width:575px) {
    .ig-cr-hero { padding:32px 0 28px; }
    .ig-cr-topbar { flex-direction:column; align-items:flex-start; }
}

/* ── blog ── */
/* ================================================================
   BLOG LISTING PAGE  (bpl-*)
================================================================ */

/* ── Hero ──────────────────────────────────────────────────────── */
.bpl-hero {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 55%, #1a1040 100%);
    padding: 64px 0 56px;
    position: relative;
    overflow: hidden;
}
.bpl-hero::before {
    content: '';
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    top: -120px; left: -80px;
    background: radial-gradient(circle, rgba(164,16,52,.5) 0%, transparent 68%);
    pointer-events: none;
}
.bpl-hero::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    bottom: -80px; right: 5%;
    background: radial-gradient(circle, rgba(37,99,235,.4) 0%, transparent 68%);
    pointer-events: none;
}
.bpl-hero__inner { position: relative; z-index: 2; text-align: center; }

.bpl-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(255,255,255,.5);
    margin-bottom: 20px;
}
.bpl-breadcrumb a { color: #FFFFFF; text-decoration: none; transition: color .2s; }
.bpl-breadcrumb a:hover { color: #fff; }
.bpl-breadcrumb i { font-size: 9px; }

.bpl-hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.15;
}
.bpl-hero__title span {
    background: linear-gradient(90deg, #FFFFFF, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bpl-hero__sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,.55);
    max-width: 540px;
    margin: 0 auto 32px;
    line-height: var(--lh-normal);
}

/* Search bar */
.bpl-hero__search {
    max-width: 580px;
    margin: 0 auto 32px;
    display: flex;
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.18);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: border-color .2s, box-shadow .2s;
}
.bpl-hero__search:focus-within {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(164,16,52,.2);
}
.bpl-hero__search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 14px 20px;
    font-size: var(--fs-base);
    color: #fff;
    font-family: var(--tg-body-font-family);
}
.bpl-hero__search input::placeholder { color: rgba(255,255,255,.4); }
.bpl-hero__search button {
    flex-shrink: 0;
    background: var(--tg-theme-primary);
    border: none;
    color: #fff;
    padding: 0 24px;
    font-size: var(--fs-base);
    cursor: pointer;
    transition: background .2s;
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}
.bpl-hero__search button:hover { background: #A41034; }

/* Category filter pills */
.bpl-hero__cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.bpl-hero__cat {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1.5px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(4px);
}
.bpl-hero__cat:hover,
.bpl-hero__cat.active {
    background: var(--tg-theme-primary);
    border-color: var(--tg-theme-primary);
    color: #fff;
    text-decoration: none;
}

/* ── Page body ─────────────────────────────────────────────────── */
.bpl-body {
    background: #f4f5f7;
    padding: 44px 0 72px;
}

/* ── Active filter bar ─────────────────────────────────────────── */
.bpl-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #FBEEF0;
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 24px;
    font-size: var(--fs-sm);
    color: #6b7280;
    box-shadow: 0 2px 8px rgba(164,16,52,.06);
}
.bpl-filter-bar strong { color: #7A0D27; }
.bpl-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: #A41034;
    border: 1.5px solid #F6D9DF;
    border-radius: 20px;
    padding: 4px 12px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.bpl-filter-clear:hover { background: #A41034; color: #fff; border-color: transparent; text-decoration: none; }

/* ── Featured post ─────────────────────────────────────────────── */
.bpl-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    margin-bottom: 32px;
    text-decoration: none;
    transition: box-shadow .28s, transform .28s;
}
.bpl-featured:hover {
    box-shadow: 0 12px 40px rgba(164,16,52,.16);
    transform: translateY(-4px);
    text-decoration: none;
}
.bpl-featured__media {
    position: relative;
    overflow: hidden;
    min-height: 300px;
}
.bpl-featured__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.bpl-featured:hover .bpl-featured__media img { transform: scale(1.04); }
.bpl-featured__badge {
    position: absolute;
    top: 16px; left: 16px;
    background: linear-gradient(90deg, #A41034, #2563eb);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 5px 13px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.bpl-featured__cat-badge {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: background .2s;
}
.bpl-featured__body {
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
}
.bpl-featured__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    color: #9ca3af;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.bpl-featured__meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.bpl-featured__meta-item i { color: #A41034; font-size: var(--fs-xs); }
.bpl-featured__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
    line-height: var(--lh-snug);
    margin: 0 0 14px;
}
.bpl-featured__excerpt {
    font-size: var(--fs-sm);
    color: #6b7280;
    line-height: var(--lh-relaxed);
    margin: 0 0 22px;
    flex: 1;
}
.bpl-featured__author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.bpl-featured__author-img {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0ebff;
}
.bpl-featured__author-name { font-size: var(--fs-sm); font-weight: 600; color: #374151; }
.bpl-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tg-theme-primary);
    color: #fff;
    border-radius: 10px;
    padding: 11px 22px;
    font-size: var(--fs-sm);
    font-weight: 600;
    align-self: flex-start;
    transition: background .2s, transform .15s;
}
.bpl-featured:hover .bpl-featured__cta { background: #A41034; transform: translateX(3px); }

@media (max-width: 767px) {
    .bpl-featured { grid-template-columns: 1fr; }
    .bpl-featured__media { min-height: 220px; }
    .bpl-featured__body { padding: 22px 20px; }
    .bpl-featured__title { font-size: 1.2rem; }
}

/* ── Blog Grid ─────────────────────────────────────────────────── */
.bpl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 36px;
}
@media (max-width: 1199px) { .bpl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .bpl-grid { grid-template-columns: 1fr; } }

/* ── Blog Card ─────────────────────────────────────────────────── */
.bpl-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    transition: box-shadow .26s, transform .26s;
    text-decoration: none;
}
.bpl-card:hover {
    box-shadow: 0 12px 36px rgba(164,16,52,.13);
    transform: translateY(-5px);
    text-decoration: none;
}
.bpl-card__media {
    position: relative;
    height: 190px;
    overflow: hidden;
    flex-shrink: 0;
}
.bpl-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.bpl-card:hover .bpl-card__media img { transform: scale(1.07); }
.bpl-card__cat {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--tg-theme-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 11px;
    border-radius: 20px;
    text-decoration: none;
    transition: opacity .2s;
    z-index: 1;
}
.bpl-card__cat:hover { opacity: .85; }
.bpl-card__readtime {
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(5px);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bpl-card__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.bpl-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    color: #9ca3af;
    margin-bottom: 10px;
}
.bpl-card__meta i { color: #FFFFFF; }
.bpl-card__title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: #111827;
    line-height: 1.45;
    margin: 0 0 10px;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bpl-card:hover .bpl-card__title { color: #A41034; }
.bpl-card__excerpt {
    font-size: var(--fs-sm);
    color: #6b7280;
    line-height: var(--lh-normal);
    margin: 0 0 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bpl-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f3f4f6;
}
.bpl-card__author {
    display: flex;
    align-items: center;
    gap: 7px;
}
.bpl-card__author-img {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0ebff;
}
.bpl-card__author-name {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #4b5563;
}
.bpl-card__cta {
    font-size: 12.5px;
    font-weight: 700;
    color: #A41034;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap .2s;
}
.bpl-card:hover .bpl-card__cta { gap: 9px; }

/* ── Empty state ───────────────────────────────────────────────── */
.bpl-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 24px;
    color: #9ca3af;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.bpl-empty__icon {
    font-size: 3rem;
    color: #FFFFFF;
    margin-bottom: 16px;
    display: block;
}
.bpl-empty__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #374151;
    margin: 0 0 6px;
}
.bpl-empty__sub { font-size: var(--fs-sm); margin: 0 0 20px; }
.bpl-empty__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #A41034;
    color: #fff;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.bpl-empty__link:hover { background: #A41034; text-decoration: none; color: #fff; }

/* ── Sidebar ───────────────────────────────────────────────────── */
.bpl-sidebar {
    position: sticky;
    top: 94px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (max-width: 991px) { .bpl-sidebar { position: static; margin-top: 32px; } }

.bpl-widget {
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    border: 1px solid #FBEEF0;
}
.bpl-widget__title {
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #374151;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f3f4f6;
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
}
.bpl-widget__title::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 28px; height: 2px;
    background: var(--tg-theme-primary);
    border-radius: 2px;
}
.bpl-widget__title i { color: #A41034; font-size: var(--fs-xs); }

/* Category list */
.bpl-cats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.bpl-cats li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: var(--fs-sm);
    color: #4b5563;
    text-decoration: none;
    transition: background .18s, color .18s;
    font-weight: 500;
}
.bpl-cats li a i { font-size: 9px; color: #FFFFFF; flex-shrink: 0; transition: transform .2s, color .2s; }
.bpl-cats li a:hover,
.bpl-cats li a.active { background: #FDF5F6; color: #A41034; text-decoration: none; }
.bpl-cats li a:hover i,
.bpl-cats li a.active i { transform: translateX(3px); color: #A41034; }

/* Popular posts — numbered */
.bpl-popular-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 11px 0;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
}
.bpl-popular-item:first-of-type { padding-top: 0; }
.bpl-popular-item:last-child { border-bottom: none; padding-bottom: 0; }
.bpl-popular-item__num {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: #FDF5F6;
    color: #A41034;
    font-size: var(--fs-xs);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: background .2s, color .2s;
}
.bpl-popular-item:nth-child(1) .bpl-popular-item__num { background: #A41034; color: #fff; }
.bpl-popular-item:nth-child(2) .bpl-popular-item__num { background: #F6D9DF; }
.bpl-popular-item:nth-child(3) .bpl-popular-item__num { background: #FBEEF0; }
.bpl-popular-item__thumb {
    flex-shrink: 0;
    width: 60px; height: 50px;
    border-radius: 9px;
    overflow: hidden;
}
.bpl-popular-item__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.bpl-popular-item:hover .bpl-popular-item__thumb img { transform: scale(1.08); }
.bpl-popular-item__info { flex: 1; min-width: 0; }
.bpl-popular-item__date {
    font-size: var(--fs-xs);
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.bpl-popular-item__date i { color: #FFFFFF; }
.bpl-popular-item__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #1e1b4b;
    line-height: var(--lh-snug);
    margin: 0;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bpl-popular-item:hover .bpl-popular-item__title { color: #A41034; }
.bpl-popular-item:hover { text-decoration: none; }

/* Newsletter mini widget */
.bpl-nl-widget {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 4px 18px rgba(49,46,129,.25);
    text-align: center;
}
.bpl-nl-widget__icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(167,139,250,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: var(--fs-xl);
    color: #FFFFFF;
}
.bpl-nl-widget__title {
    font-size: var(--fs-base);
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
}
.bpl-nl-widget__sub {
    font-size: 12.5px;
    color: rgba(255,255,255,.55);
    line-height: 1.55;
    margin: 0 0 18px;
}
.bpl-nl-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.bpl-nl-form input {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    padding: 10px 14px;
    font-size: var(--fs-sm);
    color: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    font-family: var(--tg-body-font-family);
}
.bpl-nl-form input::placeholder { color: rgba(255,255,255,.4); }
.bpl-nl-form input:focus {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(167,139,250,.2);
}
.bpl-nl-form button {
    background: #A41034;
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 10px;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.bpl-nl-form button:hover { background: #A41034; }

/* ── contact ── */
/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.ig-ct-hero {
    position: relative;
    background: #A41034;
    padding: 60px 0 52px;
    overflow: hidden;
    }
.ig-ct-hero::after {
    content: ''; position: absolute; inset: 0;
    background-image: #A41034;
    background-size: 30px 30px; pointer-events: none;
}
.ig-ct-orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px); pointer-events: none;
}
.ig-ct-orb-1 { width:500px; height:500px; background:radial-gradient(circle,rgba(124,82,255,.22),transparent 65%); top:-180px; left:-100px; }
.ig-ct-orb-2 { width:380px; height:380px; background:radial-gradient(circle,rgba(37,99,235,.17),transparent 65%); bottom:-140px; right:-80px; }
.ig-ct-orb-3 { width:280px; height:280px; background:radial-gradient(circle,rgba(219,39,119,.12),transparent 65%); top:30%; right:15%; }
.ig-ct-shine { position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(124,82,255,.55) 35%,rgba(37,99,235,.55) 65%,transparent); }
.ig-ct-dots  { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1px); background-size:30px 30px; pointer-events:none; }

.ig-ct-hero-inner { position: relative; z-index: 2; }
.ig-ct-badge { display:inline-flex; align-items:center; gap:7px; background:#1C1514; border:1px solid rgba(124,82,255,.35); border-radius:100px; padding:5px 14px; font-size: var(--fs-xs); font-weight:600; color:#FFFFFF; letter-spacing:.4px; margin-bottom:16px; }
.ig-ct-title { font-size:clamp(2rem,4vw,2.8rem); font-weight:900; color:#fff; line-height:1.15; margin-bottom:10px; letter-spacing:-1px; }
.ig-ct-title span { background:#FFFFFF; background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:ctGrad 6s linear infinite; }
@keyframes ctGrad { 0%{background-position:0 center;} 100%{background-position:200% center;} }
.ig-ct-sub { font-size: var(--fs-base); color:rgba(255,255,255,.55); margin-bottom:28px; max-width:520px; line-height: var(--lh-relaxed); }
.ig-ct-breadcrumb { display:flex; align-items:center; gap:7px; font-size: var(--fs-sm); color:rgba(255,255,255,.40); flex-wrap:wrap; }
.ig-ct-breadcrumb a { color:rgba(255,255,255,.52); text-decoration:none; transition:color .2s; }
.ig-ct-breadcrumb a:hover { color:#FFFFFF; }
.ig-ct-breadcrumb i { font-size:8px; color:rgba(255,255,255,.22); }

/* Trust chips row */
.ig-ct-chips { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:24px; }
.ig-ct-chip { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); border-radius:100px; padding:7px 14px; font-size:12.5px; color:rgba(255,255,255,.70); }
.ig-ct-chip i { color:#FFFFFF; font-size: var(--fs-xs); }

/* ══════════════════════════════════════════════════
   MAIN BODY
══════════════════════════════════════════════════ */
.ig-ct-body { background: #f5f4fc; padding: 52px 0 64px; margin-left: -5vw !important;
    margin-right: -5vw !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important; }

/* ── Left info panel ── */
.ig-ct-info {
    background: #A41034;
    border-radius: 20px; padding: 36px 32px;
    height: 100%;
    position: relative; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.20);
}
.ig-ct-info::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size: 26px 26px; pointer-events: none;
}
.ig-ct-info-orb { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; }
.ig-ct-info-orb-1 { width:280px; height:280px; background:radial-gradient(circle,rgba(124,82,255,.25),transparent 65%); top:-80px; left:-60px; }
.ig-ct-info-orb-2 { width:200px; height:200px; background:radial-gradient(circle,rgba(37,99,235,.20),transparent 65%); bottom:-50px; right:-40px; }

.ig-ct-info-inner { position: relative; z-index: 1; }
.ig-ct-info-title { font-size:1.4rem; font-weight:800; color:#fff; margin-bottom:8px; line-height: var(--lh-tight); }
.ig-ct-info-sub { font-size: var(--fs-sm); color:rgba(255,255,255,.48); line-height: var(--lh-relaxed); margin-bottom:30px; }

/* info cards */
.ig-ct-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px; padding: 18px 20px;
    margin-bottom: 14px;
    display: flex; align-items: flex-start; gap: 14px;
    transition: background .2s;
}
.ig-ct-card:hover { background: rgba(255,255,255,.10); }
.ig-ct-card-icon {
    width: 42px; height: 42px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-md); flex-shrink: 0;
}
.ig-ct-card-icon.purple { background: rgba(124,82,255,.25); color: #FFFFFF; }
.ig-ct-card-icon.blue   { background: rgba(37,99,235,.25);  color: #93c5fd; }
.ig-ct-card-icon.teal   { background: rgba(8,145,178,.25);  color: #67e8f9; }
.ig-ct-card-icon.pink   { background: rgba(219,39,119,.25); color: #f9a8d4; }
.ig-ct-card-label { font-size: var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.9px; color:rgba(255,255,255,.38); margin-bottom:3px; }
.ig-ct-card-val { font-size: var(--fs-sm); color:rgba(255,255,255,.85); font-weight:500; line-height: var(--lh-normal); }
.ig-ct-card-val a { color:rgba(255,255,255,.85); text-decoration:none; transition:color .2s; }
.ig-ct-card-val a:hover { color:#FFFFFF; }

/* social row */
.ig-ct-social-row { margin-top: 24px; }
.ig-ct-social-label { font-size: var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.35); margin-bottom:12px; }
.ig-ct-socials { display:flex; gap:10px; flex-wrap:wrap; }
.ig-ct-soc-btn {
    width:38px; height:38px; border-radius:10px;
    background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.55); font-size: var(--fs-base); text-decoration:none;
    transition:all .2s;
}
.ig-ct-soc-btn:hover { background:rgba(124,82,255,.25); border-color:rgba(124,82,255,.4); color:#FFFFFF; text-decoration:none; }

/* response badge */
.ig-ct-response {
    margin-top: 24px;
    background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.25);
    border-radius: 10px; padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
}
.ig-ct-response i { color: #34d399; font-size: var(--fs-base); }
.ig-ct-response-text strong { display:block; font-size: var(--fs-sm); color:#fff; font-weight:600; }
.ig-ct-response-text span { font-size: var(--fs-xs); color:rgba(255,255,255,.45); }

/* ── Right form card ── */
.ig-ct-form-card {
    background: #fff; border-radius: 20px;
    box-shadow: 0 4px 28px rgba(0,0,0,.08), 0 0 0 1px rgba(124,82,255,.05);
    padding: 40px 44px;
    height: 100%;
}
.ig-ct-form-title { font-size:1.5rem; font-weight:800; color:#0f0c29; margin-bottom:6px; }
.ig-ct-form-sub { font-size: var(--fs-sm); color:#6b7280; margin-bottom:28px; }

/* form fields */
.ig-fg { margin-bottom: 16px; position: relative; }
.ig-label { display:block; font-size:12.5px; font-weight:600; color:#374151; margin-bottom:6px; }
.ig-label span { color:#ef4444; }
.ig-input, .ig-textarea {
    width:100%; padding:12px 15px;
    border:1.5px solid #e5e7eb; border-radius:10px;
    font-size: var(--fs-sm); color:#111827; background:#fafafa;
    outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
    box-sizing:border-box; font-family:inherit;
}
.ig-input:focus, .ig-textarea:focus {
    border-color:#1C1514 !important;
    box-shadow:0 0 0 3px rgba(124,82,255,.10) !important;
    background:#fff;
}
.ig-input.is-invalid, .ig-textarea.is-invalid { border-color:#ef4444 !important; background:#fff8f8; }
.ig-textarea { min-height:140px; resize:vertical; line-height: var(--lh-normal); }
.ig-ferr { display:block; font-size:11.5px; color:#ef4444; margin-top:4px; font-weight:500; min-height:15px; }
.ig-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* character counter */
.ig-msg-footer { display:flex; justify-content:flex-end; margin-top:4px; }
.ig-char-count { font-size:11.5px; color:#9ca3af; }
.ig-char-count.warn { color:#f97316; }
.ig-char-count.over { color:#ef4444; }

/* submit button */
.ig-ct-submit {
    width:100%; padding:14px;
    background: #1C1514; 
    color:#fff; border:none; border-radius:11px;
    font-size: var(--fs-base); font-weight:700; cursor:pointer;
    transition:opacity .2s, transform .2s, box-shadow .2s;
    box-shadow:0 6px 22px rgba(124,82,255,.38);
    margin-top:4px; letter-spacing:.3px;
    display:flex; align-items:center; justify-content:center; gap:9px;
}
.ig-ct-submit:hover:not(:disabled) { opacity:.9; transform:translateY(-2px); box-shadow:0 10px 30px rgba(124,82,255,.5); }
.ig-ct-submit:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* success / error alert */
.ig-ct-alert {
    display:none; padding:14px 18px; border-radius:10px;
    font-size: var(--fs-sm); font-weight:500; margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
}
.ig-ct-alert.success { background:#f0fdf4; border:1px solid #86efac; color:#166534; }
.ig-ct-alert.error   { background:#fef2f2; border:1px solid #fca5a5; color:#991b1b; }
.ig-ct-alert i { font-size: var(--fs-md); flex-shrink:0; }

/* ══════════════════════════════════════════════════
   MAP SECTION
══════════════════════════════════════════════════ */
.ig-ct-map-wrap { padding: 0 0 64px; background: #f5f4fc; }
.ig-ct-map-box {
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
    position: relative;
}
.ig-ct-map-box iframe { display:block; width:100%; height:420px; border:none; }
.ig-ct-map-overlay {
    position: absolute; top: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(180deg, #f5f4fc 0%, transparent 100%);
    pointer-events: none;
}

/* ══════════════════════════════════════════════════
   FAQ STRIP
══════════════════════════════════════════════════ */
.ig-ct-faq { background: #fff; padding: 52px 0; border-top: 1px solid #e5e7eb; }
.ig-ct-faq-title { font-size:1.5rem; font-weight:800; color:#0f0c29; text-align:center; margin-bottom:6px; }
.ig-ct-faq-sub { text-align:center; font-size: var(--fs-sm); color:#6b7280; margin-bottom:36px; }
.ig-ct-faq-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ig-ct-faq-item {
    background:#faf5ff; border:1px solid rgba(124,82,255,.10);
    border-radius:14px; padding:22px 20px;
    transition:box-shadow .2s, transform .2s;
}
.ig-ct-faq-item:hover { box-shadow:0 8px 24px rgba(124,82,255,.12); transform:translateY(-2px); }
.ig-ct-faq-icon { width:40px; height:40px; border-radius:10px; background:rgba(124,82,255,.12); color:#1C1514; display:flex; align-items:center; justify-content:center; font-size: var(--fs-md); margin-bottom:14px; }
.ig-ct-faq-q { font-size: var(--fs-sm); font-weight:700; color:#1e1b4b; margin-bottom:7px; line-height: var(--lh-snug); }
.ig-ct-faq-a { font-size: var(--fs-sm); color:#6b7280; line-height: var(--lh-normal); }

@media(max-width:991px) {
    .ig-ct-form-card { padding:28px 22px; }
    .ig-ct-faq-grid { grid-template-columns:1fr; }
    .ig-row-2 { grid-template-columns:1fr; }
    .ig-ct-info { margin-bottom: 24px; }
}
@media(max-width:575px) {
    .ig-ct-hero { padding:40px 0 36px; }
    .ig-ct-form-card { padding:22px 16px; }
    .ig-ct-faq-grid { grid-template-columns:1fr; }
}

/* ── cart ── */

/* ══════════════════════════════════════════
   CART PAGE — Professional White Theme
══════════════════════════════════════════ */
.cart-pg {
    background: #f4f6fb;
    min-height: 100vh;
    padding: 0 0 80px;
    font-family:"Plus Jakarta Sans", sans-serif;
}

/* ── Hero banner ── */
.cart-hero {
    background: #fff;
    border-bottom: 1px solid #eaecf4;
    padding: 32px 0;
    margin-bottom: 40px;
}
.cart-hero__inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}
.cart-hero__left { display: flex; align-items: center; gap: 16px; }
.cart-hero__icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, #A41034, #A41034);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.2rem;
    box-shadow: 0 6px 18px rgba(164,16,52,.35);
}
.cart-hero__title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.6rem; font-weight: 800; color: #1a1040; margin: 0;
}
.cart-hero__sub { color: #6b7280; font-size: .875rem; margin: 2px 0 0; }
.cart-hero__badge {
    background: linear-gradient(135deg, #A41034, #A41034);
    color: #fff; font-size: .72rem; font-weight: 700;
    padding: 5px 14px; border-radius: 100px; letter-spacing: .04em;
    box-shadow: 0 4px 12px rgba(164,16,52,.3);
}

/* ── Alert ── */
.cart-alert {
    background: #fef2f2; border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    border-radius: 12px; padding: 14px 18px;
    color: #991b1b; font-size: .875rem; margin-bottom: 20px;
    display: flex; align-items: flex-start; gap: 12px;
}
.cart-alert i { color: #ef4444; margin-top: 2px; flex-shrink: 0; }

/* ── Cart items card ── */
.cart-items-card {
    background: #fff; border-radius: 18px;
    border: 1px solid #eaecf4;
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
    overflow: hidden; margin-bottom: 20px;
}
.cart-items-header {
    padding: 18px 24px; border-bottom: 1px solid #f0f1f8;
    display: flex; align-items: center; justify-content: space-between;
}
.cart-items-header h6 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800; font-size: .95rem; color: #1a1040; margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.cart-items-header h6 i { color: #A41034; font-size: .85rem; }
.cart-items-header span { font-size: .8rem; color: #9ca3af; font-weight: 500; }

/* ── Table ── */
.cart-tbl { width: 100%; border-collapse: collapse; }
.cart-tbl thead th {
    padding: 12px 20px;
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: #9ca3af; background: #fafbff;
    border-bottom: 1px solid #f0f1f8;
    white-space: nowrap;
}
.cart-tbl tbody tr {
    border-bottom: 1px solid #f5f6fa;
    transition: background .15s;
}
.cart-tbl tbody tr:last-child { border-bottom: none; }
.cart-tbl tbody tr:hover { background: #fafbff; }
.cart-tbl td { padding: 18px 20px; vertical-align: middle; }

/* thumbnail */
.ct-img {
    width: 96px; height: 64px; border-radius: 10px;
    object-fit: cover; display: block;
    border: 1px solid #eaecf4;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: transform .2s;
}
.ct-img:hover { transform: scale(1.04); }

/* course name */
.ct-name-wrap { max-width: 360px; }
.ct-name {
    font-weight: 700; font-size: .9rem; color: #111827;
    line-height: var(--lh-snug); margin-bottom: 6px;
}
.ct-name a { color: inherit; text-decoration: none; }
.ct-name a:hover { color: #A41034; }
.ct-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* badges */
.ct-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 100px;
    font-size: .68rem; font-weight: 700; letter-spacing: .03em;
}
.ct-tag--course  { background: #f3f0ff; color: #A41034; }
.ct-tag--klip    { background: #eff6ff; color: #2563eb; }
.ct-tag--warn    { background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; }

/* price */
.ct-price {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem; font-weight: 900; color: #111827;
    white-space: nowrap;
}

/* remove */
.ct-del {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: #fef2f2; border: 1px solid #fecaca;
    color: #dc2626; font-size: .8rem;
    text-decoration: none; transition: all .2s;
}
.ct-del:hover { background: #fee2e2; border-color: #f87171; color: #b91c1c; }

/* ── Coupon bar ── */
.cart-coupon-bar {
    padding: 16px 20px;
    background: #fafbff; border-top: 1px solid #f0f1f8;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cart-coupon-bar__label {
    font-size: .78rem; font-weight: 600; color: #6b7280;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.cart-coupon-bar__label i { color: #A41034; }
.cart-coupon-bar input {
    flex: 1; min-width: 140px; height: 40px;
    padding: 0 14px; border: 1.5px solid #e2dff0;
    border-radius: 9px; font-size: .875rem; color: #1a1040;
    background: #fff; outline: none; transition: all .2s;
    font-family:"Plus Jakarta Sans", sans-serif;
}
.cart-coupon-bar input::placeholder { color: #FFFFFF; }
.cart-coupon-bar input:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.1);
}
.cart-coupon-bar button {
    height: 40px; padding: 0 20px; border-radius: 9px;
    background: linear-gradient(135deg, #A41034, #A41034);
    color: #fff; font-weight: 700; font-size: .82rem; border: none;
    cursor: pointer; transition: all .2s; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(164,16,52,.3);
}
.cart-coupon-bar button:hover {
    background: linear-gradient(135deg, #A41034, #7A0D27);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(164,16,52,.4);
}

/* ── Recommended / promo strip ── */
.cart-promo {
    background: #1C1514;
    border: 1px solid #1C1514; border-radius: 12px;
    padding: 14px 18px; display: flex; align-items: center; gap: 14px;
    font-size: .82rem; color: #7A0D27;
}
.cart-promo i { font-size: 1.1rem; color: #FFFFFF; flex-shrink: 0; }
.cart-promo strong { color: #FFFFFF; }

/* ══════════════════════════════════════════
   ORDER SUMMARY SIDEBAR
══════════════════════════════════════════ */
.order-summary {
    background: #fff; border-radius: 18px;
    border: 1px solid #eaecf4;
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
    overflow: hidden;
    position: sticky; top: 20px;
}

/* gradient top stripe */
.order-summary::before {
    content: ''; display: block;
    height: 3px;
    background: linear-gradient(90deg, #A41034 0%, #FFFFFF 50%, #A41034 100%);
}

.os-head {
    padding: 20px 22px 16px;
    border-bottom: 1px solid #f0f1f8;
}
.os-head h5 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800; font-size: 1rem; color: #1a1040; margin: 0 0 2px;
}
.os-head p { color: #9ca3af; font-size:1rem; margin: 0; }

.os-body { padding: 0 22px; }

.os-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 14px 0; border-bottom: 1px solid #f5f6fa;
    font-size: .88rem;
}
.os-row:last-of-type { border-bottom: none; }
.os-row__key { color: #6b7280; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.os-row__key i { font-size: .72rem; color: #FFFFFF; }
.os-row__val { font-weight: 700; color: #111827; text-align: right; }

/* discount row */
.os-coupon-detail {
    font-size: .72rem; color: #A41034; font-weight: 600;
    display: flex; align-items: center; gap: 4px; margin-top: 2px;
}
.os-coupon-detail a { color: #ef4444; text-decoration: none; margin-left: 4px; font-weight: 700; }
.os-coupon-detail a:hover { text-decoration: underline; }
.os-row__val--discount { color: #10b981 !important; }

/* divider */
.os-divider { height: 1px; background: #f0f1f8; margin: 0 0 0; }

/* total row */
.os-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 0 20px;
}
.os-total__key {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800; font-size: 1rem; color: #1a1040;
    display: flex; align-items: center; gap: 8px;
}
.os-total__val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.5rem; font-weight: 900; color: #A41034;
}

/* checkout btn */
.os-checkout-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 15px 20px; margin-bottom: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #A41034 0%, #A41034 100%);
    color: #fff !important; font-weight: 700; font-size: .95rem;
    text-decoration: none !important; border: none;
    box-shadow: 0 6px 20px rgba(164,16,52,.4);
    transition: all .25s cubic-bezier(.4,0,.2,1);
    letter-spacing: .01em;
}
.os-checkout-btn:hover {
    background: linear-gradient(135deg, #A41034, #7A0D27);
    box-shadow: 0 8px 28px rgba(164,16,52,.5);
    transform: translateY(-2px); color: #fff !important;
}
.os-checkout-btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(164,16,52,.3); }

.os-footer { padding: 0 22px 22px; }

.os-secure {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: .73rem; color: #9ca3af; margin-bottom: 14px;
}
.os-secure i { color: #10b981; }

.os-payment-icons {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.os-payment-icon {
    background: #f5f6fa; border: 1px solid #eaecf4;
    border-radius: 6px; padding: 5px 10px;
    font-size: .65rem; font-weight: 700; color: #6b7280;
    letter-spacing: .04em;
}

/* ══════════════════════════════════════════
   EMPTY CART
══════════════════════════════════════════ */
.cart-empty-wrap {
    display: flex; justify-content: center; align-items: center;
    min-height: 60vh; padding: 60px 20px;
}
.cart-empty {
    background: #fff; border-radius: 24px;
    border: 1px solid #eaecf4;
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.08);
    padding: 64px 48px; text-align: center; max-width: 500px; width: 100%;
}
.cart-empty__img-wrap {
    width: 120px; height: 120px; border-radius: 24px;
    background: #1C1514;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 6px 20px rgba(164,16,52,.15);
}
.cart-empty__img-wrap img { width: 80px; opacity: .85; }
.cart-empty__title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.45rem; font-weight: 800; color: #1a1040; margin-bottom: 8px;
}
.cart-empty__sub {
    color: #9ca3af; font-size: .875rem; line-height: var(--lh-normal);
    margin-bottom: 28px; max-width: 320px; margin-left: auto; margin-right: auto;
}
.cart-empty__btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 28px; border-radius: 12px;
    background: linear-gradient(135deg, #A41034, #A41034);
    color: #fff !important; font-weight: 700; font-size: .9rem;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(164,16,52,.4);
    transition: all .2s;
}
.cart-empty__btn:hover {
    background: linear-gradient(135deg, #A41034, #7A0D27);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(164,16,52,.5);
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .cart-tbl thead { display: none; }
    .cart-tbl tbody tr { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 0; }
    .cart-tbl td { padding: 0 20px; border: none; }
    .cart-hero__badge { display: none; }
}

/* ── dashboard ── */
/* ════════════════════════════════════════
   iGURUS ADMIN DASHBOARD
════════════════════════════════════════ */
.ig-dash { padding: 28px 8px 48px; background: transparent; min-height: 100vh; }

/* ── Page Header ── */
.ig-dash-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 28px;
}
.ig-dash-header__left h1 {
    font-size: 1.6rem; font-weight: 800; color: #e2d9ff; margin: 0 0 4px; letter-spacing: -.02em;
}
.ig-dash-header__left p { font-size: var(--fs-sm); color: #a89fc8; margin: 0; }
.ig-dash-header__actions { display: flex; gap: 10px; }
.ig-dash-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 9px; font-size: var(--fs-sm); font-weight: 600;
    text-decoration: none; border: none; cursor: pointer; transition: all .2s;
}
.ig-dash-btn--primary {
    background: #A41034;
    color: #fff; box-shadow: 0 4px 14px rgba(164,16,52,.3);
}
.ig-dash-btn--primary:hover { opacity: .88; transform: translateY(-1px); color: #fff; text-decoration: none; }
.ig-dash-btn--outline {
    background: #fff; color: #4b3faa;
    border: 1.5px solid #F6D9DF;
}
.ig-dash-btn--outline:hover { border-color: #A41034; background: #FDF5F6; color: #A41034; text-decoration: none; }

/* ── Alerts ── */
.ig-dash-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px; border-radius: 12px; margin-bottom: 18px;
    font-size: var(--fs-sm); font-weight: 500;
}
.ig-dash-alert--danger { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.ig-dash-alert--warning { background: #fffbeb; border: 1px solid #fde68a; color: #d97706; }
.ig-dash-alert i { margin-top: 1px; flex-shrink: 0; }
.ig-dash-alert-close { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; opacity: .6; font-size: var(--fs-md); }
.ig-dash-alert-close:hover { opacity: 1; }

/* ── Stat Cards ── */
.ig-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}
.ig-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px 22px 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    transition: transform .2s, box-shadow .2s;
}
.ig-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.10); }
.ig-stat-card__bg {
    position: absolute; top: -20px; right: -20px;
    width: 100px; height: 100px; border-radius: 50%;
    opacity: .07;
}
.ig-stat-card__icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-lg); margin-bottom: 16px; flex-shrink: 0;
}
.ig-stat-card__value {
    font-size: 1.7rem; font-weight: 800; color: #1e1b4b;
    line-height: 1; margin-bottom: 5px; letter-spacing: -.03em;
}
.ig-stat-card__label {
    font-size: var(--fs-xs); font-weight: 600; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .06em;
}
.ig-stat-card__accent {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; border-radius: 0 0 16px 16px;
}

/* Color tokens */
.ig-c-purple { color: #A41034; background: rgba(164,16,52,.12); }
.ig-c-blue   { color: #2563eb; background: rgba(37,99,235,.12); }
.ig-c-green  { color: #059669; background: rgba(5,150,105,.12); }
.ig-c-orange { color: #d97706; background: rgba(217,119,6,.12); }
.ig-c-pink   { color: #db2777; background: rgba(219,39,119,.12); }
.ig-c-teal   { color: #0891b2; background: rgba(8,145,178,.12); }
.ig-c-indigo { color: #4f46e5; background: rgba(79,70,229,.12); }
.ig-c-rose   { color: #e11d48; background: rgba(225,29,72,.12); }

.ig-bg-purple { background: #A41034; }
.ig-bg-blue   { background: #2563eb; }
.ig-bg-green  { background: #059669; }
.ig-bg-orange { background: #d97706; }
.ig-bg-pink   { background: #db2777; }
.ig-bg-teal   { background: #0891b2; }
.ig-bg-indigo { background: #4f46e5; }
.ig-bg-rose   { background: #e11d48; }

/* ── Chart Card ── */
.ig-chart-card {
    background: #fff; border-radius: 16px;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    margin-bottom: 24px; overflow: hidden;
}
.ig-chart-card__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid #f3f4f6;
    flex-wrap: wrap; gap: 12px;
}
.ig-chart-card__title {
    font-size: var(--fs-base); font-weight: 700; color: #1e1b4b; margin: 0;
    display: flex; align-items: center; gap: 9px;
}
.ig-chart-card__title i {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg,#A41034,#2563eb);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: var(--fs-sm);
}
.ig-chart-card__selects { display: flex; gap: 10px; }
.ig-chart-select {
    padding: 7px 12px; border: 1.5px solid #e5e7eb; border-radius: 8px;
    font-size: var(--fs-sm); color: #374151; background: #fff; outline: none;
    cursor: pointer; transition: border-color .2s;
}
.ig-chart-select:focus { border-color: #A41034; }
.ig-chart-card__body { padding: 24px; }
.ig-chart-area { position: relative; height: 300px; }

/* ── Recent Items ── */
.ig-recent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.ig-recent-card {
    background: #fff; border-radius: 16px;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    overflow: hidden;
}
.ig-recent-card__header {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px; border-bottom: 1px solid #f3f4f6;
}
.ig-recent-card__icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-base); flex-shrink: 0;
}
.ig-recent-card__title { font-size: var(--fs-sm); font-weight: 700; color: #1e1b4b; margin: 0 0 2px; }
.ig-recent-card__sub { font-size: var(--fs-xs); color: #9ca3af; margin: 0; }
.ig-recent-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 20px; border-bottom: 1px solid #f9fafb;
    text-decoration: none; transition: background .15s;
}
.ig-recent-item:last-child { border-bottom: none; }
.ig-recent-item:hover { background: #f9fafb; text-decoration: none; }
.ig-recent-item__avatar {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, #FBEEF0, #dbeafe);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); font-weight: 700; color: #A41034; flex-shrink: 0;
}
.ig-recent-item__body { flex: 1; min-width: 0; }
.ig-recent-item__title {
    font-size: var(--fs-sm); font-weight: 600; color: #1e1b4b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin: 0 0 3px; display: block;
}
.ig-recent-item__meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ig-recent-item__author { font-size: 11.5px; color: #9ca3af; }
.ig-recent-item__dot { width: 3px; height: 3px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; }
.ig-recent-item__time { font-size: var(--fs-xs); color: #FFFFFF; font-weight: 500; }
.ig-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600;
}
.ig-badge--green  { background: #d1fae5; color: #059669; }
.ig-badge--orange { background: #fef3c7; color: #d97706; }
.ig-badge--blue   { background: #dbeafe; color: #2563eb; }
.ig-recent-card__viewall {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 20px; font-size: 12.5px; font-weight: 600;
    color: #A41034; text-decoration: none; border-top: 1px solid #f3f4f6;
    transition: background .15s;
}
.ig-recent-card__viewall:hover { background: #FDF5F6; text-decoration: none; color: #A41034; }

/* ── Responsive ── */
@media (max-width: 1199px) {
    .ig-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .ig-recent-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .ig-dash { padding: 14px 0 32px; }
    .ig-stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ig-recent-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .ig-stat-grid { grid-template-columns: 1fr; }
}

/* ── login ── */
/* ════════════════════════════════════════
   ADMIN LOGIN — Full-Screen Split Layout
════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }


/* ── LEFT: Form panel ── */
.al-left {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 64px;
    background: #fff;
    position: relative;
    overflow-y: auto;
}

/* Corner decoration */
.al-left::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 280px; height: 280px;
    background: radial-gradient(circle at 0 0, rgba(164,16,52,.06), transparent 70%);
    pointer-events: none;
}
.al-left::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 200px; height: 200px;
    background: radial-gradient(circle at 100% 100%, rgba(37,99,235,.05), transparent 70%);
    pointer-events: none;
}

.al-form-inner { width: 100%; max-width: 400px; margin: 0 auto; position: relative; z-index: 1; }

/* Logo */
.al-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; text-decoration: none; }
.al-logo img { max-height: 32px; object-fit: contain; }
.al-logo-text {
    font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.5px;
    background: #A41034;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Badge */
.al-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.2);
    border-radius: 100px; padding: 5px 14px;
    font-size: 11.5px; font-weight: 600; color: #A41034;
    margin-bottom: 22px; width: fit-content;
}

/* Headings */
.al-title { font-size: 2rem; font-weight: 800; color: #0f0c29; line-height: 1.15; margin: 0 0 8px; }
.al-sub   { font-size: var(--fs-sm); color: #6b7280; margin: 0 0 32px; }

/* Error */
.al-error {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: 10px;
    background: #fef2f2; border: 1px solid #fecaca;
    color: #dc2626; font-size: var(--fs-sm); margin-bottom: 20px;
}
.al-error i { margin-top: 1px; flex-shrink: 0; }

/* Fields */
.al-fg { margin-bottom: 18px; }
.al-label { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 6px; letter-spacing: .02em; }
.al-field-wrap { position: relative; }
.al-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: var(--fs-sm); pointer-events: none; }
.al-input {
    width: 100%; padding: 12px 14px 12px 40px;
    border: 1.5px solid #e5e7eb; border-radius: 11px;
    font-size: var(--fs-sm); color: #111827; background: #fafafa; outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.al-input:focus { border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.1); background: #fff; }

/* Password row */
.al-pw-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.al-forgot { font-size: 12.5px; color: #A41034; font-weight: 600; text-decoration: none; }
.al-forgot:hover { text-decoration: underline; }
.al-eye { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #9ca3af; font-size: var(--fs-sm); }
.al-eye:hover { color: #A41034; }
.al-input.has-eye { padding-right: 44px; }

/* Submit */
.al-submit {
    width: 100%; padding: 14px;
    background: linear-gradient(135deg, #A41034 0%, #2563eb 100%);
    color: #fff; border: none; border-radius: 11px;
    font-size: var(--fs-base); font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 22px rgba(164,16,52,.32);
    transition: opacity .2s, transform .2s, box-shadow .2s;
    letter-spacing: .3px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 8px;
}
.al-submit:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(164,16,52,.4); }
.al-submit:active { transform: translateY(0); }

/* Footer */
.al-foot { text-align: center; font-size: 12.5px; color: #9ca3af; margin-top: 22px; }
.al-foot a { color: #A41034; font-weight: 600; text-decoration: none; }
.al-foot a:hover { text-decoration: underline; }

/* Divider */
.al-divider { height: 1px; background: linear-gradient(90deg, transparent, #e5e7eb, transparent); margin: 28px 0; }

/* ── RIGHT: Dark branding panel ── */
.al-right {
    flex: 1;
    position: relative;
    background: #07041a;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 44px;
}

/* Animated gradient blobs */
.al-blob {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: .55;
    animation: alBlob 12s ease-in-out infinite alternate;
}
.al-blob-1 { width: 500px; height: 500px; background: radial-gradient(circle, #A41034, transparent 70%); top: -140px; left: -80px; }
.al-blob-2 { width: 400px; height: 400px; background: radial-gradient(circle, #2563eb, transparent 70%); bottom: -80px; right: -60px; animation-duration: 15s; animation-delay: -5s; }
.al-blob-3 { width: 280px; height: 280px; background: radial-gradient(circle, #db2777, transparent 70%); top: 50%; left: 40%; animation-duration: 10s; animation-delay: -3s; }
@keyframes alBlob { 0%{transform:translate(0,0) scale(1);} 60%{transform:translate(20px,-16px) scale(1.05);} 100%{transform:translate(-12px,20px) scale(.97);} }

/* Dot grid */
.al-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 34px 34px; pointer-events: none; }

/* Top shine */
.al-shine { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 65%; height: 1px; background: linear-gradient(90deg, transparent, rgba(167,139,250,.55), transparent); }

.al-brand-inner { position: relative; z-index: 1; text-align: center; max-width: 400px; width: 100%; }

/* Wordmark */
.al-wordmark {
    font-size: 2.8rem; font-weight: 900; letter-spacing: -2px;
    background: linear-gradient(100deg, #FFFFFF 0%, #60a5fa 50%, #f472b6 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: alGrad 6s linear infinite; display: block; margin-bottom: 8px;
}
@keyframes alGrad { 0%{background-position:0 center;} 100%{background-position:200% center;} }

.al-brand-sub { font-size: var(--fs-sm); color: rgba(255,255,255,.42); margin-bottom: 36px; letter-spacing: .3px; }

/* Stats row */
.al-stats { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 36px; }
.al-stat { display: flex; flex-direction: column; align-items: center; padding: 0 18px; }
.al-stat strong {
    font-size: 1.35rem; font-weight: 900; line-height: 1;
    background: linear-gradient(90deg, #FFFFFF, #60a5fa);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    display: block; margin-bottom: 3px;
}
.al-stat span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.35); }
.al-vdiv { width: 1px; height: 26px; background: rgba(255,255,255,.12); }

/* Feature cards */
.al-features { list-style: none; padding: 0; margin: 0; text-align: left; }
.al-features li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 12px;
    background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08);
    margin-bottom: 10px; font-size: var(--fs-sm); color: rgba(255,255,255,.82); font-weight: 500;
    transition: background .2s;
}
.al-features li:hover { background: rgba(164,16,52,.18); }
.al-feat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); flex-shrink: 0; }
.al-features li:nth-child(1) .al-feat-icon { background: rgba(164,16,52,.25); color: #FFFFFF; }
.al-features li:nth-child(2) .al-feat-icon { background: rgba(37,99,235,.25); color: #93c5fd; }
.al-features li:nth-child(3) .al-feat-icon { background: rgba(8,145,178,.25); color: #67e8f9; }
.al-features li:nth-child(4) .al-feat-icon { background: rgba(16,185,129,.25); color: #6ee7b7; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .al-right { display: none; }
    .al-left  { flex: none; max-width: 100%; padding: 44px 28px; }
}
@media (max-width: 480px) {
    .al-left { padding: 36px 20px; }
    .al-title { font-size: 1.7rem; }
}

/* ── frontend/instructor-dashboard/course / create ── */

/* ── Global Context Theme Anchors ── */
:root {
    --brand-primary: #A41034;
    --brand-dark-base: #130330;
    --brand-faint-glow: rgba(164,16,52, 0.06);
    --brand-soft-line: rgba(164,16,52, 0.15);
    
    --accent-glow: #A41034;
    --accent-warn: #f59e0b;
    --accent-error: #ef4444;
    --accent-success: #10b981;
    
    --text-slate-dark: #1e1240;
    --text-slate-muted: #6b7280;
}

.cc { font-family:"Plus Jakarta Sans", sans-serif; }

/* ── Page Header Structure ── */
.cc-header { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.cc-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.75rem; font-weight: 800; color: var(--brand-primary); margin: 0;
    display: flex; align-items: center; gap: 12px;
}
.cc-title::before {
    content: ''; width: 5px; height: 26px; border-radius: 4px;
    background: linear-gradient(to bottom, var(--accent-warn), var(--brand-primary));
    display: inline-block; flex-shrink: 0;
}
.cc-subtitle { color: var(--text-slate-muted); font-size: .88rem; margin: 4px 0 0; font-weight: 500; }

/* ── Step Navigator Realignment ── */
.cc .dashboard__review-table { background: transparent !important; box-shadow: none !important; margin-bottom: 26px; }
.cc .dashboard__nav-wrap { background: transparent; }
.cc .nav-tabs {
    background: linear-gradient(135deg, var(--brand-dark-base) 0%, var(--brand-primary) 100%) !important;
    border: 1px solid rgba(164,16,52, .25) !important;
    border-radius: 14px !important; padding: 6px !important;
    gap: 4px; flex-wrap: nowrap;
    box-shadow: 0 8px 24px rgba(164,16,52, 0.25);
}
.cc .nav-tabs .nav-item { flex: 1; }
.cc .nav-tabs .nav-link {
    width: 100%; border: none !important; border-radius: 10px !important;
    color: rgba(255, 255, 255, .5) !important; font-weight: 600; font-size: .82rem;
    padding: 12px 14px !important; line-height: var(--lh-snug); text-align: center;
    transition: all .25s ease; white-space: nowrap; background: transparent !important;
}
.cc .nav-tabs .nav-link br { display: none; }
.cc .nav-tabs .nav-link i { display: none; }
.cc .nav-tabs .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, .08) !important;
    color: rgba(255, 255, 255, .9) !important;
}
.cc .nav-tabs .nav-link.active {
    background: #1C1514 !important;
    color: #fff !important; 
    font-weight: 700 !important;
}

/* ── Premium Clean Form Card ── */
.cc-card {
    background: #fff; border-radius: 18px;
    box-shadow: 0 4px 20px rgba(164,16,52, 0.08), 0 15px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--brand-soft-line);
    overflow: hidden;
}
.cc-card__head {
    padding: 24px 30px;
    border-bottom: 3px solid rgba(164,16,52, 0.15);
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(135deg, var(--brand-dark-base) 0%, var(--brand-primary) 100%);
}
.cc-card__head-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex; align-items: center; justify-content: center;
    color: #e2d7f5; font-size: var(--fs-lg); flex-shrink: 0;
}
.cc-card__head h5 {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.15rem;
    font-weight: 800; color: #fff; margin: 0; letter-spacing: 0.02em;
}
.cc-card__head p { color: rgba(255, 255, 255, 0.6); font-size: .8rem; margin: 4px 0 0; }

.cc-card__body { padding: 32px; }

/* ── Form Inputs Framework ── */
.cc-card .form-grp { margin-bottom: 24px; }
.cc-card .form-grp label {
    display: block !important; font-size: var(--fs-sm) !important; font-weight: 700 !important;
    color: #A41034 !important; margin-bottom: 9px !important; letter-spacing: .01em !important;
}
.cc-card .form-grp label code { color: #ef4444 !important; background: none !important; padding: 0 !important; font-size: var(--fs-sm) !important; font-weight: bold !important; }

.cc-card .form-grp input[type="text"],
.cc-card .form-grp input[type="email"],
.cc-card .form-grp input[type="number"],
.cc-card .form-grp select,
.cc-card .form-grp textarea {
    width: 100% !important; height: 48px !important; padding: 10px 16px !important;
    border: 1.5px solid #dcd7eb !important; border-radius: 10px !important;
    font-size: var(--fs-sm) !important; color: #1e1240 !important; background: #faf9ff !important;
    text-align: left !important; direction: ltr !important;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1) !important; outline: none !important; display: block !important; font-family: "Plus Jakarta Sans", sans-serif;
}
.cc-card .form-grp input:focus,
.cc-card .form-grp select:focus,
.cc-card .form-grp textarea:focus {
    border-color: #A41034 !important; background: #fff !important;
    box-shadow: 0 0 0 4px rgba(164,16,52, 0.12) !important;
}
.cc-card .form-grp textarea { height: 130px !important; resize: vertical !important; padding-top: 12px !important; text-align: left !important; direction: ltr !important; }
/* TinyMCE hides this textarea (inline display:none) once it builds the rich-text UI;
   the generic rule above forces display:block !important and fights that, so the
   raw empty textarea and the TinyMCE toolbar both render stacked on top of each other. */
.cc-card .form-grp textarea.text-editor-description { display: none !important; }
.cc-card .form-grp .wordcount { font-size: 11.5px; color: var(--text-slate-muted); margin-top: 6px; display: block; font-weight: 500; }

/* Informational Notes styling */
.cc-slug-note {
    font-size: 11.5px; color: var(--text-slate-muted); margin-top: 6.5px; display: flex; align-items: center; gap: 5px; font-weight: 500;
}
.cc-slug-note i { color: var(--accent-warn); font-size: var(--fs-xs); }

/* ── Dropzone Control UI ── */
.cc-card .my-thumbnail.dropzone {
    border: 2px dashed #E5E7EB !important; border-radius: 12px !important;
    background: #FAFAFA !important; min-height: 150px !important;
    display: flex; align-items: center; justify-content: center;
    transition: all .25s ease;
}
.cc-card .my-thumbnail.dropzone:hover {
    border-color: var(--brand-primary) !important; background: rgba(164, 16, 52, 0.02) !important;
}
.cc-card .my-thumbnail.dropzone .dz-message {
    color: var(--brand-primary); font-size: .9rem; text-align: center; padding: 20px; font-weight: 600;
}

/* ── Tags Input Override Engine ── */
.cc-card #tags_tagsinput {
    border: 1.5px solid #E5E7EB !important; border-radius: 10px !important;
    background: #FAFAFA !important; padding: 10px 14px !important;
    min-height: 150px !important; width: 100% !important;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; align-content: flex-start;
    transition: all .25s ease;
}
.cc-card #tags_tagsinput:focus-within {
    border-color: var(--brand-primary) !important; background: #fff !important;
    box-shadow: 0 0 0 4px rgba(164, 16, 52, 0.12) !important;
}
.cc-card #tags_tagsinput .tag {
    background: rgba(164, 16, 52, 0.09) !important; color: var(--brand-primary) !important;
    border-radius: 6px !important; padding: 4px 10px !important;
    font-size: var(--fs-xs) !important; font-weight: 700 !important;
    border: 1px solid rgba(164, 16, 52, 0.15) !important;
    display: inline-flex; align-items: center;
}
.cc-card #tags_tagsinput .tag a { color: var(--brand-primary) !important; margin-left: 6px !important; font-weight: 800; text-decoration: none; }
.cc-card #tags_tagsinput input {
    background: transparent !important; border: none !important;
    outline: none !important; color: #1e1240 !important;
    font-size: var(--fs-sm) !important; height: auto !important;
    padding: 2px 4px !important; min-width: 90px !important;
}

/* ── Primary Submit Footer Bar ── */
.cc-submit-row {
    display: flex; justify-content: flex-end;
    padding-top: 26px; border-top: 1px solid var(--brand-soft-line); margin-top: 12px;
}
.cc-card .btn-primary,
.cc-card .btn.btn-primary {
    background: #1C1514 !important;
    color: #fff !important; border: none !important;
    padding: 14px 36px !important; border-radius: 10px !important;
    font-size: var(--fs-sm) !important; font-weight: 700;
    box-shadow: 0 6px 20px rgba(164, 16, 52, 0.3) !important;
    transition: all .25s cubic-bezier(.4,0,.2,1) !important;
    display: inline-flex !important; align-items: center !important; gap: 10px !important;
    letter-spacing: .02em !important;
}
.cc-card .btn-primary:hover,
.cc-card .btn.btn-primary:hover {
    box-shadow: 0 10px 28px rgba(164, 16, 52, 0.45) !important;
    transform: translateY(-2px) !important;
    opacity: 0.95;
}
.cc-card .btn-primary:active,
.cc-card .btn.btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px rgba(164, 16, 52, 0.2) !important;
}

/* ── Validation Control System Engine ── */
.cc-v-error {
    border-color: var(--accent-error) !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .15) !important;
    background: #fff8f8 !important;
}
.cc-v-ok {
    border-color: var(--accent-success) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .1) !important;
}
.cc-err-msg {
    display: flex; align-items: center; gap: 6px;
    color: var(--accent-error); font-size: 12.5px; font-weight: 600; margin-top: 6px;
}
.cc-err-msg i { font-size: var(--fs-xs); }
.dz-v-error {
    border-color: var(--accent-error) !important;
    background: #fff8f8 !important;
}
.tox-v-error .tox-tinymce {
    border: 1.5px solid var(--accent-error) !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .15) !important;
    border-radius: 10px !important;
}

/* ── TinyMCE Form Wrapper ── */
.cc-card .tox-tinymce { border-radius: 10px !important; border: 1.5px solid #E5E7EB !important; transition: all 0.25s ease; }
.cc-card .tox-tinymce:focus-within { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 4px rgba(164, 16, 52, 0.12) !important; }

/* ── Structural Bootstrap Input Group ── */
.cc-card .input-group .input-group-text {
    background: #F3F4F6; border: 1.5px solid #E5E7EB;
    border-right: none; border-radius: 10px 0 0 10px; color: var(--brand-primary);
    font-weight: 600;
}
.cc-card .input-group .form-control {
    border-left: none; border-radius: 0 10px 10px 0;
    border: 1.5px solid #E5E7EB; background: #FAFAFA; color: var(--text-slate-dark);
}

/* ── Media Queries Responsive Layer ── */
@media(max-width:767px){
    .cc-card__body { padding: 22px; }
    .cc .nav-tabs { flex-wrap: wrap !important; }
    .cc .nav-tabs .nav-item { flex: none; width: 48%; }
}

/* ── frontend/instructor-dashboard/course / more-information ── */

/* ── Global Theme & Professional Form Reset ── */
:root {
    --brand-primary: #A41034;
    --brand-dark-base: #130330;
    --brand-faint-glow: rgba(164,16,52, 0.02);
    --brand-soft-line: rgba(164,16,52, 0.12);
    
    --accent-glow: #A41034;
    --accent-warn: #f59e0b;
    --accent-error: #ef4444;
    --accent-success: #10b981;
    
    --text-slate-dark: #0f172a;
    --text-slate-muted: #64748b;
}

.ci-page { font-family:"Plus Jakarta Sans", sans-serif; color: var(--text-slate-dark); }
.ci-page * { box-sizing: border-box; }

/* ── Step Navigation Lock & Override ── */
.ci-page .dashboard__review-table { background: transparent !important; box-shadow: none !important; margin-bottom: 16px; }
.ci-page .nav-tabs {
    background: linear-gradient(135deg, var(--brand-dark-base) 0%, var(--brand-primary) 100%) !important;
    border: 1px solid rgba(164,16,52, .2) !important;
    border-radius: 8px !important; padding: 4px !important; gap: 2px; flex-wrap: nowrap;
}
.ci-page .nav-tabs .nav-item { flex: 1; }
.ci-page .nav-tabs .nav-link {
    width: 100%; border: none !important; border-radius: 6px !important;
    color: rgba(255, 255, 255, .4) !important; font-weight: 600; font-size: .78rem;
    padding: 8px 12px !important; text-align: center; white-space: nowrap; background: transparent !important;
}
.ci-page .nav-tabs .nav-link.active {
    background: #1C1514 !important;
    color: #fff !important; font-weight: 700 !important; 
}

/* ── Unified Monolithic Form Card ── */
.ci-main-form-card {
    background: #fff;
    border: 1px solid var(--brand-soft-line);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(164,16,52, 0.05);
    overflow: hidden;
}
.ci-form-body { padding: 24px; }

/* Elegant Form Section Headings */
.ci-section-divider {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px; padding-bottom: 6px;
    border-bottom: 1px dashed var(--brand-soft-line);
}
.ci-section-divider:not(:first-child) { margin-top: 24px; }
.ci-section-icon { color: var(--brand-primary); font-size: 0.95rem; width: 20px; text-align: center; }
.ci-section-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.95rem; font-weight: 800; color: var(--brand-primary); margin: 0; }
.ci-section-subtitle { font-size: 0.72rem; color: var(--text-slate-muted); margin-left: auto; font-weight: 500; }

/* ── Inline Toggle Grid ── */
.ci-toggle-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    background: var(--brand-faint-glow); border: 1px solid var(--brand-soft-line);
    border-radius: 8px; padding: 12px 16px;
}
.ci-toggle-block { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ci-toggle-block:not(:last-child) { border-right: 1px solid var(--brand-soft-line); padding-right: 16px; }
.ci-toggle-info { flex: 1; }
.ci-toggle-label { font-size: .82rem; font-weight: 700; color: var(--text-slate-dark); margin-bottom: 1px; }
.ci-toggle-desc { font-size: .7rem; color: var(--text-slate-muted); line-height: var(--lh-snug); }

/* Custom Condensed Switch */
.ci-switch { position: relative; display: inline-block; width: 36px; height: 18px; flex-shrink: 0; margin-bottom: 0; }
.ci-switch input { opacity: 0; width: 0; height: 0; }
.ci-switch-slider { position: absolute; cursor: pointer; inset: 0; background: #cbd5e1; border-radius: 18px; transition: background .2s; }
.ci-switch-slider::before { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff; left: 3px; top: 3px; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.ci-switch input:checked + .ci-switch-slider { background: linear-gradient(135deg, #A41034, var(--brand-primary)); }
.ci-switch input:checked + .ci-switch-slider::before { transform: translateX(18px); }

/* ── Form Inputs ── */
.ci-label { display:block; font-size:.78rem; font-weight:700; color:var(--brand-primary); margin-bottom:6px; }
.ci-label code { color: var(--accent-error); background: transparent; padding: 0; font-size: var(--fs-xs); }

/* Checkbox/Radio List Matrices */
.ci-checkbox-box-wrapper {
    background: var(--brand-faint-glow); border: 1px solid var(--brand-soft-line);
    border-radius: 8px; padding: 12px; min-height: 95px;
}
.ci-checkbox-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 6px; }
.ci-checkbox-item { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; cursor: pointer; transition: all .2s; margin: 0; }
.ci-checkbox-item:hover { border-color: var(--brand-primary); background: rgba(164, 16, 52, 0.03); }
.ci-checkbox-item input[type="checkbox"],
.ci-checkbox-item input[type="radio"] { width: 13px; height: 13px; accent-color: var(--brand-primary); cursor: pointer; margin: 0; }
.ci-checkbox-item label { font-size:1rem; font-weight: 600; color: var(--text-slate-dark); cursor: pointer; margin: 0; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* Validation Overlays */
.ci-select2-wrap { margin-top: 12px; }
.ci-v-error { border-color: var(--accent-error) !important; background-color: #fff8f8 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important; }
.ci-v-box-error { border-color: var(--accent-error) !important; background-color: #fff8f8 !important; }
.ci-err-msg { display: flex; align-items: center; gap: 4px; color: var(--accent-error); font-size: var(--fs-xs); font-weight: 600; margin-top: 5px; }

/* ── Layout Footer Actions ── */
.ci-actions { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--brand-soft-line); margin-top: 24px; }
.ci-btn-save { display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px; border-radius: 6px; border: none; background: linear-gradient(135deg, #A41034, var(--brand-primary)); color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: 0 4px 12px rgba(164, 16, 52, .15); transition: all .2s; }
.ci-btn-save:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(164, 16, 52, .25); opacity: 0.95; }
.ci-btn-back { display: inline-flex; align-items: center; gap: 5px; padding: 9px 16px; border-radius: 6px; background: #f1f5f9; border: 1px solid #cbd5e1; color: #475569; font-size: .82rem; font-weight: 600; text-decoration: none; transition: all .2s; }
.ci-btn-back:hover { background: #e2e8f0; color: var(--text-slate-dark); text-decoration: none; }

/* Select2 Custom Brand Integration styling overrides */
.select2-container--default .select2-selection--multiple { border: 1px solid #cbd5e1 !important; border-radius: 6px !important; background: var(--brand-faint-glow) !important; min-height: 34px; }
.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--brand-primary) !important; background: #fff !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: rgba(164,16,52, 0.06) !important; border: 1px solid rgba(164,16,52, 0.12) !important; color: var(--brand-primary) !important; font-size: 11px !important; font-weight: 600 !important; margin-top: 4px !important; padding: 2px 6px !important; }

@media (max-width: 991px) {
    .ci-toggle-grid { grid-template-columns: 1fr; gap: 12px; }
    .ci-toggle-block:not(:last-child) { border-right: none; border-bottom: 1px dashed var(--brand-soft-line); padding-right: 0; padding-bottom: 12px; }
}

/* ── frontend/instructor-dashboard/course / finish ── */
.cc4 { font-family:"Plus Jakarta Sans", sans-serif; margin-top: -50px !important; }
.cc4-card { background:#fff; border-radius:16px; border:1px solid #E5E7EB; box-shadow:0 2px 12px rgba(0,0,0,.07); overflow:hidden; margin-bottom:20px; }
.cc4-card-head { padding:20px 24px 16px; border-bottom:1px solid #f0eef8; display:flex; align-items:center; gap:10px; }
.cc4-card-head-icon { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,#A41034,#A41034); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.82rem; flex-shrink:0; box-shadow:0 3px 10px rgba(164,16,52,.3); }
.cc4-card-head-title { font-family:"Plus Jakarta Sans", sans-serif; font-size:.95rem; font-weight:800; color:#0f172a; margin:0; }
.cc4-card-head-sub { font-size:.72rem; color:#9ca3af; margin:2px 0 0; }
.cc4-card-body { padding:28px; }
.cc4-card-body label { font-size:.8rem; font-weight:700; color:#374151; margin-bottom:6px; display:block; letter-spacing:.01em; }
.cc4-card-body .form-control, .cc4-card-body .form-select {
    border:1.5px solid #e2dff0; border-radius:10px; background:#faf9ff; color:#1e1240;
    font-size:.875rem; transition:border-color .2s,box-shadow .2s; outline:none;
}
.cc4-card-body .form-control:focus, .cc4-card-body .form-select:focus {
    border-color:#A41034; box-shadow:0 0 0 3px rgba(164,16,52,.12); background:#fff;
}
.cc4-card-body textarea.form-control { min-height:110px; resize:vertical; }
.cc4-footer { display:flex; align-items:center; justify-content:space-between; padding-top:20px; border-top:1px solid #f0eef8; margin-top:4px; }
.cc4-back-btn { display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:9px; background:#fff; color:#A41034 !important; font-weight:700; font-size:.82rem; border:1.5px solid #E5E7EB; text-decoration:none !important; transition:all .18s; }
.cc4-back-btn:hover { background:#F9FAFB; border-color:#A41034; }
.cc4-save-btn { display:inline-flex; align-items:center; gap:7px; padding:11px 28px; border-radius:10px; background:linear-gradient(135deg,#A41034,#A41034); color:#fff !important; font-weight:700; font-size:.875rem; border:none; cursor:pointer; box-shadow:0 4px 14px rgba(164,16,52,.35); transition:transform .2s,box-shadow .2s; }
.cc4-save-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(164,16,52,.45); }

/* ══════════════════════════════════════════════════════════════
   ANNOUNCEMENT FORM — Premium Executive-Learning Redesign
   Colors: #A41034 · #1C1514 · rgba(0,0,0,0.85) · #FFFFFF
   ══════════════════════════════════════════════════════════════ */
.ann-page { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
.ann-page * { box-sizing: border-box; }

/* ── Page header banner ── */
.ann-header {
    background: #A41034;
    border-radius: 18px;
    padding: 28px 32px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
   
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

/* Scanline texture */
.ann-header::before {
    content: '';
    position: absolute;
    inset: 0;
     
    pointer-events: none;
}

/* Crimson radial glow */
.ann-header::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    
    top: -130px;
    right: 0;
    pointer-events: none;
}

.ann-header__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    background: rgba(164,16,52,.16);
    border: 1px solid rgba(164,16,52,.32);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f87171;
    font-size: 1.25rem;
    position: relative;
    z-index: 1;
}

.ann-header__text { position: relative; z-index: 1; }

.ann-header__eyebrow {
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
    margin-bottom: 5px;
}

.ann-header__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}

.ann-header__sub {
    font-size: .78rem;
    color: rgba(255,255,255,.38);
    margin: 4px 0 0;
}

/* ── Form card ── */
.ann-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #FFFFFF;
    box-shadow:
        0 1px 3px rgba(0,0,0,.05),
        0 8px 24px rgba(0,0,0,.07);
    overflow: hidden;
}

.ann-card-head {
    padding: 20px 26px 18px;
    border-bottom: 1px solid #FFFFFF;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fafaf9;
}

.ann-card-head-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    background: #A41034;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .84rem;
    box-shadow: 0 3px 10px rgba(164,16,52,.28);
}

.ann-card-head-title {
    font-size: .95rem;
    font-weight: 800;
    color: rgb(34,34,34);
    margin: 0;
}

.ann-card-head-sub { font-size: .72rem; color: #a8a09a; margin: 2px 0 0; }

.ann-card-body { padding: 28px 26px; }

/* ── Field groups ── */
.ann-fg { margin-bottom: 22px; }

.ann-label {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 8px;
}

.ann-select {
    width: 100%;
    padding: 11px 15px;
    border: 1.5px solid #FFFFFF;
    border-radius: 10px;
    font-size: .875rem;
    color: rgb(34,34,34);
    background: #fafaf9;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A41034' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.ann-select:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.08);
    background-color: #fff;
}

.ann-input {
    width: 100%;
    padding: 11px 15px;
    border: 1.5px solid #FFFFFF;
    border-radius: 10px;
    font-size: .875rem;
    color: rgb(34,34,34);
    background: #fafaf9;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    font-family: inherit;
}

.ann-input::placeholder { color: #c2bdb6; }

.ann-input:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.08);
    background: #fff;
}

/* ── Editor label ── */
.ann-editor-label {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 8px;
}

/* ── Footer / actions ── */
.ann-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid #FFFFFF;
    margin-top: 6px;
    flex-wrap: wrap;
}

.ann-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    border-radius: 10px;
    border: none;
    background: #A41034;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: .025em;
    box-shadow: 0 4px 16px rgba(164,16,52,.30);
    transition: background .2s, transform .15s, box-shadow .2s;
}

.ann-submit-btn:hover {
    background: #8c0d2a;
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(164,16,52,.40);
    color: #fff;
}

.ann-submit-btn:active { transform: translateY(0); }

.ann-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 22px;
    border-radius: 10px;
    background: #fff;
    border: 1.5px solid #FFFFFF;
    color: #8a8a8a;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}

.ann-back-btn:hover {
    border-color: rgb(34,34,34);
    color: rgb(34,34,34);
    background: #fafaf9;
    text-decoration: none;
}

/* ── frontend/instructor-dashboard/announcement / index ── */

.ia { font-family:"Plus Jakarta Sans", sans-serif; }

/* ── Page Header ── */
.ia-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 28px;
}
.ia-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.7rem; font-weight: 800; color: #1e1240; margin: 0;
    display: flex; align-items: center; gap: 12px;
}
.ia-title::before {
    content: ''; width: 4px; height: 26px; border-radius: 4px;
    background: linear-gradient(to bottom, #f59e0b, #2563eb);
    display: inline-block; flex-shrink: 0;
}
.ia-add-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 24px; border-radius: 10px;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff !important; font-weight: 700; font-size: .85rem;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(245,158,11,.4);
    transition: opacity .2s, transform .2s; border: none;
}
.ia-add-btn:hover { opacity: .9; transform: translateY(-1px); }

/* ── Card ── */
.ia-card {
    background: #fff; border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 6px 24px rgba(0,0,0,.18);
    overflow: hidden;
}

/* ── Table ── */
.ia-card table { margin: 0; }
.ia-card table thead tr {
    background: linear-gradient(135deg, #111827 0%, #1e1240 100%);
    border-bottom: 2px solid #A41034;
}
.ia-card table thead th {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: rgba(255,255,255,.65);
    padding: 14px 20px; border: none; white-space: nowrap;
}
.ia-card table thead th:first-child { border-radius: 0; }
.ia-card table tbody td {
    font-size: .875rem; color: #374151;
    padding: 14px 20px; border-bottom: 1px solid #f3f4f6;
    vertical-align: middle; border-top: none;
}
.ia-card table tbody tr:last-child td { border-bottom: none; }
.ia-card table tbody tr:hover td { background: #fafafa; }

/* course chip */
.ia-course-chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 100px;
    background: rgba(37,99,235,.08); color: #2563eb;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    margin-bottom: 4px; max-width: 260px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.ia-lesson-chip {
    font-size:1rem; color: #6b7280; font-weight: 500;
}

/* title */
.ia-title-cell { font-weight: 600; color: #111827; }

/* date */
.ia-date { color: #9ca3af; font-size: .8rem; font-weight: 500; }

/* ── Action buttons ── */
.ia-action { display: flex; align-items: center; gap: 8px; }
.ia-btn {
    width: 33px; height: 33px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; text-decoration: none; transition: all .2s;
    border: 1.5px solid;
}
.ia-btn--edit { background: rgba(37,99,235,.07); border-color: rgba(37,99,235,.2); color: #2563eb; }
.ia-btn--edit:hover { background: rgba(37,99,235,.15); border-color: #2563eb; color: #1d4ed8; }
.ia-btn--del { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.2); color: #dc2626; }
.ia-btn--del:hover { background: rgba(239,68,68,.15); border-color: #dc2626; color: #b91c1c; }

/* ── Empty ── */
.ia-empty { padding: 64px 24px; text-align: center; }
.ia-empty__icon {
    width: 64px; height: 64px; border-radius: 16px;
    background: rgba(37,99,235,.08); color: #2563eb;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin: 0 auto 16px;
}
.ia-empty__title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem; font-weight: 800; color: #111827; margin-bottom: 4px; }
.ia-empty__sub { color: #9ca3af; font-size: .875rem; }

/* ── Pagination ── */
.ia-pagination { margin-top: 24px; }
.ia-pagination .pagination { gap: 6px; }
.ia-pagination .page-item .page-link {
    border-radius: 8px !important; border: 1px solid #e5e7eb;
    background: #fff; color: #374151;
    font-weight: 600; font-size: .82rem; padding: 7px 13px; transition: all .2s;
}
.ia-pagination .page-item .page-link:hover {
    background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.3); color: #2563eb;
}
.ia-pagination .page-item.active .page-link {
    background: #A41034 !important;
    border-color: #2563eb !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
}

/* ── frontend/instructor-dashboard/my-sells / index ── */
.ms-page { font-family:"Plus Jakarta Sans", sans-serif;}
.ms-page * { box-sizing:border-box; }

/* ── Header ── */
.ms-header {
    background: #1C1514; 
    border-radius:18px; padding:28px 32px; margin-bottom:26px;
    display:flex; align-items:center; gap:18px;
    position:relative; overflow:hidden;
    box-shadow:0 8px 32px rgba(10,6,24,.45);
}
.ms-header::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); }
.ms-header::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.07),transparent 65%); top:-130px; right:20px; pointer-events:none; }
.ms-header__icon { width:52px; height:52px; border-radius:14px; flex-shrink:0; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; position:relative; z-index:1; }
.ms-header__text { position:relative; z-index:1; }
.ms-header__eyebrow { font-size:1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:4px; }
.ms-header__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1.5rem; font-weight:800; color:#fff; margin:0; letter-spacing:-.02em; }
.ms-header__sub { font-size:.8rem; color:rgba(255,255,255,.45); margin:3px 0 0; }

/* ── Table card ── */
.ms-card { background:#fff; border-radius:16px; border:1px solid #e8eaf2; box-shadow:0 2px 12px rgba(10,6,24,.07); overflow:hidden; }
.ms-card__head { padding:18px 24px 16px; border-bottom:1px solid #f0eef8; display:flex; align-items:center; gap:12px; }
.ms-card__head-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; background:#A41034; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; box-shadow:0 4px 12px rgba(124,82,255,.35); }
.ms-card__head-title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; color:#0f172a; margin:0; }
.ms-card__head-sub { font-size:.75rem; color:#9ca3af; margin:2px 0 0; }

/* ── Table ── */
.ms-table { width:100%; border-collapse:collapse; }
.ms-table thead th { padding:12px 18px; font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#9ca3af; background:#fafafe; border-bottom:1px solid #f0eef8; text-align:left; white-space:nowrap; }
.ms-table tbody td { padding:14px 18px; font-size:.875rem; color:#374151; border-bottom:1px solid #f8f9fc; vertical-align:middle; }
.ms-table tbody tr:last-child td { border-bottom:none; }
.ms-table tbody tr:hover td { background:#faf9ff; }

/* Cell variants */
.ms-num { font-size:.78rem; color:#9ca3af; font-weight:600; }
.ms-title { font-size:.875rem; font-weight:600; color:#0f172a; max-width:260px; }
.ms-title span { display:block; font-size:.75rem; font-weight:400; color:#9ca3af; margin-top:2px; }
.ms-type-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:100px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.ms-type-badge--course  { background:rgba(124,82,255,.08); color:#1C1514; }
.ms-type-badge--lesson  { background:rgba(6,182,212,.08); color:#0891b2; }
.ms-price { font-family:"Plus Jakarta Sans", sans-serif; font-size:.95rem; font-weight:800; color:#0f172a; }
.ms-commission { font-family:"Plus Jakarta Sans", sans-serif; font-size:.88rem; font-weight:700; color:#059669; }
.ms-date { font-size:.78rem; color:#9ca3af; white-space:nowrap; }

/* Empty */
.ms-empty { padding:60px 24px; text-align:center; }
.ms-empty__icon { width:60px; height:60px; border-radius:16px; background:linear-gradient(135deg,rgba(124,82,255,.1),rgba(155,81,224,.08)); border:1px solid rgba(124,82,255,.15); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#1C1514; margin:0 auto 14px; }
.ms-empty__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; color:#111827; margin-bottom:4px; }
.ms-empty__sub { font-size:.82rem; color:#9ca3af; }

/* Pagination */
.ms-pagination { padding:16px 20px; border-top:1px solid #f0eef8; }
.ms-pagination .pagination { gap:4px; margin:0; }
.ms-pagination .page-item .page-link { border-radius:8px!important; border:1px solid #e5e7eb; background:#fff; color:#374151; font-weight:600; font-size:.8rem; padding:7px 12px; transition:all .2s; }
.ms-pagination .page-item .page-link:hover { background:rgba(124,82,255,.06); border-color:rgba(124,82,255,.3); color:#1C1514; }
.ms-pagination .page-item.active .page-link { background:linear-gradient(135deg,#1C1514,#9b51e0)!important; border-color:#1C1514!important; color:#fff!important; box-shadow:0 4px 12px rgba(124,82,255,.4); }

/* ── frontend/instructor-dashboard/review / index ── */

.ir { font-family:"Plus Jakarta Sans", sans-serif; }

/* ── Page Header ── */
.ir-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 28px;
}
.ir-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.7rem; font-weight: 800; color: #1e1240; margin: 0;
    display: flex; align-items: center; gap: 12px;
}
.ir-title::before {
    content: ''; width: 4px; height: 26px; border-radius: 4px;
    background: linear-gradient(to bottom, #f59e0b, #2563eb);
    display: inline-block; flex-shrink: 0;
}

/* ── Card ── */
.ir-card {
    background: #fff; border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 6px 24px rgba(0,0,0,.18);
    overflow: hidden;
}

/* ── Table ── */
.ir-card table { margin: 0; }
.ir-card table thead tr {
    background: linear-gradient(135deg, #111827 0%, #1e1240 100%);
    border-bottom: 2px solid #A41034;
}
.ir-card table thead th {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: #A41034;
    padding: 14px 18px; border: none; white-space: nowrap;
}
.ir-card table tbody td {
    font-size: .875rem; color: #374151;
    padding: 14px 18px; border-bottom: 1px solid #f3f4f6;
    vertical-align: middle; border-top: none;
}
.ir-card table tbody tr:last-child td { border-bottom: none; }
.ir-card table tbody tr:hover td { background: #fafafa; }

/* course title */
.ir-course { font-weight: 600; color: #111827; font-size: .875rem; }
.ir-lesson { font-size:1rem; color: #6b7280; margin-top: 2px; }

/* type badge */
.ir-type {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 100px;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em;
}
.ir-type--course { background: rgba(37,99,235,.08); color: #2563eb; }
.ir-type--lesson  { background: rgba(6,182,212,.1);  color: #0891b2; }

/* stars */
.ir-stars { display: flex; align-items: center; gap: 2px; }
.ir-stars i { color: #f59e0b; font-size: .72rem; }
.ir-stars i.empty { color: #e5e7eb; }

/* review text */
.ir-review { color: #6b7280; font-size: .82rem; max-width: 200px; }

/* user */
.ir-user { font-weight: 600; color: #374151; font-size: .85rem; }

/* status badge */
.ir-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 12px; border-radius: 100px;
    font-size: .72rem; font-weight: 700;
}
.ir-badge--approved { background: #d1fae5; color: #065f46; }
.ir-badge--pending  { background: #fef3c7; color: #92400e; }

/* ── Action buttons ── */
.ir-action { display: flex; align-items: center; gap: 8px; }
.ir-btn {
    width: 33px; height: 33px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; text-decoration: none; transition: all .2s; border: 1.5px solid;
}
.ir-btn--approve { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.2); color: #059669; }
.ir-btn--approve:hover { background: rgba(16,185,129,.15); border-color: #059669; }
.ir-btn--del { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.2); color: #dc2626; }
.ir-btn--del:hover { background: rgba(239,68,68,.15); border-color: #dc2626; color: #b91c1c; }

/* ── Empty ── */
.ir-empty { padding: 64px 24px; text-align: center; }
.ir-empty__icon {
    width: 64px; height: 64px; border-radius: 16px;
    background: rgba(245,158,11,.08); color: #f59e0b;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin: 0 auto 16px;
}
.ir-empty__title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem; font-weight: 800; color: #111827; margin-bottom: 4px; }
.ir-empty__sub { color: #9ca3af; font-size: .875rem; }

/* ── Pagination ── */
.ir-pagination { margin-top: 24px; }
.ir-pagination .pagination { gap: 6px; }
.ir-pagination .page-item .page-link {
    border-radius: 8px !important; border: 1px solid #e5e7eb;
    background: #fff; color: #374151;
    font-weight: 600; font-size: .82rem; padding: 7px 13px; transition: all .2s;
}
.ir-pagination .page-item .page-link:hover {
    background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.3); color: #2563eb;
}
.ir-pagination .page-item.active .page-link {
    background: #A41034 !important;
    border-color: #2563eb !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
}

/* ── frontend/instructor-dashboard/lesson-qna / index ── */

.iq { font-family:"Plus Jakarta Sans", sans-serif; }

/* ── Page Header ── */
.iq-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 24px;
}
.iq-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.7rem; font-weight: 800; color: #1e1240; margin: 0;
    display: flex; align-items: center; gap: 12px;
}
.iq-title::before {
    content: ''; width: 4px; height: 26px; border-radius: 4px;
    background: linear-gradient(to bottom, #f59e0b, #2563eb);
    display: inline-block; flex-shrink: 0;
}

/* ── Filter bar ── */
.iq-filters {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 12px; padding: 12px 16px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.iq-filters label { color: #6b7280; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.iq-filters select {
    background: #f9fafb; border: 1px solid #e5e7eb;
    color: #374151; border-radius: 8px; padding: 7px 32px 7px 12px;
    font-size: .82rem; font-weight: 500; outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    transition: border-color .2s;
}
.iq-filters select:focus { border-color: #2563eb; }

/* ── QnA Card ── */
.iq-qna {
    background: #fff; border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 4px 20px rgba(0,0,0,.14);
    overflow: hidden; margin-bottom: 20px;
    border-left: 4px solid #e5e7eb;
    transition: border-color .2s, box-shadow .25s;
}
.iq-qna--unread { border-left-color: #f59e0b; }
.iq-qna:hover { box-shadow: 0 4px 16px rgba(37,99,235,.12), 0 8px 32px rgba(0,0,0,.16); }

/* ── Card Header ── */
.iq-qna__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #f8f9ff 0%, #f3f4f6 100%);
    border-bottom: 1px solid #f0f0f5;
}
.iq-qna__head-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* read/unread checkbox */
.iq-check {
    width: 18px; height: 18px; border-radius: 5px; cursor: pointer;
    accent-color: #f59e0b; flex-shrink: 0;
}

/* course info */
.iq-thumb {
    width: 40px; height: 40px; border-radius: 8px; object-fit: cover;
    border: 2px solid #e5e7eb; flex-shrink: 0;
}
.iq-course-info { display: flex; flex-direction: column; }
.iq-course-name {
    font-weight: 700; font-size: .82rem; color: #111827; line-height: var(--lh-snug);
}
.iq-lesson-name { font-size:1rem; color: #6b7280; margin-top: 1px; }
.iq-lesson-name i { font-size: .65rem; color: #9ca3af; margin-right: 3px; }

/* unread dot */
.iq-unread-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245,158,11,.5);
    flex-shrink: 0;
}

/* delete btn */
.iq-del-btn {
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(239,68,68,.07); border: 1.5px solid rgba(239,68,68,.2);
    color: #dc2626; font-size:1rem; text-decoration: none; transition: all .2s;
    flex-shrink: 0;
}
.iq-del-btn:hover { background: rgba(239,68,68,.15); border-color: #dc2626; color: #b91c1c; }

/* ── Question body ── */
.iq-qna__body { padding: 20px; }

.iq-question { margin-bottom: 16px; }
.iq-question__user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.iq-avatar {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    border: 2px solid #e5e7eb; flex-shrink: 0;
}
.iq-user-name { font-weight: 700; font-size: .85rem; color: #111827; }
.iq-user-date { font-size: .72rem; color: #9ca3af; }
.iq-question__title {
    font-weight: 700; font-size: 1rem; color: #111827; margin-bottom: 8px;
    line-height: var(--lh-snug);
}
.iq-question__body { color: #6b7280; font-size: .875rem; line-height: var(--lh-normal); }
.iq-question__body p { margin-bottom: 6px; }

/* reply count */
.iq-reply-count {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 100px;
    background: rgba(37,99,235,.07); color: #2563eb;
    font-size:1rem; font-weight: 700; margin: 4px 0 16px;
}

/* ── Replies ── */
.iq-replies { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.iq-reply {
    background: #f8f9ff; border-radius: 10px;
    padding: 14px 16px; border-left: 3px solid rgba(37,99,235,.2);
}
.iq-reply__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.iq-reply__user { display: flex; align-items: center; gap: 8px; }
.iq-reply__body { color: #374151; font-size: .875rem; line-height: var(--lh-normal); }
.iq-reply__body p { margin-bottom: 0; }

/* no replies */
.iq-no-replies { text-align: center; color: #d1d5db; font-size: .82rem; padding: 12px 0; }

/* ── Reply form ── */
.iq-reply-form {
    border-top: 1px solid #f0f0f5; padding: 16px 20px;
    background: #fafafa;
}
.iq-reply-form textarea.preview {
    width: 100%; border-radius: 10px; padding: 12px 16px;
    border: 1.5px solid #e5e7eb; font-size: .875rem; color: #374151;
    resize: none; outline: none; transition: border-color .2s;
    background: #fff; font-family:"Plus Jakarta Sans", sans-serif;
    cursor: pointer; min-height: 44px;
}
.iq-reply-form textarea.preview:focus { border-color: #2563eb; }
.iq-reply-form .editor-wrap { margin-top: 10px; }
.iq-reply-form .editor-wrap textarea { width: 100%; }
.iq-reply-form .editor-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.iq-submit-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 20px; border-radius: 9px;
    background: linear-gradient(135deg, #1e1240, #2563eb);
    color: #fff; font-weight: 700; font-size: .82rem; border: none;
    box-shadow: 0 4px 12px rgba(30,18,64,.3); cursor: pointer; transition: all .2s;
}
.iq-submit-btn:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); transform: translateY(-1px); }
.iq-close-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 9px;
    background: transparent; color: #6b7280; font-weight: 600;
    font-size: .82rem; border: 1.5px solid #e5e7eb; cursor: pointer; transition: all .2s;
}
.iq-close-btn:hover { background: #f3f4f6; color: #374151; }

/* ── Empty state ── */
.iq-empty {
    background: #fff; border-radius: 16px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 6px 24px rgba(0,0,0,.18);
}
.iq-empty__icon {
    width: 72px; height: 72px; border-radius: 18px;
    background: rgba(37,99,235,.08); color: #2563eb;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin: 0 auto 18px;
}
.iq-empty__title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 6px; }
.iq-empty__sub { color: #9ca3af; font-size: .875rem; }

/* ── Validation ── */
.iq-v-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
    background: #fff8f8 !important;
}
.iq-err-msg {
    display: flex; align-items: center; gap: 5px;
    color: #dc2626; font-size: var(--fs-xs); font-weight: 600; margin-top: 8px;
}
.iq-err-msg i { font-size: 10px; }

/* ── Pagination ── */
.iq-pagination { margin-top: 24px; }
.iq-pagination .pagination { gap: 6px; }
.iq-pagination .page-item .page-link {
    border-radius: 8px !important; border: 1px solid #e5e7eb;
    background: #fff; color: #374151;
    font-weight: 600; font-size: .82rem; padding: 7px 13px; transition: all .2s;
}
.iq-pagination .page-item .page-link:hover {
    background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.3); color: #2563eb;
}
.iq-pagination .page-item.active .page-link {
    background: #A41034 !important;
    border-color: #2563eb !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
}

/* ── frontend/instructor-dashboard/payout / index ── */
.po-page { font-family:"Plus Jakarta Sans", sans-serif; }
.po-page * { box-sizing:border-box; }

/* ── Header ── */
.po-header {
    background: #1C1514; 
    border-radius:18px; padding:28px 32px; margin-bottom:26px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
    position:relative; overflow:hidden;
    box-shadow:0 8px 32px rgba(10,6,24,.45);
}
.po-header::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); }
.po-header::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.07),transparent 65%); top:-130px; right:20px; pointer-events:none; }
.po-header__left { display:flex; align-items:center; gap:18px; position:relative; z-index:1; }
.po-header__icon { width:52px; height:52px; border-radius:14px; flex-shrink:0; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; }
.po-header__eyebrow { font-size:1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:4px; }
.po-header__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1.5rem; font-weight:800; color:#fff; margin:0; letter-spacing:-.02em; }
.po-header__sub { font-size:.8rem; color:rgba(255,255,255,.45); margin:3px 0 0; }
.po-header__right { position:relative; z-index:1; }
.po-request-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 24px; border-radius:11px;
    background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.25);
    color:#fff; font-size:.875rem; font-weight:700;
    text-decoration:none; transition:all .2s;
}
.po-request-btn:hover { background:rgba(255,255,255,.2); color:#fff; transform:translateY(-1px); }

/* ── Stat chips ── */
.po-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:26px; }
@media(max-width:767px){ .po-stats{ grid-template-columns:1fr; } }
.po-stat {
    background:#fff; border-radius:16px;
    border:1px solid #e8eaf2; border-left:4px solid;
    padding:22px 22px; display:flex; align-items:center; gap:16px;
    box-shadow:0 2px 10px rgba(10,6,24,.06);
    transition:transform .2s, box-shadow .2s;
}
.po-stat:hover { transform:translateY(-2px); }
.po-stat--balance { border-left-color:#1C1514; }
.po-stat--sold    { border-left-color:#06b6d4; }
.po-stat--payout  { border-left-color:#10b981; }
.po-stat__icon { width:46px; height:46px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.po-stat--balance .po-stat__icon { background:rgba(124,82,255,.1); color:#1C1514; }
.po-stat--sold    .po-stat__icon { background:rgba(6,182,212,.1); color:#06b6d4; }
.po-stat--payout  .po-stat__icon { background:rgba(16,185,129,.1); color:#10b981; }
.po-stat__val { font-family:"Plus Jakarta Sans", sans-serif; font-size:1.6rem; font-weight:800; color:#0f172a; line-height:1; margin-bottom:4px; }
.po-stat__lbl { font-size:.7rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#9ca3af; }

/* ── Table card ── */
.po-card { background:#fff; border-radius:16px; border:1px solid #e8eaf2; box-shadow:0 2px 12px rgba(10,6,24,.07); overflow:hidden; }
.po-card__head { padding:18px 24px 16px; border-bottom:1px solid #f0eef8; display:flex; align-items:center; gap:12px; }
.po-card__head-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; background:#A41034; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; box-shadow:0 4px 12px rgba(124,82,255,.35); }
.po-card__head-title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; color:#0f172a; margin:0; }
.po-card__head-sub { font-size:.75rem; color:#9ca3af; margin:2px 0 0; }

/* ── Table ── */
.po-table { width:100%; border-collapse:collapse; }
.po-table thead th {
    padding:12px 18px; font-size:.72rem; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase; color:#9ca3af;
    background:#fafafe; border-bottom:1px solid #f0eef8; text-align:left;
}
.po-table tbody td {
    padding:14px 18px; font-size:.875rem; color:#374151;
    border-bottom:1px solid #f8f9fc; vertical-align:middle;
}
.po-table tbody tr:last-child td { border-bottom:none; }
.po-table tbody tr:hover td { background:#faf9ff; }
.po-amount { font-family:"Plus Jakarta Sans", sans-serif; font-weight:700; color:#0f172a; font-size:.95rem; }
.po-method { font-size:.82rem; font-weight:600; color:#6b7280; }
.po-date { font-size:.8rem; color:#9ca3af; }

/* Badges */
.po-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:100px; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.po-badge--approved { background:#d1fae5; color:#065f46; }
.po-badge--pending  { background:#fef3c7; color:#92400e; }
.po-badge--rejected { background:#fee2e2; color:#991b1b; }
.po-badge i { font-size:.6rem; }

/* Delete btn */
.po-del-btn { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(239,68,68,.07); border:1.5px solid rgba(239,68,68,.2); color:#dc2626; text-decoration:none; transition:all .2s; }
.po-del-btn:hover { background:#dc2626; border-color:#dc2626; color:#fff; }

/* Empty */
.po-empty { padding:60px 24px; text-align:center; }
.po-empty__icon { width:60px; height:60px; border-radius:16px; background:linear-gradient(135deg,rgba(124,82,255,.1),rgba(155,81,224,.08)); border:1px solid rgba(124,82,255,.15); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#1C1514; margin:0 auto 14px; }
.po-empty__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; color:#111827; margin-bottom:4px; }
.po-empty__sub { font-size:.82rem; color:#9ca3af; }

/* Pagination */
.po-pagination { padding:16px 20px; border-top:1px solid #f0eef8; }
.po-pagination .pagination { gap:4px; margin:0; }
.po-pagination .page-item .page-link { border-radius:8px!important; border:1px solid #e5e7eb; background:#fff; color:#374151; font-weight:600; font-size:.8rem; padding:7px 12px; transition:all .2s; }
.po-pagination .page-item .page-link:hover { background:rgba(124,82,255,.06); border-color:rgba(124,82,255,.3); color:#1C1514; }
.po-pagination .page-item.active .page-link { background:linear-gradient(135deg,#1C1514,#9b51e0)!important; border-color:#1C1514!important; color:#fff!important; box-shadow:0 4px 12px rgba(124,82,255,.4); }

/* ── frontend/instructor-dashboard/payout / create ── */
.pc-page { font-family:"Plus Jakarta Sans", sans-serif;}
.pc-page * { box-sizing:border-box; }

/* ── Header ── */
.pc-header {
    background: #1C1514; 
    border-radius:18px; padding:28px 32px; margin-bottom:26px;
    display:flex; align-items:center; gap:18px;
    position:relative; overflow:hidden;
    box-shadow:0 8px 32px rgba(10,6,24,.45);
}
.pc-header::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); }
.pc-header::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.07),transparent 65%); top:-130px; right:20px; pointer-events:none; }
.pc-header__icon { width:52px; height:52px; border-radius:14px; flex-shrink:0; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; position:relative; z-index:1; }
.pc-header__text { position:relative; z-index:1; }
.pc-header__eyebrow { font-size:1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:4px; }
.pc-header__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1.5rem; font-weight:800; color:#fff; margin:0; letter-spacing:-.02em; }
.pc-header__sub { font-size:.8rem; color:rgba(255,255,255,.45); margin:3px 0 0; }

/* ── Stats row ── */
.pc-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:26px; }
@media(max-width:767px){ .pc-stats{ grid-template-columns:1fr; } }
.pc-stat { background:#fff; border-radius:16px; border:1px solid #e8eaf2; border-left:4px solid; padding:18px 20px; display:flex; align-items:center; gap:14px; box-shadow:0 2px 10px rgba(10,6,24,.06); }
.pc-stat--balance { border-left-color:#1C1514; }
.pc-stat--sold    { border-left-color:#06b6d4; }
.pc-stat--paid    { border-left-color:#10b981; }
.pc-stat__icon { width:42px; height:42px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.pc-stat--balance .pc-stat__icon { background:rgba(124,82,255,.1); color:#1C1514; }
.pc-stat--sold    .pc-stat__icon { background:rgba(6,182,212,.1); color:#06b6d4; }
.pc-stat--paid    .pc-stat__icon { background:rgba(16,185,129,.1); color:#10b981; }
.pc-stat__val { font-family:"Plus Jakarta Sans", sans-serif; font-size:1.4rem; font-weight:800; color:#0f172a; line-height:1; margin-bottom:3px; }
.pc-stat__lbl { font-size:.68rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#9ca3af; }

/* ── Notice ── */
.pc-notice { background:#faf5ff; border:1px solid #e9d5ff; border-left:4px solid #1C1514; border-radius:12px; padding:14px 18px; display:flex; gap:12px; align-items:flex-start; margin-bottom:24px; }
.pc-notice i { color:#1C1514; margin-top:2px; flex-shrink:0; }
.pc-notice p { font-size:.84rem; color:#4a1d96; margin:0; line-height:1.55; }
.pc-notice a { color:#1C1514; font-weight:600; }

/* ── Cards layout ── */
.pc-grid { display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }
@media(max-width:991px){ .pc-grid{ grid-template-columns:1fr; } }

/* ── Gateway info card ── */
.pc-info-card { background:#fff; border-radius:16px; border:1px solid #e8eaf2; box-shadow:0 2px 12px rgba(10,6,24,.07); overflow:hidden; }
.pc-card-head { padding:18px 24px 16px; border-bottom:1px solid #f0eef8; display:flex; align-items:center; gap:12px; }
.pc-card-head-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; background: #A41034; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; box-shadow:0 4px 12px rgba(124,82,255,.35); }
.pc-card-head-title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; color:#0f172a; margin:0; }
.pc-card-head-sub { font-size:.75rem; color:#9ca3af; margin:2px 0 0; }
.pc-info-row { display:flex; align-items:baseline; justify-content:space-between; padding:14px 24px; border-bottom:1px solid #f8f9fc; gap:16px; }
.pc-info-row:last-child { border-bottom:none; }
.pc-info-label { font-size:.78rem; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:.05em; flex-shrink:0; }
.pc-info-val { font-size:.9rem; font-weight:700; color:#0f172a; text-align:right; }
.pc-info-val.highlight { color:#1C1514; font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; }
.pc-info-account { display:inline-flex; align-items:center; gap:6px; background:#f3f0ff; color:#A41034; padding:4px 12px; border-radius:100px; font-size:.78rem; font-weight:700; }
.pc-info-account i { font-size:.68rem; }

/* ── Form card ── */
.pc-form-card { background:#fff; border-radius:16px; border:1px solid #e8eaf2; box-shadow:0 2px 12px rgba(10,6,24,.07); overflow:hidden; }
.pc-form-body { padding:24px; }
.pc-form-group { margin-bottom:20px; }
.pc-label { display:block; font-size:.78rem; font-weight:700; color:#374151; margin-bottom:7px; }
.pc-input { width:100%; padding:12px 16px; border:1.5px solid #e5e7eb; border-radius:10px; font-size:1rem; color:#111827; background:#fafafa; transition:border-color .2s, box-shadow .2s; outline:none; font-family:"Plus Jakarta Sans", sans-serif; font-weight:700; }
.pc-input:focus { border-color:#1C1514; box-shadow:0 0 0 3px rgba(124,82,255,.12); background:#fff; }
.pc-input-hint { font-size:.72rem; color:#9ca3af; margin-top:5px; display:flex; gap:8px; flex-wrap:wrap; }
.pc-input-hint span { background:#f3f0ff; color:#1C1514; padding:2px 8px; border-radius:5px; font-weight:600; }
.pc-submit-btn { width:100%; padding:13px; border-radius:11px; border:none; background: #A41034; color:#fff; font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; cursor:pointer; box-shadow:0 4px 18px rgba(124,82,255,.45); transition:transform .2s, box-shadow .2s; display:flex; align-items:center; justify-content:center; gap:9px; }
.pc-submit-btn:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(124,82,255,.55); }
.pc-back-link { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color:#1C1514; text-decoration:none; margin-top:16px; }
.pc-back-link:hover { color:#9b51e0; }

/* ── Info box ── */
.pc-info-text { background:#fafafe; border:1px solid #ede9ff; border-radius:10px; padding:14px 16px; font-size:.82rem; color:#4a1d96; line-height: var(--lh-normal); margin-top:4px; }

/* ── frontend/instructor-dashboard/zoom / index ── */
.ls-page { font-family:"Plus Jakarta Sans", sans-serif;}
.ls-page * { box-sizing:border-box; }

/* ── Page header ── */
.ls-header {
    background: #1C1514; 
    border-radius: 18px;
    padding: 28px 32px;
    margin-bottom: 26px;
    display: flex; align-items: center; gap: 18px;
    position: relative; overflow: hidden;
    box-shadow: 0 8px 32px rgba(10,6,24,.45);
}
.ls-header::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
.ls-header::after {
    content:''; position:absolute; width:300px; height:300px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,255,255,.07), transparent 65%);
    top:-130px; right:20px; pointer-events:none;
}
.ls-header__icon {
    width:52px; height:52px; border-radius:14px; flex-shrink:0;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.3rem; position:relative; z-index:1;
}
.ls-header__text { position:relative; z-index:1; }
.ls-header__eyebrow {
    font-size:1rem; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:4px;
}
.ls-header__title {
    font-family:"Plus Jakarta Sans", sans-serif; font-size:1.5rem;
    font-weight:800; color:#fff; margin:0; letter-spacing:-.02em;
}
.ls-header__sub { font-size:.8rem; color:rgba(255,255,255,.45); margin:3px 0 0; }

/* ── Card ── */
.ls-card {
    background:#fff; border-radius:16px;
    border:1px solid #e8eaf2;
    box-shadow:0 2px 12px rgba(10,6,24,.07);
    overflow:hidden;
}
.ls-card__head {
    padding:18px 24px 16px;
    border-bottom:1px solid #f0eef8;
    display:flex; align-items:center; gap:12px;
}
.ls-card__head-icon {
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    background:#A41034;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:.85rem;
    box-shadow:0 4px 12px rgba(124,82,255,.35);
}
.ls-card__head-title {
    font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem;
    font-weight:800; color:#0f172a; margin:0;
}
.ls-card__head-sub { font-size:.75rem; color:#9ca3af; margin:2px 0 0; }
.ls-card__body { padding:24px; }

/* ── Form ── */
.ls-form-group { margin-bottom:20px; }
.ls-label {
    display:block; font-size:.78rem; font-weight:700;
    color:#374151; margin-bottom:7px; letter-spacing:.01em;
}
.ls-label code {
    background:#f3f0ff; color:#1C1514; padding:1px 6px;
    border-radius:5px; font-size:.82em;
    border:1px solid rgba(124,82,255,.2);
}
.ls-input {
    width:100%; padding:10px 14px;
    border:1.5px solid #e5e7eb; border-radius:10px;
    font-size:.875rem; color:#111827; background:#fafafa;
    transition:border-color .2s, box-shadow .2s;
    outline:none; font-family:inherit;
}
.ls-input:focus {
    border-color:#1C1514;
    box-shadow:0 0 0 3px rgba(124,82,255,.12);
    background:#fff;
}
.ls-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 28px; border-radius:10px; border:none;
    background: #A41034;
    color:#fff; font-size:.875rem; font-weight:700;
    cursor:pointer; font-family:inherit;
    box-shadow:0 4px 16px rgba(124,82,255,.4);
    transition:transform .2s, box-shadow .2s;
}
.ls-btn:hover {color: #FFFFFF; transform:translateY(-1px); box-shadow:0 6px 20px rgba(124,82,255,.5); }

/* ── Guide card ── */
.ls-guide {
    background: #1C1514;
    border-radius:16px; border:1px solid rgba(124,82,255,.25);
    padding:24px;
    box-shadow:0 4px 20px rgba(10,6,24,.3);
}
.ls-guide__title {
    font-family:"Plus Jakarta Sans", sans-serif; font-size:.95rem;
    font-weight:800; color:#fff; margin:0 0 16px;
    display:flex; align-items:center; gap:10px;
}
.ls-guide__title i { color:#A41034; }
.ls-guide__step {
    display:flex; gap:12px; margin-bottom:14px; align-items:flex-start;
}
.ls-guide__step:last-child { margin-bottom:0; }
.ls-guide__num {
    width:24px; height:24px; border-radius:50%; flex-shrink:0;
    background: linear-gradient(135deg,#1C1514,#9b51e0);
    color:#fff; font-size:.72rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    margin-top:2px;
}
.ls-guide__text { font-size:.84rem; color:#FFFFFF; line-height:1.55; }
.ls-guide__text a { color:#FFFFFF; font-weight:600; text-decoration:none; }
.ls-guide__text a:hover { color:#FFFFFF; text-decoration:underline; }
.ls-guide__text b { color:#FFFFFF; font-weight:600; }

/* ── frontend/instructor-dashboard/jitsi / index ── */
.ls-page { font-family:"Plus Jakarta Sans", sans-serif; }
.ls-page * { box-sizing:border-box; }
.ls-header {
    background: #1C1514; 
    border-radius:18px; padding:28px 32px; margin-bottom:26px;
    display:flex; align-items:center; gap:18px;
    position:relative; overflow:hidden;
    box-shadow:0 8px 32px rgba(10,6,24,.45);
}
.ls-header::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); }
.ls-header::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.07),transparent 65%); top:-130px; right:20px; pointer-events:none; }
.ls-header__icon { width:52px; height:52px; border-radius:14px; flex-shrink:0; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; position:relative; z-index:1; }
.ls-header__text { position:relative; z-index:1; }
.ls-header__eyebrow { font-size:1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:4px; }
.ls-header__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1.5rem; font-weight:800; color:#fff; margin:0; letter-spacing:-.02em; }
.ls-header__sub { font-size:.8rem; color:rgba(255,255,255,.45); margin:3px 0 0; }
.ls-card { background:#fff; border-radius:16px; border:1px solid #e8eaf2; box-shadow:0 2px 12px rgba(10,6,24,.07); overflow:hidden; }
.ls-card__head { padding:18px 24px 16px; border-bottom:1px solid #f0eef8; display:flex; align-items:center; gap:12px; }
.ls-card__head-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; background:#A41034; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; box-shadow:0 4px 12px rgba(124,82,255,.35); }
.ls-card__head-title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; color:#0f172a; margin:0; }
.ls-card__head-sub { font-size:.75rem; color:#9ca3af; margin:2px 0 0; }
.ls-card__body { padding:24px; }
.ls-form-group { margin-bottom:20px; }
.ls-label { display:block; font-size:.78rem; font-weight:700; color:#374151; margin-bottom:7px; letter-spacing:.01em; }
.ls-label code { background:#f3f0ff; color:#1C1514; padding:1px 6px; border-radius:5px; font-size:.82em; border:1px solid rgba(124,82,255,.2); }
.ls-input { width:100%; padding:10px 14px; border:1.5px solid #e5e7eb; border-radius:10px; font-size:.875rem; color:#111827; background:#fafafa; transition:border-color .2s, box-shadow .2s; outline:none; font-family:inherit; }
.ls-input:focus { border-color:#1C1514; box-shadow:0 0 0 3px rgba(124,82,255,.12); background:#fff; }
.ls-file-input {
    width:100%; padding:10px 14px;
    border:1.5px dashed #FFFFFF; border-radius:10px;
    font-size:.875rem; color:#374151; background:#f8f5ff;
    cursor:pointer; font-family:inherit;
    transition:border-color .2s, background .2s;
}
.ls-file-input:hover { border-color:#1C1514; background:#f3f0ff; }
.ls-file-hint { font-size:.72rem; color:#9ca3af; margin-top:5px; }
.ls-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 28px; border-radius:10px; border:none; background:#A41034; color:#fff; font-size:.875rem; font-weight:700; cursor:pointer; font-family:inherit; box-shadow:0 4px 16px rgba(124,82,255,.4); transition:transform .2s, box-shadow .2s; }
.ls-btn:hover {color: #FFFFFF; transform:translateY(-1px); box-shadow:0 6px 20px rgba(124,82,255,.5); }
.ls-guide { background: #1C1514; border-radius:16px; border:1px solid rgba(124,82,255,.25); padding:24px; box-shadow:0 4px 20px rgba(10,6,24,.3); }
.ls-guide__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:.95rem; font-weight:800; color:#fff; margin:0 0 16px; display:flex; align-items:center; gap:10px; }
.ls-guide__title i { color:#A41034; }
.ls-guide__step { display:flex; gap:12px; margin-bottom:14px; align-items:flex-start; }
.ls-guide__step:last-child { margin-bottom:0; }
.ls-guide__num { width:24px; height:24px; border-radius:50%; flex-shrink:0; background: #A41034; color:#fff; font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.ls-guide__text { font-size:.84rem; color:#FFFFFF; line-height:1.55; }
.ls-guide__text a { color:#FFFFFF; font-weight:600; text-decoration:none; }
.ls-guide__text a:hover { color:#FFFFFF; text-decoration:underline; }
.ls-guide__text b { color:#FFFFFF; font-weight:600; }

/* ── frontend/student-dashboard/enrolled-courses / index ── */

/* ── Page header ── */
.ec-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.ec-header-left h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.ec-header-left p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.ec-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.6); font-size: .78rem; font-weight: 600;
}
.ec-count-pill strong { color: #FFFFFF; font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; }

/* ── Summary bar ── */
.ec-summary {
    display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
.ec-sum-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 10px;
    background: #1C1514; border: 1px solid #1C1514;
    font-size: .8rem; color: #FFFFFF; font-weight: 500;
}
.ec-sum-chip strong { color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; }
.ec-sum-chip i { font-size: .78rem; }
 /* Brand Burgundy / Dark Crimson */
.ec-sum-chip--purple { 
    border-color: rgba(164, 16, 52, 0.2); 
    background: #2a161a; /* Dark charcoal with a faint burgundy undertone */
}
.ec-sum-chip--purple i, 
.ec-sum-chip--purple strong { 
    color: #e5466c; 
}

/* Deep Emerald Green */
.ec-sum-chip--green { 
    border-color: rgba(52, 211, 153, 0.15);  
    background: #192621; /* Muted dark forest tint */
}
.ec-sum-chip--green i, 
.ec-sum-chip--green strong { 
    color: #a7f3d0; /* Softened pale green to prevent harsh glowing text */
}

/* Deep Ocean Cyan */
.ec-sum-chip--cyan { 
    border-color: rgba(34, 211, 238, 0.15);   
    background: #162529; /* Deep, muted slate cyan tint */
}
.ec-sum-chip--cyan i, 
.ec-sum-chip--cyan strong { 
    color: #bae6fd; /* Softened pale blue-cyan for seamless legibility */
}
/* ── Grid ── */
.ec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1199px) { .ec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .ec-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.ec-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
    transition: transform .25s, box-shadow .25s;
    position: relative;
}
.ec-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(164,16,52,.16), 0 16px 48px rgba(0,0,0,.22);
}
.ec-card--complete { box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(16,185,129,.12); }
.ec-card--complete:hover { box-shadow: 0 8px 24px rgba(16,185,129,.2), 0 16px 48px rgba(0,0,0,.2); }

/* ── Thumbnail ── */
.ec-thumb {
    position: relative; overflow: hidden;
    aspect-ratio: 16/9; flex-shrink: 0;
}
.ec-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s;
}
.ec-card:hover .ec-thumb img { transform: scale(1.06); }

/* Category badge */
.ec-cat-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .68rem; font-weight: 700;
    background: rgba(10,6,24,.72); color: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    max-width: calc(100% - 60px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Completion % badge */
.ec-pct-badge {
    position: absolute; top: 10px; right: 10px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .72rem; font-weight: 800;
    backdrop-filter: blur(8px);
}
.ec-pct-badge--progress { background: #1C1514; color: #FFFFFF; }
.ec-pct-badge--done     { background: #A41034; color: #FFFFFF; }

/* Play overlay */
.ec-thumb-overlay {
    position: absolute; inset: 0;
    background: rgba(10,6,24,.38);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s;
}
.ec-card:hover .ec-thumb-overlay { opacity: 1; }
.ec-play-btn {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    color: #A41034; font-size: 1.1rem;
    transform: scale(.8); transition: transform .28s;
}
.ec-card:hover .ec-play-btn { transform: scale(1); }

/* ── Progress bar (on thumb bottom) ── */
.ec-thumb-progress {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 4px; background: rgba(255,255,255,.2);
}
.ec-thumb-progress-fill {
    height: 100%; border-radius: 0 2px 2px 0;
    transition: width .6s ease;
}
.ec-thumb-progress-fill--active   { background: linear-gradient(90deg, #A41034, #FFFFFF); }
.ec-thumb-progress-fill--complete  { background: linear-gradient(90deg, #10b981, #6ee7b7); }

/* ── Body ── */
.ec-body { padding: 16px 18px 12px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.ec-title {
    font-size: .95rem; font-weight: 700; color: #111827; line-height: var(--lh-snug);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-decoration: none; transition: color .2s;
}
.ec-title:hover { color: #A41034; }

.ec-instructor {
    display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.ec-instructor img {
    width: 24px; height: 24px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid #e5e7eb; flex-shrink: 0;
}
.ec-instructor-name {
    font-size: .77rem; font-weight: 600; color: #6b7280;
    transition: color .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ec-instructor:hover .ec-instructor-name { color: #A41034; }

/* Progress row */
.ec-progress-row { display: flex; flex-direction: column; gap: 5px; }
.ec-progress-label {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .72rem; font-weight: 600;
}
.ec-progress-label span:first-child { color: #9ca3af; }
.ec-progress-label span:last-child  { color: #374151; font-weight: 700; }
.ec-progress-track {
    height: 6px; border-radius: 6px; background: #f3f4f6; overflow: hidden;
}
.ec-progress-fill {
    height: 100%; border-radius: 6px; transition: width .6s ease;
}
.ec-progress-fill--active   { background: linear-gradient(90deg, #A41034, #FFFFFF); }
.ec-progress-fill--complete  { background: linear-gradient(90deg, #10b981, #6ee7b7); }

/* ── Footer ── */
.ec-footer {
    border-top: 1px solid #f3f4f6; padding: 11px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ec-footer-meta { display: flex; align-items: center; gap: 10px; }
.ec-meta-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .72rem; color: #9ca3af; font-weight: 500;
}
.ec-meta-chip i { font-size: .65rem; color: #d1d5db; }

/* Continue button */
.ec-continue-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 9px;
    background: #A41034;
    color: #fff; font-size: .76rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(164,16,52,.28);
    transition: opacity .2s, transform .2s;
}
.ec-continue-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* Certificate button */
.ec-cert-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 9px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff; font-size: .76rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(16,185,129,.28);
    transition: opacity .2s, transform .2s;
}
.ec-cert-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* Complete ribbon */
.ec-complete-ribbon {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: linear-gradient(90deg, #10b981, #6ee7b7);
}

/* ── Empty state ── */
.ec-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
}
.ec-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.ec-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.ec-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.ec-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.ec-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/enrolled-lessons / index ── */

/* ── Page header ── */
.ek-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.ek-header-left h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.ek-header-left p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.ek-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(164,16,52,.15); border: 1px solid rgba(164,16,52,.35);
    color: #FFFFFF; font-size: .78rem; font-weight: 600;
}
.ek-count-pill strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; color: #FFFFFF; }

/* ── Summary chips ── */
.ek-summary { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.ek-sum-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 10px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    font-size: .8rem; color: rgba(255,255,255,.6); font-weight: 500;
}
.ek-sum-chip strong { color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; }
.ek-chip--purple { border-color: rgba(164,16,52,.35); background: rgba(164,16,52,.12); }
.ek-chip--purple i, .ek-chip--purple strong { color: #FFFFFF; }
.ek-chip--green  { border-color: rgba(16,185,129,.3);  background: rgba(16,185,129,.08); }
.ek-chip--green i, .ek-chip--green strong { color: #6ee7b7; }
.ek-chip--soft   { border-color: rgba(167,139,250,.2); background: rgba(167,139,250,.06); }
.ek-chip--soft i, .ek-chip--soft strong { color: #FFFFFF; }

/* ── Grid ── */
.ek-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1199px) { .ek-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .ek-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.ek-card {
    background: #fff;
    border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
    transition: transform .25s, box-shadow .25s;
    position: relative;
}
.ek-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(164,16,52,.18), 0 16px 48px rgba(0,0,0,.22);
}
.ek-card--complete:hover { box-shadow: 0 8px 24px rgba(16,185,129,.18), 0 16px 48px rgba(0,0,0,.2); }

/* complete top ribbon */
.ek-ribbon {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: linear-gradient(90deg, #10b981, #6ee7b7); z-index: 2;
}

/* ── Thumbnail ── */
.ek-thumb {
    position: relative; overflow: hidden; aspect-ratio: 16/9; flex-shrink: 0;
}
.ek-thumb img {
    width: 100%; height: 100%; object-fit: cover; transition: transform .4s;
}
.ek-card:hover .ek-thumb img { transform: scale(1.06); }

/* Category badge top-left */
.ek-cat-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .68rem; font-weight: 700;
    background: rgba(10,6,24,.72); color: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    max-width: calc(100% - 64px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Progress % badge top-right */
.ek-pct-badge {
    position: absolute; top: 10px; right: 10px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .72rem; font-weight: 800; backdrop-filter: blur(8px);
}
.ek-pct-badge--progress { background: rgba(164,16,52,.82); color: #e9d5ff; }
.ek-pct-badge--done     { background: rgba(16,185,129,.85); color: #d1fae5; }

/* Duration badge bottom-left */
.ek-dur-badge {
    position: absolute; bottom: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px;
    background: rgba(164,16,52,.82); color: #e9d5ff;
    font-size: .7rem; font-weight: 700; backdrop-filter: blur(6px);
}
.ek-dur-badge i { font-size: .65rem; }

/* Play overlay */
.ek-overlay {
    position: absolute; inset: 0;
    background: rgba(10,6,24,.4);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s;
}
.ek-card:hover .ek-overlay { opacity: 1; }
.ek-play-btn {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    color: #A41034; font-size: 1.1rem;
    transform: scale(.8); transition: transform .28s;
}
.ek-card:hover .ek-play-btn { transform: scale(1); }

/* Thumb progress strip */
.ek-thumb-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.18); }
.ek-strip-fill  { height: 100%; border-radius: 0 2px 2px 0; transition: width .6s ease; }
.ek-strip--active   { background: linear-gradient(90deg, #A41034, #FFFFFF); }
.ek-strip--complete { background: linear-gradient(90deg, #10b981, #6ee7b7); }

/* ── Body ── */
.ek-body { padding: 16px 18px 12px; flex: 1; display: flex; flex-direction: column; gap: 9px; }

/* Parent course label */
.ek-course-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; color: #A41034; font-weight: 600;
    background: rgba(164,16,52,.07); border: 1px solid rgba(164,16,52,.15);
    padding: 3px 10px; border-radius: 6px; width: fit-content;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ek-course-label i { font-size: .65rem; flex-shrink: 0; }

.ek-title {
    font-size: .95rem; font-weight: 700; color: #111827; line-height: var(--lh-snug);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-decoration: none; transition: color .2s;
}
.ek-title:hover { color: #A41034; }

.ek-instructor {
    display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.ek-instructor img {
    width: 24px; height: 24px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid #e5e7eb; flex-shrink: 0;
}
.ek-instructor-name {
    font-size: .77rem; font-weight: 600; color: #6b7280;
    transition: color .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ek-instructor:hover .ek-instructor-name { color: #A41034; }

/* Progress bar */
.ek-progress-row { display: flex; flex-direction: column; gap: 5px; }
.ek-progress-label {
    display: flex; justify-content: space-between;
    font-size: .72rem; font-weight: 600;
}
.ek-progress-label span:first-child { color: #9ca3af; }
.ek-progress-label span:last-child  { color: #374151; font-weight: 700; }
.ek-progress-track { height: 6px; border-radius: 6px; background: #f3f4f6; overflow: hidden; }
.ek-progress-fill  { height: 100%; border-radius: 6px; transition: width .6s ease; }
.ek-progress-fill--active   { background: linear-gradient(90deg, #A41034, #FFFFFF); }
.ek-progress-fill--complete { background: linear-gradient(90deg, #10b981, #6ee7b7); }

/* ── Footer ── */
.ek-footer {
    border-top: 1px solid #f3f4f6; padding: 11px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ek-footer-meta { display: flex; align-items: center; gap: 10px; }
.ek-meta-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .72rem; color: #9ca3af; font-weight: 500;
}
.ek-meta-chip i { font-size: .65rem; color: #d1d5db; }

.ek-watch-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 9px;
    background: #A41034;
    color: #fff; font-size: .76rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.ek-watch-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

.ek-cert-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 9px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff; font-size: .76rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(16,185,129,.28);
    transition: opacity .2s, transform .2s;
}
.ek-cert-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── Empty state ── */
.ek-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
}
.ek-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.ek-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.ek-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.ek-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.ek-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/order / index ── */

/* ── Page header ── */
.or-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.or-header-left h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.or-header-left p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.or-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(164,16,52,.15); border: 1px solid rgba(164,16,52,.35);
    color: #FFFFFF; font-size: .78rem; font-weight: 600;
}
.or-count-pill strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; color: #FFFFFF; }

/* ── Summary chips ── */
.or-summary { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.or-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-radius: 14px;
    background: #fff; flex: 1; min-width: 130px;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 6px 20px rgba(0,0,0,.16);
    border-left: 4px solid;
}
.or-chip--purple { border-color: #A41034; }
.or-chip--green  { border-color: #10b981; }
.or-chip--gold   { border-color: #f59e0b; }
.or-chip--rose   { border-color: #f43f5e; }
.or-chip-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.or-chip--purple .or-chip-icon { background: rgba(164,16,52,.1); color: #A41034; }
.or-chip--green  .or-chip-icon { background: rgba(16,185,129,.1);  color: #10b981; }
.or-chip--gold   .or-chip-icon { background: rgba(245,158,11,.1);  color: #d97706; }
.or-chip--rose   .or-chip-icon { background: rgba(244,63,94,.1);   color: #f43f5e; }
.or-chip-val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 900; color: #111827; line-height: 1;
}
.or-chip-lbl {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: #9ca3af; margin-top: 2px;
}

/* ── Card ── */
.or-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18);
}

/* ── Card header ── */
.or-card-head {
    background: #A41034;
    padding: 18px 28px;
    display: flex; align-items: center; gap: 12px;
    position: relative; overflow: hidden;
}
 
.or-card-head-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: #fff; border: 1px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #1C1514; flex-shrink: 0; position: relative; z-index: 1;
}
.or-card-head-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 800; color: #fff; margin: 0;
    position: relative; z-index: 1;
}
.or-card-head-sub {
    font-size: 1rem; color: #fff; margin: 2px 0 0;
    position: relative; z-index: 1;
}

/* ── Table ── */
.or-table { width: 100%; border-collapse: collapse; }
.or-table thead th {
    font-size: .67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: #9ca3af;
    padding: 12px 20px; border-bottom: 2px solid #f3f4f6;
    background: #fafafa; white-space: nowrap;
}
.or-table tbody td {
    padding: 15px 20px; font-size: .875rem; color: #4b5563;
    border-bottom: 1px solid #f9fafb; vertical-align: middle;
    transition: background .15s;
}
.or-table tbody tr:last-child td { border-bottom: none; }
.or-table tbody tr:hover td { background: #faf5ff; }

.or-idx { color: #d1d5db; font-size: .78rem; font-weight: 600; width: 36px; }

/* Invoice cell */
.or-invoice-id {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .92rem; font-weight: 800; color: #A41034;
    letter-spacing: .01em;
}
.or-method {
    font-size: .74rem; color: #9ca3af; margin-top: 2px;
    display: flex; align-items: center; gap: 4px; text-transform: capitalize;
}
.or-method i { font-size: .68rem; color: #FFFFFF; }

/* Amount */
.or-amount {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 800; color: #111827;
}
.or-currency { font-size:1rem; color: #9ca3af; margin-left: 3px; font-weight: 500; }

/* Date */
.or-date { font-size: .8rem; color: #6b7280; white-space: nowrap; }
.or-date i { color: #FFFFFF; font-size: .7rem; margin-right: 4px; }

/* Status + Payment badges */
.or-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 100px;
    font-size: .71rem; font-weight: 700; white-space: nowrap;
}
.or-badge--success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.or-badge--warn    { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.or-badge--danger  { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }
.or-badge--info    { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }

/* Action buttons */
.or-actions { display: flex; align-items: center; gap: 7px; }
.or-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 13px; border-radius: 7px;
    font-size:1rem; font-weight: 700;
    text-decoration: none; border: 1.5px solid; transition: all .2s;
    white-space: nowrap;
}
.or-btn--receipt { background: #fff; border-color: rgba(245,158,11,.25); color: #A41034; }
.or-btn--receipt:hover { background: #fff; border-color: #f59e0b; color: #A41034; }
.or-btn--invoice { background: rgba(164,16,52,.07); border-color: rgba(164,16,52,.22); color: #A41034; }
.or-btn--invoice:hover { background: rgba(164,16,52,.15); border-color: #A41034; color: #A41034; }
.or-btn--pdf { background: linear-gradient(135deg,#A41034,#A41034); border-color: transparent; color: #fff !important; }
.or-btn--pdf:hover { background: linear-gradient(135deg,#1a0440,#A41034); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(164,16,52,.35); color: #fff !important; }

/* ── Pagination ── */
.or-pagination { padding: 16px 20px; border-top: 1px solid #f3f4f6; }
.or-pagination .pagination .page-link {
    border-radius: 8px; margin: 0 2px;
    color: #A41034; border-color: rgba(164,16,52,.2);
}
.or-pagination .pagination .page-item.active .page-link {
    background: #A41034; border-color: #A41034; color: #fff;
}
.or-pagination .pagination .page-link:hover { background: rgba(164,16,52,.08); }

/* ── Empty ── */
.or-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18);
}
.or-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.or-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.or-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.or-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.or-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/order / show ── */

.od-wrap { max-width: 860px; }

/* ── Card shell ── */
.od-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.18), 0 12px 40px rgba(0,0,0,.22);
    margin-bottom: 20px;
}

/* ── Header ── */
.od-header {
    background: linear-gradient(135deg, #100830 0%, #1c1250 50%, #0e1a40 100%);
    padding: 28px 32px;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    position: relative; overflow: hidden;
}
.od-header::before {
    content: ''; position: absolute;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(164,16,52,.4), transparent 65%);
    top: -130px; right: 40px; pointer-events: none;
}
.od-header::after {
    content: ''; position: absolute;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(6,182,212,.22), transparent 65%);
    bottom: -80px; left: 160px; pointer-events: none;
}
.od-header-left { position: relative; z-index: 1; }
.od-invoice-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: rgba(167,139,250,.7);
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.od-invoice-label::before { content:''; width:16px; height:2px; background:#FFFFFF; border-radius:2px; }
.od-invoice-num {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2rem; font-weight: 800; color: #fff;
    letter-spacing: -.02em; margin-bottom: 10px;
}
.od-meta-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.od-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 100px;
    font-size: .72rem; font-weight: 600; letter-spacing: .03em;
    backdrop-filter: blur(8px);
}
.od-pill i { font-size: .65rem; }
.od-pill--date   { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.15); }
.od-pill--ok     { background: rgba(16,185,129,.18); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.od-pill--warn   { background: rgba(245,158,11,.18); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.od-pill--danger { background: rgba(244,63,94,.18);  color: #fda4af; border: 1px solid rgba(244,63,94,.3); }
.od-pill--info   { background: rgba(6,182,212,.18);  color: #67e8f9; border: 1px solid rgba(6,182,212,.3); }

.od-header-right { position: relative; z-index: 1; text-align: right; }
.od-amount-label { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 4px; }
.od-amount-val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2.2rem; font-weight: 900; color: #FFFFFF;
    letter-spacing: -.02em;
}
.od-amount-cur { font-size: 1rem; color: rgba(255,255,255,.5); margin-left: 4px; }

/* ── Billing meta ── */
.od-billing {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 0;
    border-bottom: 1px solid #f0f0f5;
}
@media(max-width:767px){ .od-billing { grid-template-columns: 1fr; } }
.od-billing-block {
    padding: 24px 28px; border-right: 1px solid #f0f0f5;
}
.od-billing-block:last-child { border-right: none; }
.od-billing-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: #A41034;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.od-billing-label i { font-size: .7rem; }
.od-billing-val { font-size: .85rem; color: #374151; line-height: 1.75; }
.od-billing-val strong { color: #111827; display: block; margin-bottom: 2px; }

/* ── Table section ── */
.od-table-wrap { padding: 24px 28px; border-bottom: 1px solid #f0f0f5; }
.od-section-hd {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #9ca3af;
    margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.od-section-hd::after { content:''; flex:1; height:1px; background: linear-gradient(90deg, #e5e7eb, transparent); }

.od-table { width: 100%; border-collapse: collapse; }
.od-table thead th {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: #9ca3af;
    padding: 10px 14px; border-bottom: 2px solid #f3f4f6;
    background: #fafafa; white-space: nowrap;
}
.od-table tbody td {
    padding: 14px; font-size: .875rem; color: #4b5563;
    border-bottom: 1px solid #f9fafb; vertical-align: middle;
    transition: background .15s;
}
.od-table tbody tr:last-child td { border-bottom: none; }
.od-table tbody tr:hover td { background: #faf5ff; }
.od-table .od-idx { color: #d1d5db; font-size: .78rem; font-weight: 600; }
.od-table .od-course-name { color: #111827; font-weight: 600; font-size: .9rem; }
.od-table .od-lesson-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size:1rem; color: #A41034; margin-top: 4px;
    background: rgba(164,16,52,.07); padding: 2px 8px; border-radius: 6px;
}
.od-table .od-instr-name { color: #374151; font-size: .83rem; font-weight: 500; }
.od-table .od-instr-email { font-size:1rem; color: #9ca3af; }
.od-table .od-price-cell { font-weight: 700; color: #A41034; text-align: right; font-size: .9rem; }

/* ── Summary row ── */
.od-summary { padding: 24px 28px; display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid #f0f0f5; }

.od-payment-box {
    background: linear-gradient(135deg, #faf5ff, #eff6ff);
    border: 1px solid rgba(164,16,52,.15);
    border-radius: 12px; padding: 16px 20px; align-self: flex-start;
}
.od-payment-box-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #A41034; margin-bottom: 6px; }
.od-payment-box-val { color: #1f2937; font-size: .9rem; font-weight: 600; text-transform: capitalize; }

.od-totals { min-width: 260px; }
.od-totals table { width: 100%; border-collapse: collapse; }
.od-totals td { padding: 6px 0; font-size: .85rem; color: #6b7280; vertical-align: middle; }
.od-totals td + td { text-align: right; color: #374151; font-weight: 500; }
.od-totals .od-discount td + td { color: #10b981; }
.od-totals .od-divider td { padding-top: 12px; border-top: 1px dashed #e5e7eb; }
.od-totals .od-grand td { padding-top: 10px; border-top: 2px solid #e5e7eb; font-size: .95rem; font-weight: 700; color: #111827; }
.od-totals .od-grand td + td { color: #A41034; font-size: 1.05rem; }

/* ── Footer ── */
.od-footer { padding: 18px 28px; display: flex; justify-content: flex-end; background: #fafafa; }
.od-print-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 24px; border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff; font-size: .85rem; font-weight: 700;
    text-decoration: none; box-shadow: 0 4px 14px rgba(245,158,11,.3);
    transition: opacity .2s, transform .2s;
}
.od-print-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/order / invoice ── */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .invoice_area {
            font-family: "Plus Jakarta Sans", sans-serif;
        }

        .invoice_area table {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .invoice_area table tbody {
            width: 100%;
        }

        .invoice_area table tr {
            width: 100% !important;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .invoice_area table tr td {
            text-transform: capitalize;
            font-size: var(--fs-md);
        }

        .invoice_header {
            background: #f3f2f2;
            padding: 30px;
        }

        .invoice_header table tr td {
            width: 49%;
        }

        .invoice_header table tr td.left a {
            display: block;
            width: 160px;
        }

        .invoice_header table tr td.right h2 {
            text-transform: uppercase;
            font-size: var(--fs-3xl);
            font-weight: 600;
            line-height: initial;
            margin-bottom: 10px;
            text-align: right;
            color: #05092B;
        }

        .invoice_header table tr td.right h5 {
            font-size: var(--fs-md);
            text-align: right;
            color: #05092B;
        }

        .invoice_billing_info {
            padding: 30px;
        }

        .invoice_billing_info table tr td h5 {
            font-size: var(--fs-xl);
            font-weight: 700;
            text-transform: capitalize;
            margin-bottom: 10px;
            color: #05092B;
        }

        .invoice_billing_info table tr td p {
            color: #545353;
            font-weight: 400;
            font-size: var(--fs-md);
            /* margin-top: 10px; */
        }

        .invoice_billing_info .right p {
            text-align: right;
        }

        .invoice_billing_info .right p span {
            display: inline-block;
            width: 70px;
            text-align: right;
        }

        .invoice_billing_info .right p:last-child,
        .invoice_billing_info .right p:last-child span {
            font-weight: 600;
        }

        .invoice_billing_order {
            padding: 30px;
        }

        .invoice_billing_order table {
            border: 1px solid rgb(238, 238, 238);
        }

        .invoice_billing_order table thead {
            width: 100%;
        }

        .invoice_billing_order table thead tr {
            background: #f3f2f2;
        }

        .invoice_billing_order table thead tr th {
            background: #f3f2f2;
        }

        .invoice_billing_order table tr th,
        .invoice_billing_order table tr td {
            padding: 10px 20px;
            border-right: 1px solid rgb(238, 238, 238);
            border-bottom: 1px solid rgb(238, 238, 238);
            width: 25%;
            color: #05092B;
            text-align: left;
        }

        .sl-no {
            width: 10% !important;
        }

        .item {
            width: 40% !important;
        }

        .by {
            width: 35% !important;
        }

        .price {
            width: 15% !important;
        }

        .invoice_billing_info .right p span {
            display: inline-block;
            width: 150px !important;
            text-align: right;
        }

        .showingdetailorderhistory .subtotal,
        .showingdetailorderhistory .total {
            border-top: 1px solid #dee2e6;
            background-color: #f7f7f9;

        }

        .showingdetailorderhistory p {
            padding: 8px 10px;
        }

        .showingdetailorderhistory .invoice_billing_info tbody tr td {
            padding-right: 0px;
        }

/* ── frontend/student-dashboard/certificate / index ── */
        @foreach ($certificateItems as $item)
            #{{ $item->element_id }} {
                left: {{ $item->x_position }}px;
                top: {{ $item->y_position }}px;
            }
        @endforeach

        @page {
            size: 930px 600px;
            margin: 0;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .certificate-body {
            width: 930px !important;
            height: 600px !important;
            background: rgb(231, 231, 231);
            position: relative;
        }

        .draggable-element {
            position: absolute;

        }

        #title {
            font-size: var(--fs-xl);
            font-weight: bold;
            color: black;
            left: 50%;
            
            width: 730px;
            
        }

        #certificate_completion {
            font-size: var(--fs-xl);
            font-weight: bold;
            color: black;
            left: 50%;
            transform: translate(-50%);
            width: 730px;
            text-align: center;
        }

        #sub_title {
            font-size: var(--fs-lg);
            color: black;
            text-align: inherit;
            font-weight: inherit;
            left: 50%;
            transform: translate(-50%);
            width: 730px;
            text-align: center;
        }

        #description {
            font-size: var(--fs-md);
            color: black;
          
            font-weight: inherit;
            width: 730px;
            left: 50%;
            
        }

/* ── frontend/student-dashboard/certificate / certificate ── */

/* ── Page header ── */
.cert-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.cert-header h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.cert-header p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.cert-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(164,16,52,.15); border: 1px solid rgba(164,16,52,.35);
    color: #FFFFFF; font-size: .78rem; font-weight: 600;
}
.cert-count-pill strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; color: #FFFFFF; }

/* ── Grid ── */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1199px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .cert-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.cert-card {
    background: #fff;
    border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
    transition: transform .25s, box-shadow .25s;
}
.cert-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(164,16,52,.2), 0 16px 48px rgba(0,0,0,.22);
}

/* ── Certificate preview banner ── */
.cert-preview {
    position: relative;
    background: #A41034;
    padding: 28px 24px 22px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 150px; overflow: hidden; text-align: center;
}
.cert-preview::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.cert-preview::after {
    content: '';
    position: absolute;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(164,16,52,.45), transparent 65%);
    top: -100px; right: -60px; pointer-events: none;
}
/* gold border frame */
.cert-frame {
    position: absolute; inset: 8px;
    border: 1.5px solid rgba(167,139,250,.2);
    border-radius: 10px; pointer-events: none;
}
.cert-frame::before, .cert-frame::after {
    content: ''; position: absolute;
    width: 12px; height: 12px;
    border-color: rgba(167,139,250,.45);
    border-style: solid;
}
.cert-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; }
.cert-frame::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; }

.cert-seal {
    position: relative; z-index: 1;
    width: 56px; height: 56px; border-radius: 50%;
    background: #1C1514;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff;
    box-shadow: 0 4px 16px rgba(164,16,52,.5);
    margin-bottom: 12px; flex-shrink: 0;
}
.cert-preview-title {
    position: relative; z-index: 1;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .78rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #fff; margin-bottom: 5px;
}
.cert-preview-name {
    position: relative; z-index: 1;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 800; color: #fff;
    line-height: var(--lh-snug); display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* type badge */
.cert-type-badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    padding: 3px 10px; border-radius: 5px;
    font-size: .67rem; font-weight: 700; letter-spacing: .04em;
    background: #fff; color: #1C1514;
    backdrop-filter: blur(4px);
}

/* ── Card body ── */
.cert-body {
    padding: 16px 18px 14px; flex: 1;
    display: flex; flex-direction: column; gap: 8px;
}
.cert-course-name {
    font-size: .88rem; font-weight: 700; color: #111827;
    line-height: var(--lh-snug); display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cert-lesson-name {
    font-size: .78rem; color: #6b7280;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.cert-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem; color: #9ca3af; font-weight: 500;
}
.cert-meta i { color: #FFFFFF; font-size: .65rem; }

/* ── Footer ── */
.cert-footer {
    border-top: 1px solid #f3f4f6;
    padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cert-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .72rem; font-weight: 700;
    background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0;
}
.cert-status i { font-size: .65rem; }

.cert-view-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 9px;
    background: #A41034;
    color: #fff; font-size: .78rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.cert-view-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── Empty ── */
.cert-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
}
.cert-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.cert-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.cert-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.cert-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.cert-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── Pagination ── */
.cert-pagination { margin-top: 24px; }
.cert-pagination .pagination .page-link { border-radius: 8px; margin: 0 2px; color: #A41034; border-color: rgba(164,16,52,.2); background: rgba(255,255,255,.07); }
.cert-pagination .pagination .page-item.active .page-link { background: #A41034; border-color: #A41034; color: #fff; }
.cert-pagination .pagination .page-link:hover { background: rgba(164,16,52,.15); }

/* ── frontend/student-dashboard/quiz-attempts / index ── */

/* ── Page header ── */
.qa-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.qa-header-left h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.qa-header-left p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.qa-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(164,16,52,.15); border: 1px solid rgba(164,16,52,.35);
    color: #FFFFFF; font-size: .78rem; font-weight: 600;
}
.qa-count-pill strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; color: #FFFFFF; }

/* ── Summary chips ── */
.qa-summary { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.qa-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-radius: 14px;
    background: #fff; flex: 1; min-width: 130px;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 6px 20px rgba(0,0,0,.16);
    border-left: 4px solid;
}
.qa-chip--purple { border-color: #A41034; }
.qa-chip--green  { border-color: #10b981; }
.qa-chip--rose   { border-color: #f43f5e; }
.qa-chip--gold   { border-color: #f59e0b; }
.qa-chip-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.qa-chip--purple .qa-chip-icon { background: rgba(164,16,52,.1); color: #A41034; }
.qa-chip--green  .qa-chip-icon { background: rgba(16,185,129,.1);  color: #10b981; }
.qa-chip--rose   .qa-chip-icon { background: rgba(244,63,94,.1);   color: #f43f5e; }
.qa-chip--gold   .qa-chip-icon { background: rgba(245,158,11,.1);  color: #d97706; }
.qa-chip-body {}
.qa-chip-val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 900; color: #111827; line-height: 1;
}
.qa-chip-lbl {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: #9ca3af; margin-top: 2px;
}

/* ── Main card ── */
.qa-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18);
}

/* ── Card header ── */
.qa-card-head {
    background: #A41034;
    padding: 18px 28px;
    display: flex; align-items: center; gap: 12px;
    position: relative; overflow: hidden;
}
.qa-card-head::before {
    content: ''; position: absolute;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(164,16,52,.4), transparent 65%);
    top: -110px; right: 20px; pointer-events: none;
}
.qa-card-head-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(167,139,250,.18); border: 1px solid rgba(167,139,250,.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #FFFFFF; flex-shrink: 0; position: relative; z-index: 1;
}
.qa-card-head-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 800; color: #fff; margin: 0;
    position: relative; z-index: 1;
}
.qa-card-head-sub {
    font-size: .74rem; color: rgba(255,255,255,.4); margin: 2px 0 0;
    position: relative; z-index: 1;
}

/* ── Table ── */
.qa-table { width: 100%; border-collapse: collapse; }
.qa-table thead th {
    font-size: .67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: #9ca3af;
    padding: 12px 20px; border-bottom: 2px solid #f3f4f6;
    background: #fafafa; white-space: nowrap;
}
.qa-table tbody td {
    padding: 14px 20px; font-size: .875rem; color: #4b5563;
    border-bottom: 1px solid #f9fafb; vertical-align: middle;
    transition: background .15s;
}
.qa-table tbody tr:last-child td { border-bottom: none; }
.qa-table tbody tr:hover td { background: #faf5ff; }

/* Row number */
.qa-idx { color: #d1d5db; font-size: .78rem; font-weight: 600; width: 36px; }

/* Course + quiz stacked */
.qa-course-name { font-size: .88rem; font-weight: 700; color: #111827; margin-bottom: 3px; }
.qa-quiz-name   {
    font-size: .76rem; color: #A41034; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(164,16,52,.07); padding: 2px 8px; border-radius: 5px;
}
.qa-quiz-name i { font-size: .68rem; }

/* Score column */
.qa-score-wrap { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.qa-score-nums {
    display: flex; align-items: baseline; gap: 3px;
    font-family: "Plus Jakarta Sans", sans-serif;
}
.qa-score-mine  { font-size: 1.05rem; font-weight: 900; color: #111827; }
.qa-score-sep   { font-size: .78rem; color: #d1d5db; }
.qa-score-total { font-size: .8rem; font-weight: 600; color: #9ca3af; }
.qa-score-pct   { font-size: .7rem; font-weight: 700; color: #6b7280; }
.qa-score-track { height: 5px; border-radius: 5px; background: #f3f4f6; overflow: hidden; }
.qa-score-fill  { height: 100%; border-radius: 5px; transition: width .5s ease; }
.qa-score-fill--pass { background: linear-gradient(90deg, #A41034, #FFFFFF); }
.qa-score-fill--fail { background: linear-gradient(90deg, #f43f5e, #fda4af); }
.qa-score-fill--high { background: linear-gradient(90deg, #10b981, #6ee7b7); }

/* Status badge */
.qa-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 100px;
    font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    white-space: nowrap;
}
.qa-badge--pass { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.qa-badge--fail { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }

/* Date */
.qa-date { font-size: .8rem; color: #9ca3af; white-space: nowrap; }

/* View button */
.qa-view-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 8px;
    background: rgba(164,16,52,.08); border: 1.5px solid rgba(164,16,52,.22);
    color: #A41034; font-size: .76rem; font-weight: 700;
    text-decoration: none; transition: all .2s; white-space: nowrap;
}
.qa-view-btn:hover { background: rgba(164,16,52,.16); border-color: #A41034; color: #A41034; }

/* ── Pagination ── */
.qa-pagination { padding: 16px 20px; border-top: 1px solid #f3f4f6; }
.qa-pagination .pagination .page-link {
    border-radius: 8px; margin: 0 2px;
    color: #A41034; border-color: rgba(164,16,52,.2);
}
.qa-pagination .pagination .page-item.active .page-link {
    background: #A41034; border-color: #A41034; color: #fff;
}
.qa-pagination .pagination .page-link:hover { background: rgba(164,16,52,.08); }

/* ── Empty ── */
.qa-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18);
}
.qa-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.qa-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.qa-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.qa-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.qa-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/review / index ── */

/* ── Page header ── */
.rv-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.rv-header-left h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.rv-header-left p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.rv-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(164,16,52,.15); border: 1px solid rgba(164,16,52,.35);
    color: #FFFFFF; font-size: .78rem; font-weight: 600;
}
.rv-count-pill strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; color: #FFFFFF; }

/* ── Summary chips ── */
.rv-summary { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.rv-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-radius: 14px;
    background: #fff; flex: 1; min-width: 130px;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 6px 20px rgba(0,0,0,.16);
    border-left: 4px solid;
}
.rv-chip--purple { border-color: #A41034; }
.rv-chip--green  { border-color: #10b981; }
.rv-chip--gold   { border-color: #f59e0b; }
.rv-chip-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.rv-chip--purple .rv-chip-icon { background: rgba(164,16,52,.1); color: #A41034; }
.rv-chip--green  .rv-chip-icon { background: rgba(16,185,129,.1);  color: #10b981; }
.rv-chip--gold   .rv-chip-icon { background: rgba(245,158,11,.1);  color: #d97706; }
.rv-chip-val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 900; color: #111827; line-height: 1;
}
.rv-chip-lbl {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: #9ca3af; margin-top: 2px;
}

/* ── Main card ── */
.rv-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18);
}

/* ── Card header ── */
.rv-card-head {
    background: #A41034;
    padding: 18px 28px;
    display: flex; align-items: center; gap: 12px;
    position: relative; overflow: hidden;
}
.rv-card-head::before {
    content: ''; position: absolute;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(164,16,52,.4), transparent 65%);
    top: -110px; right: 20px; pointer-events: none;
}
.rv-card-head-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(167,139,250,.18); border: 1px solid rgba(167,139,250,.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #FFFFFF; flex-shrink: 0; position: relative; z-index: 1;
}
.rv-card-head-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 800; color: #fff; margin: 0;
    position: relative; z-index: 1;
}
.rv-card-head-sub {
    font-size: .74rem; color: rgba(255,255,255,.4); margin: 2px 0 0;
    position: relative; z-index: 1;
}

/* ── Table ── */
.rv-table { width: 100%; border-collapse: collapse; }
.rv-table thead th {
    font-size: .67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: #9ca3af;
    padding: 12px 20px; border-bottom: 2px solid #f3f4f6;
    background: #fafafa; white-space: nowrap;
}
.rv-table tbody td {
    padding: 15px 20px; font-size: .875rem; color: #4b5563;
    border-bottom: 1px solid #f9fafb; vertical-align: middle;
    transition: background .15s;
}
.rv-table tbody tr:last-child td { border-bottom: none; }
.rv-table tbody tr:hover td { background: #faf5ff; }

/* Row number */
.rv-idx { color: #d1d5db; font-size: .78rem; font-weight: 600; width: 36px; }

/* Course / lesson cell */
.rv-course-name {
    font-size: .88rem; font-weight: 700; color: #111827; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-lesson-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .74rem; color: #A41034; font-weight: 600;
    background: rgba(164,16,52,.07); border: 1px solid rgba(164,16,52,.12);
    padding: 2px 9px; border-radius: 5px;
}

/* Type badge */
.rv-type-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 6px;
    font-size: .72rem; font-weight: 700;
}
.rv-type-badge--course { background: rgba(164,16,52,.08); color: #A41034; border: 1px solid rgba(164,16,52,.15); }
.rv-type-badge--lesson { background: rgba(6,182,212,.08);  color: #0891b2; border: 1px solid rgba(6,182,212,.15); }

/* Star rating */
.rv-stars { display: inline-flex; align-items: center; gap: 2px; }
.rv-stars i { font-size: .82rem; }
.rv-stars i.filled { color: #f59e0b; }
.rv-stars i.empty  { color: #e5e7eb; }
.rv-rating-val { font-size: .78rem; font-weight: 700; color: #374151; margin-left: 5px; }

/* Status badge */
.rv-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 100px;
    font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.rv-status--approved { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.rv-status--pending  { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }

/* Action buttons */
.rv-actions { display: flex; align-items: center; gap: 8px; }
.rv-view-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 13px; border-radius: 7px;
    background: rgba(164,16,52,.08); border: 1.5px solid rgba(164,16,52,.22);
    color: #A41034; font-size: .76rem; font-weight: 700;
    text-decoration: none; transition: all .2s;
}
.rv-view-btn:hover { background: rgba(164,16,52,.16); border-color: #A41034; color: #A41034; }
.rv-del-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 13px; border-radius: 7px;
    background: rgba(244,63,94,.07); border: 1.5px solid rgba(244,63,94,.2);
    color: #e11d48; font-size: .76rem; font-weight: 700;
    text-decoration: none; transition: all .2s;
}
.rv-del-btn:hover { background: rgba(244,63,94,.15); border-color: #f43f5e; color: #be123c; }

/* ── Pagination ── */
.rv-pagination { padding: 16px 20px; border-top: 1px solid #f3f4f6; }
.rv-pagination .pagination .page-link {
    border-radius: 8px; margin: 0 2px;
    color: #A41034; border-color: rgba(164,16,52,.2);
}
.rv-pagination .pagination .page-item.active .page-link {
    background: #A41034; border-color: #A41034; color: #fff;
}
.rv-pagination .pagination .page-link:hover { background: rgba(164,16,52,.08); }

/* ── Empty ── */
.rv-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18);
}
.rv-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.rv-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.rv-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.rv-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.rv-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/wish-lists / index ── */

/* ── Page header ── */
.wl-page-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.wl-page-title {
    display: flex; align-items: center; gap: 12px;
}
.wl-page-title h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0;
}
.wl-count-badge {
    display: inline-flex; align-items: center;
    padding: 3px 12px; border-radius: 100px;
    background: rgba(164,16,52,.25); border: 1px solid rgba(164,16,52,.4);
    color: #FFFFFF; font-size: .78rem; font-weight: 700;
}
.wl-page-sub { font-size: .82rem; color: rgba(255,255,255,.4); margin-top: 3px; }

/* ── Grid ── */
.wl-grid {
    margin-top: 20px !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1199px) { .wl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .wl-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.wl-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.16), 0 8px 28px rgba(0,0,0,.18);
    display: flex; flex-direction: column;
    transition: transform .25s, box-shadow .25s;
}
.wl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(164,16,52,.18), 0 16px 48px rgba(0,0,0,.22);
}

/* ── Thumbnail ── */
.wl-thumb {
    position: relative; overflow: hidden;
    aspect-ratio: 16/9; flex-shrink: 0;
}
.wl-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s;
}
.wl-card:hover .wl-thumb img { transform: scale(1.05); }

/* Category badge on thumb */
.wl-cat-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .7rem; font-weight: 700; letter-spacing: .03em;
    background: #A41034; color: #fff;
    backdrop-filter: blur(6px);
    max-width: calc(100% - 56px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Remove button */
.wl-remove-btn {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(244,63,94,.85); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .8rem;
    backdrop-filter: blur(6px);
    transition: background .2s, transform .2s;
}
.wl-remove-btn:hover { background: #f43f5e; transform: scale(1.1); }

/* Play overlay */
.wl-thumb-overlay {
    position: absolute; inset: 0;
    background: rgba(10,6,24,.4);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s;
}
.wl-card:hover .wl-thumb-overlay { opacity: 1; }
.wl-play-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    color: #A41034; font-size: 1.1rem;
    transform: scale(.85); transition: transform .3s;
}
.wl-card:hover .wl-play-icon { transform: scale(1); }

/* ── Card body ── */
.wl-body { padding: 16px 18px 14px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.wl-title {
    font-size: .95rem; font-weight: 700; color: #111827;
    line-height: var(--lh-snug); display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-decoration: none; transition: color .2s;
}
.wl-title:hover { color: #A41034; }

/* Instructor row */
.wl-instructor {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none;
}
.wl-instructor img {
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid #e5e7eb;
    flex-shrink: 0;
}
.wl-instructor-name {
    font-size: .78rem; font-weight: 600; color: #6b7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .2s;
}
.wl-instructor:hover .wl-instructor-name { color: #A41034; }

/* Rating + Price row */
.wl-meta-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.wl-rating {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .78rem; font-weight: 700; color: #d97706;
}
.wl-rating i { font-size: .72rem; }
.wl-price {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 800; color: #A41034;
}

/* ── Card footer ── */
.wl-footer {
    border-top: 1px solid #f3f4f6;
    padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.wl-footer-meta {
    display: flex; align-items: center; gap: 12px;
}
.wl-meta-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .74rem; color: #9ca3af; font-weight: 500;
}
.wl-meta-chip i { font-size: .68rem; color: #d1d5db; }

.wl-cart-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 9px;
    background: #A41034;
    color: #fff; font-size: .78rem; font-weight: 700;
    border: none; cursor: pointer;
    box-shadow: 0 3px 10px rgba(164,16,52,.35);
    transition: background .2s, transform .2s, box-shadow .2s;
    text-decoration: none; white-space: nowrap;
}
.wl-cart-btn:hover {
    background: #3d0d90; transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(164,16,52,.45);
    color: #fff;
}

/* ── Empty state ── */
.wl-empty-wrap {
    background: #fff;
    border-radius: 18px;
    padding: 72px 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.16), 0 8px 28px rgba(0,0,0,.18);
}
.wl-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.wl-empty-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px;
}
.wl-empty-text { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.wl-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.wl-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/favorite / index ── */

/* ── Page header ── */
.fav-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.fav-header-left h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.fav-header-left p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.fav-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(164,16,52,.15); border: 1px solid rgba(164,16,52,.35);
    color: #FFFFFF; font-size: .78rem; font-weight: 600;
}
.fav-count-pill strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; color: #FFFFFF; }

/* ── Grid ── */
.fav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1199px) { .fav-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .fav-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.fav-card {
    background: #fff;
    border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
    transition: transform .25s, box-shadow .25s;
    position: relative;
}
.fav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(164,16,52,.2), 0 16px 48px rgba(0,0,0,.22);
}

/* ── Thumbnail ── */
.fav-thumb {
    position: relative; overflow: hidden;
    aspect-ratio: 16/9; flex-shrink: 0;
}
.fav-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s;
}
.fav-card:hover .fav-thumb img { transform: scale(1.05); }

/* Category badge */
.fav-cat-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .68rem; font-weight: 700;
    background: rgba(10,6,24,.72); color: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    max-width: calc(100% - 56px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Remove button */
.fav-remove-btn {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(244,63,94,.82); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .82rem;
    backdrop-filter: blur(6px);
    transition: background .2s, transform .2s;
    z-index: 2;
}
.fav-remove-btn:hover { background: #f43f5e; transform: scale(1.1); }

/* Price badge bottom-left */
.fav-price-badge {
    position: absolute; bottom: 10px; left: 10px;
    padding: 4px 11px; border-radius: 6px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .8rem; font-weight: 800;
    background: rgba(164,16,52,.88); color: #e9d5ff;
    backdrop-filter: blur(6px);
}

/* Play overlay */
.fav-overlay {
    position: absolute; inset: 0;
    background: rgba(10,6,24,.38);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s;
}
.fav-card:hover .fav-overlay { opacity: 1; }
.fav-play-btn {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    color: #A41034; font-size: 1.1rem;
    transform: scale(.82); transition: transform .28s;
}
.fav-card:hover .fav-play-btn { transform: scale(1); }

/* ── Body ── */
.fav-body {
    padding: 16px 18px 12px; flex: 1;
    display: flex; flex-direction: column; gap: 10px;
}

.fav-title {
    font-size: .95rem; font-weight: 700; color: #111827; line-height: var(--lh-snug);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-decoration: none; transition: color .2s;
}
.fav-title:hover { color: #A41034; }

/* Instructor + rating */
.fav-instructor {
    display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.fav-instructor img {
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid #e5e7eb; flex-shrink: 0;
}
.fav-instructor-name {
    font-size: .78rem; font-weight: 600; color: #6b7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .2s;
}
.fav-instructor:hover .fav-instructor-name { color: #A41034; }
.fav-rating {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 3px;
    font-size:1rem; font-weight: 700; color: #d97706;
}
.fav-rating i { font-size: .68rem; }

/* ── Footer ── */
.fav-footer {
    border-top: 1px solid #f3f4f6;
    padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fav-meta { display: flex; align-items: center; gap: 12px; }
.fav-meta-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .74rem; color: #9ca3af; font-weight: 500;
}
.fav-meta-chip i { font-size: .68rem; color: #FFFFFF; }

.fav-cart-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 9px;
    background: #A41034;
    color: #fff; font-size: .78rem; font-weight: 700;
    border: none; cursor: pointer; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
    text-decoration: none;
}
.fav-cart-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── Empty ── */
.fav-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
}
.fav-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.fav-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.fav-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.fav-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.fav-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* -- Filter & Sort bar -- compact, icon-free pill style matching the
   house convention (see instructor-courses-redesign.css's .oc-filters):
   pill inputs, 100px radius, no icons, 6px 10px padding, 11-11.5px font,
   single non-wrapping row with horizontal-scroll fallback. -- */
.fav-page .fav-filters {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}
.fav-page .fav-filters__head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.fav-page .fav-filters__title {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #A41034;
}
.fav-page .fav-filters__active-pill {
    font-size: 10px; font-weight: 700; color: #A41034;
    background: rgba(164,16,52,.07); padding: 2px 8px; border-radius: 100px;
}
.fav-page .fav-filters__row {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; padding-bottom: 4px; margin-bottom: -4px;
}
.fav-page .fav-filters__row::-webkit-scrollbar { height: 5px; }
.fav-page .fav-filters__row::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
.fav-page .fav-filters__divider {
    flex-shrink: 0; width: 1px; align-self: stretch; background: #e5e7eb; margin: 2px 0;
}
.fav-page .fav-filter-search {
    position: relative; flex: 1 1 200px; min-width: 140px;
}
.fav-page .fav-filter-search input {
    width: 100%; padding: 6px 10px; border: 1.5px solid #e5e7eb;
    border-radius: 100px; font-size: 11.5px; color: #111827;
    background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
}
.fav-page .fav-filter-search input:focus { border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.08); }
.fav-page .fav-filter-search input::placeholder { color: #9ca3af; }
.fav-page .fav-filter-group { position: relative; flex-shrink: 0; }
.fav-page .fav-filter-select {
    padding: 6px 22px 6px 10px; border: 1.5px solid #e5e7eb; border-radius: 100px;
    font-size: 11px; font-weight: 600; color: #374151; background-color: #fff;
    cursor: pointer; outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239CA3AF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center;
}
.fav-page .fav-filter-select:focus, .fav-page .fav-filter-select:hover { border-color: #A41034; }
.fav-page .fav-filter-select--sort { color: #A41034; border-color: rgba(164,16,52,.3); background-color: rgba(164,16,52,.06); }
.fav-page .fav-filter-reset {
    display: inline-flex; align-items: center; flex-shrink: 0;
    padding: 6px 12px; border-radius: 100px; border: 1.5px solid #e5e7eb;
    background: #fff; color: #6b7280; font-size: 11px; font-weight: 600;
    cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
.fav-page .fav-filter-reset:hover { background: rgba(164,16,52,.06); border-color: #A41034; color: #A41034; }
@media (max-width: 900px) {
    .fav-page .fav-filters__row { flex-direction: column; align-items: stretch; }
    .fav-page .fav-filters__divider { display: none; }
    .fav-page .fav-filter-reset { justify-content: center; }
}

/* -- Pagination -- single flex bar, page numbers on the left and
   "Showing X-Y of Z" on the right; borderless circular page numbers with
   a maroon fill on hover/active, matching the reference My Sales
   pagination (my-sales-redesign.css's .ms-pagination) exactly. -- */
.fav-page .fav-pagination {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; padding: 16px 4px 4px; margin-top: 6px;
    border-top: 1px solid #e5e7eb;
}
.fav-page .fav-pagination__count { font-size: 12.5px; color: #6b7280; white-space: nowrap; }
.fav-page .fav-pagination__count strong { color: #111827; }
.fav-page .fav-pagination .pagination {
    display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.fav-page .fav-pagination .page-item .page-link {
    display: flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px; border-radius: 9px; background: #fff; border: 1px solid #e5e7eb;
    color: #111827; font-weight: 600; font-size: 13px; text-decoration: none;
    transition: all .15s; box-shadow: none;
}
.fav-page .fav-pagination .page-item .page-link:hover { border-color: #A41034; color: #A41034; }
.fav-page .fav-pagination .page-item.active .page-link { background: #A41034; border-color: #A41034; color: #fff; box-shadow: none; }
.fav-page .fav-pagination .page-item.disabled .page-link {
    background: #f9fafb; color: #9ca3af; opacity: .45; cursor: not-allowed; pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   MYSHORTS FORM — Premium Executive-Learning Redesign
   Colors: #A41034 · #1C1514 · rgba(0,0,0,0.85) · #FFFFFF
   ══════════════════════════════════════════════════════════════ */

.msf-wrap {
    max-width: 720px;
    margin: 0 auto;
}

/* ── Card shell ── */
.msf-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0,0,0,.06),
        0 8px 24px rgba(0,0,0,.08),
        0 32px 64px rgba(0,0,0,.10);
    border: 1px solid #FFFFFF;
}

/* ── Header ── */
.msf-header {
    background: rgb(34,34,34);
    padding: 30px 36px;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid #A41034;
}

.msf-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255,255,255,.018) 3px,
        rgba(255,255,255,.018) 4px
    );
    pointer-events: none;
}

.msf-header::after {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    right: -80px;
    top: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(164,16,52,.28) 0%, transparent 65%);
    pointer-events: none;
}

.msf-header-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: rgba(164,16,52,.16);
    border: 1px solid rgba(164,16,52,.32);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #f87171;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.msf-header-icon i { color: #f87171 !important; }

.msf-header-text {
    position: relative;
    z-index: 1;
    flex: 1;
}

.msf-header-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    letter-spacing: -0.015em;
}

.msf-header-sub {
    font-size: .775rem;
    color: rgba(255,255,255,.38);
    margin: 0;
    letter-spacing: .03em;
}

/* ── Body ── */
.msf-body {
    padding: 36px;
    background: #fff;
}

/* ── Field group ── */
.msf-fg { margin-bottom: 24px; }

.msf-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 8px;
}

.msf-label i {
    color: #A41034 !important;
    font-size: .7rem !important;
}

.msf-label-req {
    color: #A41034;
    font-size: .72rem;
    font-weight: 800;
}

/* ── Inputs ── */
.msf-input,
.msf-textarea,
.msf-select {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #FFFFFF;
    border-radius: 10px;
    background: #fafaf9;
    color: rgb(34,34,34);
    font-size: .9rem;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
}

.msf-input::placeholder,
.msf-textarea::placeholder { color: #c2bdb6; }

.msf-input:focus,
.msf-textarea:focus,
.msf-select:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.08);
    background: #fff;
}

.msf-textarea { min-height: 120px; resize: vertical; line-height: var(--lh-normal); }

.msf-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A41034' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

/* ── Current file badge ── */
.msf-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 9px;
    background: rgba(164,16,52,.06);
    border: 1.5px solid rgba(164,16,52,.2);
    color: #A41034;
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s;
    width: fit-content;
}

.msf-file-badge:hover {
    background: rgba(164,16,52,.12);
    border-color: rgba(164,16,52,.38);
    color: #A41034;
    text-decoration: none;
}

.msf-file-badge i { font-size: .85rem; }

/* ── Dropzone ── */
.msf-dropzone.dropzone {
    background: #fafaf9 !important;
    border: 2px dashed #d4d0cb !important;
    border-radius: 12px !important;
    min-height: 120px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .22s, background .22s;
}

.msf-dropzone.dropzone:hover {
    border-color: #A41034 !important;
    background: rgba(164,16,52,.03) !important;
}

.msf-dropzone .dz-message { color: #a8a09a; font-size: .875rem; }
.msf-dropzone .dz-message .dz-button { color: #a8a09a; background: none; border: none; font-size: .875rem; }

/* ── Divider ── */
.msf-divider {
    height: 1px;
    background: #FFFFFF;
    margin: 32px 0;
}

/* ── Actions ── */
.msf-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.msf-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 34px;
    border-radius: 10px;
    background: #A41034;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    letter-spacing: .03em;
    box-shadow: 0 4px 18px rgba(164,16,52,.30);
    transition: background .2s, transform .15s, box-shadow .2s;
}

.msf-submit-btn:hover {
    background: #8c0d2a;
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(164,16,52,.40);
    color: #fff;
}

.msf-submit-btn:active { transform: translateY(0); }

.msf-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 10px;
    border: 1.5px solid #FFFFFF;
    background: #fff;
    color: #8a8a8a;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}

.msf-cancel-btn:hover {
    border-color: rgb(34,34,34);
    color: rgb(34,34,34);
    background: #fafaf9;
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════
   MYSHORTSINDEX — Premium Executive-Learning Redesign
   Matches: announcement/form.blade.php design system
   Colors: #A41034 · #1C1514 · rgba(0,0,0,0.85) · #FFFFFF
   ══════════════════════════════════════════════════════════════ */

/* ── Top row: stats + upload button ── */
.msi-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

/* ── Stats strip ── */
.msi-stats-strip {
    display: flex;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #FFFFFF;
    overflow: hidden;
}

.msi-stat-item {
    padding: 14px 28px;
    text-align: center;
    border-right: 1px solid #FFFFFF;
}

.msi-stat-item:last-child { border-right: none; }

.msi-stat-val {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    color: #A41034;
    line-height: 1;
}

.msi-stat-lbl {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #a8a09a;
    margin-top: 4px;
}

/* ── Upload button ── */
.msi-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 10px;
    background: #A41034;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.30);
    transition: background .2s, transform .15s, box-shadow .2s;
}

.msi-upload-btn:hover {
    background: #8c0d2a;
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(164,16,52,.40);
    color: #fff;
    text-decoration: none;
}

.msi-upload-btn:active { transform: translateY(0); }

/* ── Table (inside ann-card) ── */
.msi-table { width: 100%; border-collapse: collapse; }

.msi-table thead th {
    font-size: .67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #8a8a8a;
    padding: 14px 20px;
    border-bottom: 1.5px solid #FFFFFF;
    background: #fafaf9;
    white-space: nowrap;
}

.msi-table tbody td {
    padding: 14px 20px;
    font-size: .875rem;
    color: rgb(34,34,34);
    border-bottom: 1px solid #f0efed;
    vertical-align: middle;
    transition: background .15s;
}

.msi-table tbody tr:last-child td { border-bottom: none; }
.msi-table tbody tr:hover td { background: #fdf8f8; }

.msi-table .msi-num {
    color: #c2bdb6;
    font-size: .78rem;
    font-weight: 600;
    width: 40px;
}

.msi-table .msi-title { color: rgb(34,34,34); font-weight: 600; }
.msi-table .msi-desc { color: #8a8a8a; font-size: .82rem; max-width: 200px; }

.msi-klip-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(164,16,52,.07);
    color: #A41034;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ── Action buttons (icon-only, matches ia-btn style) ── */
.msi-actions { display: flex; align-items: center; gap: 8px; }

.msi-btn {
    width: 33px;
    height: 33px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid;
    transition: all .18s;
    flex-shrink: 0;
}

.msi-btn--view   { background: rgba(14,116,144,.07); border-color: rgba(14,116,144,.2); color: #0e7490; }
.msi-btn--view:hover   { background: rgba(14,116,144,.15); border-color: #0e7490; color: #0e7490; text-decoration: none; }
.msi-btn--edit   { background: rgba(164,16,52,.07); border-color: rgba(164,16,52,.2); color: #A41034; }
.msi-btn--edit:hover   { background: rgba(164,16,52,.15); border-color: #A41034; color: #8c0d2a; text-decoration: none; }
.msi-btn--delete { background: rgba(225,29,72,.07); border-color: rgba(225,29,72,.2); color: #e11d48; }
.msi-btn--delete:hover { background: rgba(225,29,72,.15); border-color: #e11d48; color: #be123c; }

/* ── Empty state ── */
.msi-empty { padding: 64px 24px; text-align: center; }

.msi-empty-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: rgba(164,16,52,.07);
    border: 1px solid rgba(164,16,52,.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #A41034;
    margin: 0 auto 18px;
}

.msi-empty-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: rgb(34,34,34);
    margin-bottom: 8px;
}

.msi-empty-text { color: #a8a09a; font-size: .875rem; margin-bottom: 22px; }

/* ── Pagination ── */
.msi-pagination { padding: 16px 20px; border-top: 1px solid #FFFFFF; }

.msi-pagination .pagination .page-link {
    border-radius: 8px;
    margin: 0 2px;
    color: #A41034;
    border-color: #FFFFFF;
}

.msi-pagination .pagination .page-item.active .page-link {
    background: #A41034;
    border-color: #A41034;
    color: #fff;
}

/* ── Filter bar ── */
.msi-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 16px 20px;
    background: #fafaf9;
    border-bottom: 1.5px solid #FFFFFF;
    flex-wrap: wrap;
}

.msi-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 130px;
}

.msi-filter-search-group { flex: 2; min-width: 200px; }

.msi-filter-label {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #a8a09a;
    line-height: 1;
}

.msi-filter-search-wrap,
.msi-filter-select-wrap,
.msi-filter-date-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.msi-filter-ico {
    position: absolute;
    left: 11px;
    color: #c2bdb6;
    font-size: .72rem;
    pointer-events: none;
    z-index: 1;
}

.msi-filter-input,
.msi-filter-select,
.msi-filter-date {
    width: 100%;
    padding: 9px 12px 9px 32px;
    border: 1.5px solid #FFFFFF;
    border-radius: 9px;
    background: #fff;
    color: rgb(34,34,34);
    font-size: .83rem;
    font-family: inherit;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    height: 38px;
}

.msi-filter-input::placeholder { color: #c2bdb6; }

.msi-filter-input:focus,
.msi-filter-select:focus,
.msi-filter-date:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.07);
    background: #fff;
}

.msi-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A41034' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
}

.msi-filter-date { cursor: pointer; }

.msi-filter-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 1px;
    padding-left: 16px;
    margin-left: auto;
    flex-shrink: 0;
    align-self: flex-end;
    border-left: 1.5px solid rgba(0,0,0,.08);
}

.msi-filter-count {
    font-size: .78rem;
    font-weight: 600;
    color: #a8a09a;
    white-space: nowrap;
    line-height: 1;
}

.msi-filter-count #msiVisibleCount {
    color: #A41034;
    font-size: .95rem;
    font-weight: 800;
}

.msi-filter-count-label { margin-left: 3px; }

.msi-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: 8px;
    border: 1.5px solid rgba(164,16,52,.22);
    background: rgba(164,16,52,.06);
    color: #A41034;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, border-color .18s;
    font-family: inherit;
    line-height: 1;
    height: 32px;
}

.msi-filter-clear:hover {
    background: rgba(164,16,52,.13);
    border-color: #A41034;
}

/* ── Date badge ── */
.msi-date-col { white-space: nowrap; }

.msi-date-badge {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.msi-date-day {
    font-size: .82rem;
    font-weight: 700;
    color: rgb(34,34,34);
    line-height: 1;
}

.msi-date-year {
    font-size: .68rem;
    color: #a8a09a;
    font-weight: 500;
    line-height: 1;
}

.msi-null-dash { color: #c2bdb6; }

/* ── No-results filter state ── */
.msi-no-results-state {
    padding: 48px 20px;
    text-align: center;
}

.msi-no-results-icon {
    font-size: 2rem;
    color: #c2bdb6;
    display: block;
    margin-bottom: 12px;
}

.msi-no-results-title {
    font-size: 1rem;
    font-weight: 700;
    color: rgb(34,34,34);
    margin: 0 0 6px;
}

.msi-no-results-sub {
    font-size: .83rem;
    color: #a8a09a;
    margin: 0;
}

/* ── frontend/pages / become-instructor ── */

/* ── Page shell ── */
.bi-page {
    min-height: calc(100vh - 82px);
    background: linear-gradient(145deg, #0d0b1e 0%, #1a1040 40%, #0d1b3e 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 52px 0; position: relative; overflow: hidden;
}
.bi-orb {
    position: absolute; border-radius: 50%;
    filter: blur(100px); pointer-events: none;
}
.bi-orb-1 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(164,16,52,.18), transparent 65%); top: -250px; left: -200px; }
.bi-orb-2 { width: 550px; height: 550px; background: radial-gradient(circle, rgba(37,99,235,.15), transparent 65%); bottom: -200px; right: -150px; }
.bi-dots  {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 32px 32px; pointer-events: none;
}

/* ── Card wrap ── */
.bi-wrap {
    display: flex; width: 86%; max-width: 1180px;
    min-height: 680px; border-radius: 22px; overflow: hidden;
    position: relative; z-index: 2;
    box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 32px 80px rgba(0,0,0,.55), 0 8px 24px rgba(164,16,52,.15);
}
@media(max-width:1100px) { .bi-wrap { width: 92%; } }
@media(max-width:900px)  { .bi-wrap { width: 96%; flex-direction: column; border-radius: 18px; } }

/* ══ LEFT — Form ══ */
.bi-left {
    flex: 0 0 52%; max-width: 52%;
    background: #fff;
    display: flex; flex-direction: column; justify-content: center;
    padding: 48px 52px; overflow-y: auto;
}
@media(max-width:900px) { .bi-left { flex: none; max-width: 100%; padding: 36px 28px; } }

/* Logo */
.bi-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-bottom: 32px; }
.bi-logo img { max-height: 30px; }
.bi-logo-text {
    font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.5px;
    background: linear-gradient(135deg,#A41034,#2563eb);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Heading */
.bi-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.2); border-radius: 100px;
    padding: 5px 14px; font-size: 11.5px; font-weight: 600; color: #A41034;
    margin-bottom: 16px; width: fit-content;
}
.bi-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.85rem; font-weight: 800; color: #0f0c29; line-height: 1.15; margin: 0 0 8px; }
.bi-sub   { font-size: var(--fs-sm); color: #6b7280; margin: 0 0 24px; line-height: var(--lh-normal); }

/* Quick benefits */
.bi-perks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.bi-perk {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 7px;
    background: #FDF5F6; border: 1px solid #F6D9DF;
    font-size: var(--fs-xs); font-weight: 600; color: #A41034;
}
.bi-perk i { font-size: var(--fs-xs); }

/* Alert */
.bi-alert {
    padding: 12px 16px; border-radius: 10px; border-left: 4px solid;
    font-size: var(--fs-sm); line-height: 1.55; margin-bottom: 20px;
}
.bi-alert--warn  { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.bi-alert--error { background: #fef2f2; border-color: #f43f5e; color: #9f1239; }

/* Divider */
.bi-divider { height: 1px; background: linear-gradient(90deg, transparent, #e5e7eb, transparent); margin: 20px 0; }
.bi-section-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #9ca3af;
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.bi-section-label::after { content:''; flex:1; height:1px; background: linear-gradient(90deg,#e5e7eb,transparent); }

/* Form row */
.bi-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width:575px) { .bi-row-2 { grid-template-columns: 1fr; } }

/* Field group */
.bi-fg { margin-bottom: 16px; }
.bi-label {
    display: flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 700; color: #374151;
    letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px;
}
.bi-label-req { color: #ef4444; }
.bi-label-opt { font-size: 10px; color: #9ca3af; font-weight: 500; text-transform: none; letter-spacing: 0; }

.bi-input, .bi-textarea, .bi-select, .bi-file {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid #e5e7eb; border-radius: 10px;
    background: #fafafa; color: #111827;
    font-size: var(--fs-sm); font-family:"Plus Jakarta Sans", sans-serif; outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
}
.bi-input::placeholder, .bi-textarea::placeholder { color: #d1d5db; }
.bi-input:focus, .bi-textarea:focus, .bi-select:focus {
    border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.1); background: #fff;
}
.bi-textarea { min-height: 100px; resize: vertical; }
.bi-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A41034' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}

/* File upload styled */
.bi-file-wrap {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border: 1.5px dashed #d1d5db; border-radius: 10px;
    background: #fafafa; cursor: pointer;
    transition: border-color .2s, background .2s;
}
.bi-file-wrap:hover { border-color: #A41034; background: rgba(164,16,52,.03); }
.bi-file-wrap-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(164,16,52,.1); color: #A41034;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; flex-shrink: 0;
}
.bi-file-wrap-text { font-size: 12.5px; color: #6b7280; }
.bi-file-wrap-text strong { color: #A41034; font-weight: 700; display: block; margin-bottom: 1px; }
.bi-file input { display: none; }

/* Submit */
.bi-submit {
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, #A41034 0%, #2563eb 100%);
    color: #fff; border: none; border-radius: 11px;
    font-size: var(--fs-base); font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 20px rgba(164,16,52,.35);
    transition: opacity .2s, transform .2s, box-shadow .2s;
    letter-spacing: .3px; margin-top: 8px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bi-submit:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(164,16,52,.45); }

.bi-foot { text-align: center; font-size: var(--fs-xs); color: #9ca3af; margin-top: 14px; }
.bi-foot a { color: #A41034; font-weight: 600; text-decoration: none; }
.bi-foot a:hover { text-decoration: underline; }

/* ══ RIGHT — Branding ══ */
.bi-right {
    flex: 1; position: relative; overflow: hidden;
    background: #07041a;
    display: flex; align-items: center; justify-content: center;
    padding: 56px 40px;
}
@media(max-width:900px) { .bi-right { display: none; } }

.bi-rr-blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.52; animation:biBlob 10s ease-in-out infinite alternate; }
.bi-rr-blob.p { width:460px; height:460px; background:radial-gradient(circle,#A41034,transparent 70%); top:-120px; left:-80px; }
.bi-rr-blob.b { width:360px; height:360px; background:radial-gradient(circle,#2563eb,transparent 70%); bottom:-80px; right:-60px; animation-duration:14s; animation-delay:-5s; }
.bi-rr-blob.k { width:280px; height:280px; background:radial-gradient(circle,#db2777,transparent 70%); top:45%; left:40%; animation-duration:12s; animation-delay:-3s; }
@keyframes biBlob { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(18px,-14px) scale(1.05);} 100%{transform:translate(-10px,18px) scale(.97);} }
.bi-rr-grid { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1px); background-size:34px 34px; pointer-events:none; }
.bi-rr-shine { position:absolute; top:0; left:50%; transform:translateX(-50%); width:60%; height:1px; background:linear-gradient(90deg,transparent,rgba(167,139,250,.5),transparent); }

.bi-rr-inner { position:relative; z-index:1; text-align:center; max-width:380px; width:100%; }

.bi-wordmark {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2.4rem; font-weight: 900; letter-spacing:-2px;
    background: linear-gradient(100deg, #FFFFFF 0%, #60a5fa 50%, #f472b6 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: biGrad 5s linear infinite; display:block; margin-bottom: 6px;
}
@keyframes biGrad { 0%{background-position:0 center;} 100%{background-position:200% center;} }
.bi-rr-sub { font-size: var(--fs-sm); color:rgba(255,255,255,.42); margin-bottom:32px; letter-spacing:.3px; }

/* Stats row */
.bi-stats { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:32px; }
.bi-stat  { display:flex; flex-direction:column; align-items:center; padding:0 16px; }
.bi-stat strong {
    font-family:"Plus Jakarta Sans", sans-serif; font-size:1.35rem; font-weight:900; line-height:1;
    background:linear-gradient(90deg,#FFFFFF,#60a5fa);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; margin-bottom:3px;
}
.bi-stat span { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.35); }
.bi-vdiv { width:1px; height:26px; background:rgba(255,255,255,.12); }

/* Feature list */
.bi-features { list-style:none; padding:0; margin:0; text-align:left; }
.bi-features li {
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-radius:12px;
    background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08);
    margin-bottom:10px; font-size: var(--fs-sm); color:rgba(255,255,255,.82); font-weight:500;
    transition:background .2s;
}
.bi-features li:hover { background:rgba(164,16,52,.18); }
.bi-feat-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size: var(--fs-base); flex-shrink:0; }
.bi-features li:nth-child(1) .bi-feat-icon { background:rgba(164,16,52,.25); color:#FFFFFF; }
.bi-features li:nth-child(2) .bi-feat-icon { background:rgba(37,99,235,.25);  color:#93c5fd; }
.bi-features li:nth-child(3) .bi-feat-icon { background:rgba(16,185,129,.25); color:#6ee7b7; }
.bi-features li:nth-child(4) .bi-feat-icon { background:rgba(245,158,11,.25); color:#fcd34d; }
.bi-features li .bi-feat-text strong { color:#fff; display:block; margin-bottom:2px; }
.bi-features li .bi-feat-text span   { font-size:11.5px; color:rgba(255,255,255,.42); }

/* ── frontend/partials / lesson-card ── */
/* ════════════════════════════════════════════════════════════
   iGURUS LESSON DIRECTORY CARD CORE STRUCTURAL LAYOUT
   Brand Profile Theme Accent: Deep Royal Purple (#A41034)
════════════════════════════════════════════════════════════ */
:root {
    --brand-dark-base: #2B0510;
    --brand-primary: #A41034;
    --brand-light: #3e1287;
    --brand-glass: rgba(164,16,52, 0.45);
    
    --text-primary: #ffffff;
    --text-secondary: #e2d7f5;
    --text-muted: #a691cb;
    
    --accent-neon: #A41034;
    --accent-gold: #ffc107;
    --card-border-glow: rgba(124, 77, 255, 0.16);
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Card Shell Infrastructure */
.courses__item.premium-card-wrapper {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-dark-base)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    transition: var(--transition-smooth) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin-bottom: 30px;
}

.courses__item.premium-card-wrapper:hover {
    transform: translateY(-6px) !important;
    border-color: var(--accent-neon) !important;
    box-shadow: 0 15px 40px rgba(124, 77, 255, 0.25) !important;
}

/* Image Thumbnail Base Elements */
.courses__item-thumb.premium-thumb-frame {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16/10 !important;
    overflow: hidden !important;
    background: #000 !important;
}

.courses__item-thumb.premium-thumb-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: var(--transition-smooth) !important;
}

.courses__item.premium-card-wrapper:hover .courses__item-thumb.premium-thumb-frame img {
    transform: scale(1.06) !important;
    opacity: 0.85 !important;
}

/* Dynamic Positioning Overlay Tags */
.lesson_price.premium-tag-price {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 5 !important;
}

.lesson_price.premium-tag-price .price {
    background: var(--accent-neon) !important;
    color: #ffffff !important;
    font-size: var(--fs-sm) !important;
    font-weight: 800 !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-sm) !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(124, 77, 255, 0.4) !important;
    letter-spacing: 0.03em;
}

.duration_lesson.premium-tag-duration {
    position: absolute !important;
    bottom: 14px !important;
    right: 14px !important;
    z-index: 5 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(6px) !important;
    color: #ffffff !important;
    font-size: var(--fs-xs) !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Interactive Hover Action Overlay Panels */
.premium-action-trigger-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(17, 2, 44, 0.8) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    opacity: 0 !important;
    z-index: 8 !important;
    transition: var(--transition-smooth) !important;
    padding: 20px !important;
}

.courses__item-thumb.premium-thumb-frame:hover .premium-action-trigger-layer {
    opacity: 1 !important;
}

/* Core Functional Button Components */
.premium-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 80% !important;
    padding: 10px 16px !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    transition: var(--transition-smooth) !important;
    cursor: pointer !important;
    border: none !important;
}

.premium-action-btn.btn-share {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.premium-action-btn.btn-share:hover {
    background: #ffffff !important;
    color: var(--brand-primary) !important;
}

.premium-action-btn.btn-wishlist {
    background: var(--brand-light) !important;
    color: #ffffff !important;
    border: 1px solid var(--card-border-glow) !important;
}
.premium-action-btn.btn-wishlist:hover {
    background: var(--accent-neon) !important;
    box-shadow: 0 4px 15px rgba(124, 77, 255, 0.4) !important;
}

.premium-action-btn.btn-commerce {
    background: var(--accent-gold) !important;
    color: var(--brand-dark-base) !important;
}
.premium-action-btn.btn-commerce:hover {
    background: #ffffff !important;
    color: var(--brand-dark-base) !important;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4) !important;
}

/* Internal Card Content Matrix Area */
.courses__item-content.premium-body-content {
    padding: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.courses__item-meta.premium-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    list-style: none !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

.courses__item-tag.premium-category-tag a {
    background: rgba(124, 77, 255, 0.12) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--card-border-glow) !important;
    padding: 4px 12px !important;
    border-radius: 99px !important;
    font-size: var(--fs-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
}

.avg-rating.premium-rating-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--accent-gold) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 700 !important;
}

/* Instructor Information Segment Block */
.instructor__item.premium-profile-strip {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-top: auto !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 16px !important;
}

.instructor__thumb.premium-avatar-frame img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid var(--accent-neon) !important;
    object-fit: cover !important;
}

.instructor__content.premium-text-details {
    flex: 1 !important;
    min-width: 0 !important;
}

.instructor__content.premium-text-details .title {
    font-size: var(--fs-md) !important;
    font-weight: 700 !important;
    line-height: var(--lh-snug) !important;
    margin: 0 0 4px 0 !important;
}

.instructor__content.premium-text-details .title a {
    color: var(--text-primary) !important;
    text-decoration: none !important;
    transition: var(--transition-smooth) !important;
}

.instructor__content.premium-text-details .title a:hover {
    color: var(--accent-neon) !important;
}

.instructor__content.premium-text-details .author {
    font-size: var(--fs-sm) !important;
    color: var(--text-muted) !important;
    margin: 0 0 8px 0 !important;
}

.instructor__content.premium-text-details .author a {
    color: var(--text-muted) !important;
    text-decoration: none !important;
}

/* Consolidated Subtext Performance Metrics Icons Row */
.premium-metrics-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: var(--fs-xs) !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.premium-metrics-strip span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.premium-metrics-strip i {
    color: var(--accent-neon) !important;
}

/* ── frontend/lesson-one/sections / shorts-section ── */
/* ── Shorts Section ──────────────────────────────────────── */
.ig-shorts-wrap {
    background: #fff;
    margin: 0 20px;
    padding: 30px 0 36px;
    border-radius: 16px;
    margin-top: 30px;
}

/* ── Row ────────────────────────────────────────────────── */
.ig-shorts-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
.ig-shorts-row::-webkit-scrollbar { height: 4px; }
.ig-shorts-row::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* ── Card ───────────────────────────────────────────────── */
.ig-short-card {
    flex: 0 0 180px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
    background: #111;
}
.ig-short-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 16px 36px rgba(0,0,0,0.22);
    z-index: 2;
}

/* clickable link fills card */
.ig-short-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ── Media container (9:16 ratio) ───────────────────────── */
.ig-short-card__media {
    position: relative;
    aspect-ratio: 9 / 16;
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 45%, #0f172a 100%);
    overflow: hidden;
}

/* poster shown while video hasn't played yet */
.ig-short-card__poster {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 45%, #0f172a 100%);
    transition: opacity .4s ease;
    z-index: 1;
}
.ig-short-card.is-played .ig-short-card__poster { opacity: 0; }

.ig-short-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* gradient top (dims for overflow btn) */
.ig-short-card__grad-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* gradient bottom (text legibility) */
.ig-short-card__grad-bot {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.3) 60%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* ── Play button ────────────────────────────────────────── */
.ig-short-card__play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.7);
    width: 52px; height: 52px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--fs-md);
    opacity: 0;
    z-index: 3;
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}
.ig-short-card:hover .ig-short-card__play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
/* shift icon slightly right to look centered inside circle */
.ig-short-card__play-btn i { margin-left: 3px; }

/* ── Duration badge ─────────────────────────────────────── */
.ig-short-card__dur {
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(0,0,0,.62);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 20px;
    letter-spacing: .4px;
    z-index: 4;
}

/* ── Bottom meta ────────────────────────────────────────── */
.ig-short-card__meta {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 10px 11px 26px;
    z-index: 4;
}

.ig-short-card__author {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.ig-short-card__author img {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255,255,255,.55);
    flex-shrink: 0;
}
.ig-short-card__author span {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.ig-short-card__title {
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Overflow menu ──────────────────────────────────────── */
.ig-short-card__overflow {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 10;
}

.ig-short-card__overflow-btn {
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: none;
    color: #fff;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--fs-xs);
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
    line-height: 1;
    padding: 0;
}
.ig-short-card:hover .ig-short-card__overflow-btn { opacity: 1; }
.ig-short-card__overflow-btn:hover { background: rgba(0,0,0,.72); }

.ig-short-card__overflow-menu {
    display: none;
    position: absolute;
    top: 34px; left: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
    padding: 6px 0;
    min-width: 162px;
    list-style: none;
    margin: 0;
    z-index: 20;
}
.ig-short-card__overflow-menu.open { display: block; }

.ig-short-card__overflow-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: var(--fs-xs);
    color: #374151;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.ig-short-card__overflow-menu li a:hover {
    background: #f3f4f6;
    color: var(--tg-theme-primary, #A41034);
}
.ig-short-card__overflow-menu li a i {
    width: 14px;
    text-align: center;
    color: #9ca3af;
}
.ig-short-card__overflow-menu li a:hover i {
    color: var(--tg-theme-primary, #A41034);
}

/* ── Responsive: shrink cards on mobile ─────────────────── */
@media (max-width: 575px) {
    .ig-short-card { flex: 0 0 148px; }
    .ig-shorts-row { gap: 10px; }
}

/* ── shorts / learners_shorts ── */

/* ── shorts / lesson_shorts ── */

/* ── Full-bleed: escape any container padding so feed + hero span full viewport ── */
.ig-shorts-hero,
.ig-shorts-feed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
}

/* ════ SHORTS PAGE HERO ════ */
.ig-shorts-hero {
    background: linear-gradient(135deg, #1a0508 0%, #1C1514 55%, #1a1a1a 100%);
    padding: 28px 0 24px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(164,16,52,.3);
}
.ig-shorts-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 28px 28px; pointer-events: none;
}
.ig-shorts-hero__inner {
    max-width: 1180px; margin: 0 auto;
    padding: 0 5%;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    position: relative; z-index: 1;
}
.ig-shorts-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #f0899e; margin-bottom: 6px;
}
.ig-shorts-hero__title {
    font-size: 2rem; font-weight: 800; color: #fff; margin: 0 0 4px;
    letter-spacing: -0.03em; line-height: 1;
    background: linear-gradient(100deg, #fff 0%, #f0899e 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ig-shorts-hero__sub { font-size: var(--fs-sm); color: rgba(255,255,255,.48); margin: 0; }
.ig-shorts-hero__meta { display: flex; gap: 10px; flex-wrap: wrap; }
.ig-shorts-hero__badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    border-radius: 100px; padding: 6px 14px;
    font-size: var(--fs-xs); color: rgba(255,255,255,.65); font-weight: 500;
}

/* ════ SHORTS FEED — TikTok-style ════ */
.ig-shorts-feed {
    height: calc(100vh - 162px);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    background: #111;
    position: relative;
}
.ig-shorts-feed::-webkit-scrollbar { display: none; }

/* Individual short card (scoped to full-screen feed only) */
.ig-shorts-feed .ig-short-card {
    height: calc(100vh - 162px);
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    overflow: hidden;
}

/* Video */
.ig-short-video {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    background: #111;
}
/* When vertical, limit width to ~420px and center */
@media (min-width: 600px) {
    .ig-short-video { max-width: 420px; }
    .ig-shorts-feed .ig-short-card  { justify-content: center; }
}

/* Tap-to-pause overlay */
.ig-short-tap { position: absolute; inset: 0; z-index: 2; cursor: pointer; }

/* Dark gradient overlay */
.ig-short-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.9) 100%);
    padding: 24px 80px 28px 20px;
    z-index: 3; pointer-events: none;
}
@media (min-width: 600px) {
    .ig-short-overlay { left: 50%; transform: translateX(-50%); width: 420px; padding: 24px 80px 28px 20px; }
}

/* User info */
.ig-short-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; pointer-events: all; }
.ig-short-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; flex-shrink: 0; }
.ig-short-username { font-size: var(--fs-sm); font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ig-short-username span { font-size: var(--fs-xs); font-weight: 400; color: rgba(255,255,255,.65); display: block; }

/* Title & description */
.ig-short-title { font-size: var(--fs-base); font-weight: 700; color: #fff; margin-bottom: 5px; text-shadow: 0 1px 4px rgba(0,0,0,.6); line-height: var(--lh-snug); }
.ig-short-desc  { font-size: var(--fs-sm); color: rgba(255,255,255,.78); line-height: var(--lh-normal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ig-short-klip  { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 100px; padding: 5px 12px; font-size: var(--fs-xs); color: #fff; text-decoration: none; pointer-events: all; backdrop-filter: blur(8px); }
.ig-short-klip:hover { background: rgba(255,255,255,.22); color: #fff; text-decoration: none; }
.ig-short-klip i { font-size: var(--fs-xs); }

/* Mute/unmute indicator */
.ig-short-mute-badge {
    position: absolute; top: 16px; left: 16px; z-index: 10;
    background: rgba(0,0,0,.5); border-radius: 100px;
    padding: 6px 12px; font-size: var(--fs-xs); color: #fff;
    display: none; align-items: center; gap: 5px;
    backdrop-filter: blur(8px);
}
.ig-short-mute-badge.visible { display: flex; }

/* Play/pause indicator (tap flash) */
.ig-short-play-flash {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    z-index: 10; opacity: 0; pointer-events: none;
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-2xl); color: #fff; transition: opacity .15s;
}
.ig-short-play-flash.show { opacity: 1; }

/* ── ACTION BUTTONS (right side) ── */
.ig-short-actions {
    position: absolute;
    bottom: 28px; right: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    z-index: 5;
}
@media (min-width: 600px) {
    .ig-short-actions { right: calc(50% - 420px/2 - 52px); }
}
.ig-short-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: #fff; background: none; border: none; cursor: pointer;
    font-size: var(--fs-sm); line-height: 1; padding: 0; transition: transform .18s;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.ig-short-btn:hover { transform: scale(1.12); }
.ig-short-btn .icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.14); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xl); transition: background .15s;
    border: 1px solid rgba(255,255,255,.20);
}
.ig-short-btn:hover .icon { background: rgba(255,255,255,.26); }
.ig-short-btn.liked .icon { background: rgba(239,68,68,.8); border-color: transparent; }
.ig-short-btn .cnt { font-size: var(--fs-xs); font-weight: 600; }

/* Mute button (top-right) */
.ig-short-mute-btn {
    position: absolute; top: 14px; right: 14px; z-index: 6;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,.45); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: var(--fs-sm); cursor: pointer;
    border: 1px solid rgba(255,255,255,.15); transition: background .15s;
}
.ig-short-mute-btn:hover { background: rgba(0,0,0,.65); }
@media (min-width: 600px) {
    .ig-short-mute-btn { right: calc(50% - 420px/2 - 50px); }
}

/* More dropdown */
.ig-short-more { position: relative; }
.ig-short-dropdown {
    position: absolute; bottom: 52px; right: -8px;
    background: rgba(20,14,40,.95); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.10); border-radius: 12px;
    min-width: 180px; padding: 6px 0;
    display: none; z-index: 20;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.ig-short-dropdown.open { display: block; }
.ig-short-dropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; font-size: var(--fs-sm); color: rgba(255,255,255,.85);
    text-decoration: none; transition: background .15s;
}
.ig-short-dropdown a:hover { background: rgba(164,16,52,.18); color: #f0899e; text-decoration: none; }
.ig-short-dropdown a i { font-size: var(--fs-sm); width: 16px; text-align: center; }

/* ── NO SHORTS ── */
.ig-shorts-empty {
    height: calc(100vh - 82px); display: flex; flex-direction: column;
    align-items: center; justify-content: center; background: #f8f2f4; color: #1C1514;
    text-align: center; padding: 40px;
}
.ig-shorts-empty i { font-size: 60px; color: rgba(164,16,52,.45); margin-bottom: 20px; }
.ig-shorts-empty h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; }
.ig-shorts-empty p { color: rgba(28,21,20,.55); font-size: var(--fs-sm); }

/* ── COMMENT MODAL ── */
#comment_modal .modal-content { border-radius: 16px; border: none; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
#comment_modal .modal-header { background: linear-gradient(135deg,#A41034,#1C1514); border-radius: 16px 16px 0 0; border: none; padding: 16px 22px; }
#comment_modal .modal-title { color: #fff; font-weight: 700; }
#short_forms .modal-content { border-radius: 14px; border: none; overflow: hidden; }


/* ── frontend/pages/learning-player / index ── */
        .tgmenu__action>ul li .cart-count {
            border: 1px solid #FFF;
            color: #ffffff;
        }

/* ── global / maintenance ── */
        body {
            margin: 0;
            padding: 0;
        }

       /* .container {
            width: 100%;
          
            text-align: center;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }*/

        .animation {
            display: inline-block;
            margin-bottom: 24px;
        }

        h1 {
            font-size: var(--fs-3xl);
            font-weight: 400;
            text-transform: uppercase;
            margin: 0;
        }

        p {
            font-size: var(--fs-md);
            font-weight: 700;
            margin: 0;
        }

        a {
            color: #f6921e;
            font-weight: bold;
            text-decoration: none;
            margin-left: 5px;
        }
        .animation img {
            width: 200px
        }
        h1 {
            font-family: "Plus Jakarta Sans", sans-serif;
        }
        p {
            font-family: "Plus Jakarta Sans", sans-serif;
        }

/* ── checkout ── */

/* ══════════════════════════════════════════
   CHECKOUT — Deep Space Theme
══════════════════════════════════════════ */
.ck-page { font-family:"Plus Jakarta Sans", sans-serif; }
.ck-page * { box-sizing: border-box; }

/* ── Reset site container constraints ── */
body .checkout__area { padding: 0 !important; background: transparent !important; }

/* ── Page hero ── */
.ck-hero {
    background: #1C1514; 
    padding: 48px 0 36px;
    position: relative; overflow: hidden;
}
.ck-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.ck-hero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(124,82,255,.6) 35%, rgba(155,81,224,.6) 65%, transparent);
}
.ck-hero-orb {
    position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px);
}
.ck-hero-orb-1 { width:400px; height:400px; background:radial-gradient(circle,rgba(124,82,255,.2),transparent 65%); top:-160px; left:-80px; }
.ck-hero-orb-2 { width:300px; height:300px; background:radial-gradient(circle,rgba(155,81,224,.18),transparent 65%); bottom:-100px; right:5%; }
.ck-hero-inner { position: relative; z-index: 1; }
.ck-hero-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(124,82,255,.18); border: 1px solid rgba(124,82,255,.35);
    border-radius: 100px; padding: 5px 14px;
    font-size: var(--fs-xs); font-weight: 600; color: #FFFFFF; margin-bottom: 14px;
}
.ck-hero-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.6rem,4vw,2.4rem); font-weight: 900;
    color: #fff; margin: 0 0 10px; letter-spacing: -.02em;
}
.ck-hero-title span {
    background: linear-gradient(90deg, #FFFFFF, #1C1514);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ck-hero-sub { font-size: var(--fs-sm); color: rgba(255,255,255,.45); margin: 0; }
.ck-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: rgba(255,255,255,.35); margin-top: 18px; flex-wrap: wrap;
}
.ck-breadcrumb a { color: rgba(255,255,255,.45); text-decoration: none; transition: color .2s; }
.ck-breadcrumb a:hover { color: #FFFFFF; }
.ck-breadcrumb i { font-size: 8px; }

/* ── Secure bar ── */
.ck-secure-bar {
    background: rgba(16,185,129,.1); border-bottom: 1px solid rgba(16,185,129,.2);
    padding: 10px 0;
}
.ck-secure-bar-inner {
    display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.ck-secure-chip {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-xs); color: rgba(255,255,255,.55);
}
.ck-secure-chip i { color: #34d399; font-size: var(--fs-xs); }

/* ── Body ── */
.ck-body { background: #f4f3fb; padding: 40px 0 64px; }

/* ── Currency alerts ── */
.ck-alert {
    display: flex; align-items: flex-start; gap: 12px;
    background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25);
    border-left: 4px solid #f59e0b; border-radius: 12px;
    padding: 14px 18px; margin-bottom: 14px;
    font-size: var(--fs-sm); color: #92400e; line-height: 1.55;
}
.ck-alert i { color: #f59e0b; margin-top: 2px; flex-shrink: 0; }

/* ── Left card ── */
.ck-card {
    background: #fff; border-radius: 18px;
    border: 1px solid #e8eaf2;
    box-shadow: 0 2px 16px rgba(10,6,24,.07);
    overflow: hidden; margin-bottom: 20px;
}
.ck-card-head {
    padding: 20px 24px 18px;
    border-bottom: 1px solid #f0eef8;
    display: flex; align-items: center; gap: 12px;
}
.ck-card-head-icon {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: #1C1514;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .9rem;
    box-shadow: 0 4px 12px rgba(124,82,255,.35);
}
.ck-card-head-title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1rem;
    font-weight: 800; color: #0f172a; margin: 0;
}
.ck-card-head-sub { font-size:1rem; color: #9ca3af; margin: 2px 0 0; }
.ck-card-body { padding: 24px; }

/* ── Payment method grid ── */
.ck-methods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}
.ck-method {
    background: #fafafe; border: 2px solid #e8eaf2;
    border-radius: 14px; padding: 18px 12px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none;
    transition: all .25s; position: relative;
    min-height: 90px;
}
.ck-method:hover {
    border-color: #1C1514;
    background: #f5f0ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124,82,255,.15);
    text-decoration: none;
}
.ck-method img {
    max-height: 36px; max-width: 110px;
    object-fit: contain; display: block;
}
.ck-method-label {
    font-size: .7rem; font-weight: 600; color: #9ca3af;
    margin-top: 8px; text-transform: uppercase; letter-spacing: .05em;
}
.ck-method.is-free {
    border-color: rgba(16,185,129,.4);
    background: rgba(16,185,129,.04);
}
.ck-method.is-free:hover { border-color: #10b981; background: rgba(16,185,129,.08); }

/* ── Free gateway button ── */
.ck-free-form button {
    background: transparent; padding: 0; border: none; width: 100%;
}
.ck-free-form .ck-method { width: 100%; }

/* ── Right sidebar: Order summary ── */
.ck-summary {
    background: #1C1514; 
    border-radius: 18px; padding: 28px 26px;
    position: sticky; top: 20px;
    border: 1px solid rgba(124,82,255,.2);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    overflow: hidden; position: relative;
}
.ck-summary::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #1C1514 40%, #9b51e0 60%, transparent);
}
.ck-summary-orb {
    position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(124,82,255,.2), transparent 65%);
    top: -80px; right: -60px;
}
.ck-summary-inner { position: relative; z-index: 1; }
.ck-summary-title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem;
    font-weight: 800; color: #fff; margin: 0 0 22px;
    display: flex; align-items: center; gap: 10px;
}
.ck-summary-title i { color: #FFFFFF; }

/* Summary rows */
.ck-summary-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: .875rem;
}
.ck-summary-row:last-of-type { border-bottom: none; }
.ck-summary-label { color: rgba(255,255,255,.5); }
.ck-summary-val { color: #fff; font-weight: 600; }

/* Discount */
.ck-discount-label { color: rgba(255,255,255,.5); }
.ck-discount-code {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; background: rgba(124,82,255,.2);
    border: 1px solid rgba(124,82,255,.3);
    color: #FFFFFF; padding: 2px 8px; border-radius: 100px;
    margin-top: 3px;
}
.ck-remove-coupon {
    color: #f87171 !important; font-size:1rem;
    text-decoration: none; margin-left: 4px;
    transition: color .2s;
}
.ck-remove-coupon:hover { color: #ef4444 !important; }

/* Total row */
.ck-summary-total {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.ck-total-label {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: .85rem;
    font-weight: 700; color: rgba(255,255,255,.6);
    text-transform: uppercase; letter-spacing: .07em;
}
.ck-total-val {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.6rem;
    font-weight: 900; color: #fff; letter-spacing: -.02em;
}

/* Payable breakdown */
.ck-payable-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.ck-payable-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255,255,255,.3);
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.ck-payable-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .82rem; margin-bottom: 6px;
}
.ck-payable-row:last-child { margin-bottom: 0; }
.ck-payable-gateway { color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 6px; }
.ck-payable-gateway::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #1C1514; flex-shrink: 0;
}
.ck-payable-amount { color: #e9d5ff; font-weight: 600; }

/* Item count badge */
.ck-item-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(124,82,255,.18); border: 1px solid rgba(124,82,255,.3);
    border-radius: 100px; padding: 4px 10px;
    font-size: .72rem; font-weight: 700; color: #FFFFFF;
}

/* ── Modals ── */
.ck-modal { z-index: 10000 !important; }
.modal-backdrop { z-index: 9999 !important; }
.ck-summary { isolation: isolate; }
.ck-modal .modal-content {
    border: none; border-radius: 18px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.ck-modal .modal-header {
    background: linear-gradient(135deg, #111827, #1C1514);
    border-bottom: 1px solid rgba(124,82,255,.2);
    padding: 20px 24px;
}
.ck-modal .modal-title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.05rem;
    font-weight: 800; color: #fff; margin: 0;
    display: flex; align-items: center; gap: 10px;
}
.ck-modal .modal-title i { color: #FFFFFF; }
.ck-modal .btn-close { filter: invert(1) brightness(1.5); opacity: .6; }
.ck-modal .modal-body { padding: 24px; background: #fff; }
.ck-modal .modal-footer { padding: 16px 24px; background: #fafafe; border-top: 1px solid #f0eef8; }

/* Modal form fields */
.ck-mfg { margin-bottom: 16px; }
.ck-mlabel {
    display: block; font-size: .78rem; font-weight: 700;
    color: #374151; margin-bottom: 6px;
}
.ck-mlabel .req { color: #ef4444; }
.ck-minput {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid #e5e7eb; border-radius: 10px;
    font-size: .875rem; color: #111827; background: #fafafa;
    outline: none; transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
}
.ck-minput:focus {
    border-color: #1C1514;
    box-shadow: 0 0 0 3px rgba(124,82,255,.12);
    background: #fff;
}
.ck-mbtn-cancel {
    background: #f3f4f6; color: #374151; border: 1.5px solid #e5e7eb;
    padding: 9px 20px; border-radius: 9px; font-size: .875rem;
    font-weight: 600; cursor: pointer; transition: all .2s;
}
.ck-mbtn-cancel:hover { background: #e5e7eb; }
.ck-mbtn-pay {
    background: #1C1514;
    color: #fff; border: none;
    padding: 9px 24px; border-radius: 9px; font-size: .875rem;
    font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 14px rgba(124,82,255,.4);
    transition: all .2s;
}
.ck-mbtn-pay:hover { box-shadow: 0 6px 18px rgba(124,82,255,.5); transform: translateY(-1px); }
.ck-bank-info {
    background: #faf5ff; border: 1px solid rgba(124,82,255,.15);
    border-radius: 10px; padding: 14px 16px;
    font-size: .84rem; color: #4a1d96; line-height: var(--lh-normal);
    margin-bottom: 18px;
}

/* ── Responsive ── */
@media(max-width:991px) {
    .ck-summary { position: static; margin-top: 24px; }
    .ck-methods { grid-template-columns: repeat(3,1fr); }
}
@media(max-width:575px) {
    .ck-methods { grid-template-columns: repeat(2,1fr); }
    .ck-card-body { padding: 16px; }
    .ck-hero { padding: 32px 0 24px; }
}

/* ── checkoutnew ── */


/* ── checkoutnew ── */

/* ══════════════════════════════════════════
   CHECKOUT — iGurus Brand Theme
   Primary: #A41034  Dark: #1C1514  Light: #FFFFFF
══════════════════════════════════════════ */
.ck2-page { font-family:"Plus Jakarta Sans", sans-serif; }
.ck2-page * { box-sizing: border-box; }

/* ── Hero ── */
.ck2-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #1a0409 0%, #3b0e1a 45%, #A41034 100%);
    padding: 60px 0 48px;
}
.ck2-hero::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px; pointer-events: none;
}
.ck2-hero::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25) 40%, rgba(255,255,255,.25) 60%, transparent);
}
.ck2-hero-orb {
    position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none;
}
.ck2-hero-orb-1 { width: 380px; height: 380px; top: -160px; left: -80px; background: radial-gradient(circle, rgba(255,255,255,.1), transparent 65%); }
.ck2-hero-orb-2 { width: 280px; height: 280px; bottom: -120px; right: 4%; background: radial-gradient(circle, rgba(164,16,52,.45), transparent 65%); }
.ck2-hero-inner { position: relative; z-index: 1; text-align: center; }
.ck2-hero-lock {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.4rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.ck2-hero-title {
    font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 900;
    color: #fff; margin: 0 0 8px; letter-spacing: -.02em;
}
.ck2-hero-sub { font-size: .875rem; color: rgba(255,255,255,.6); margin: 0; }
.ck2-hero-chips {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap; margin-top: 22px;
}
.ck2-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    border-radius: 100px; padding: 5px 14px;
    font-size:1rem; font-weight: 600; color: rgba(255,255,255,.85);
}
.ck2-chip i { font-size: .65rem; }

/* ── Body ── */
.ck2-body { padding: 44px 0 72px; background: #FFFFFF; }

/* ── Left main card ── */
.ck2-card {
    background: #fff; border-radius: 20px;
    border: 1px solid #d8d6d4;
    box-shadow: 0 4px 28px rgba(0,0,0,.08);
    overflow: hidden;
}

/* card section header */
.ck2-section {
    padding: 18px 28px 16px;
    border-bottom: 1px solid #f0eeec;
    display: flex; align-items: center; gap: 12px;
}
.ck2-section-icon {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, #A41034, #c41840);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .82rem;
    box-shadow: 0 3px 12px rgba(164,16,52,.35);
}
.ck2-section-title {
    font-size: .95rem; font-weight: 800; color: #1C1514; margin: 0;
}
.ck2-section-sub { font-size: .72rem; color: #9ca3af; margin: 2px 0 0; }

/* section bodies */
.ck2-section-body { padding: 22px 28px; }
.ck2-cta-body { padding: 24px 28px 30px; }

/* ── Billing country select ── */
.ck2-select {
    width: 100%; padding: 11px 16px;
    border: 1.5px solid #d1d5db; border-radius: 10px;
    font-size: .875rem; color: #1C1514; background: #fafafa;
    outline: none; font-family: inherit; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A41034' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    transition: border-color .2s, box-shadow .2s;
}
.ck2-select:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.1);
    background-color: #fff;
}

/* ── Summary rows (inside left card — kept for compat) ── */
.ck2-summary-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 0; border-bottom: 1px solid #f3f4f6; font-size: .875rem;
}
.ck2-summary-row:last-child { border-bottom: none; }
.ck2-summary-label { color: #6b7280; }
.ck2-summary-val { font-weight: 600; color: #1C1514; }
.ck2-summary-val.green { color: #059669; }

/* Coupon pill */
.ck2-coupon-row { flex-direction: column; align-items: flex-start; gap: 4px; }
.ck2-coupon-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; background: rgba(164,16,52,.08);
    border: 1px solid rgba(164,16,52,.2);
    color: #A41034; padding: 2px 9px; border-radius: 100px;
}
.ck2-coupon-remove {
    color: #A41034 !important; font-size: .8rem;
    text-decoration: none; margin-left: 3px; transition: opacity .2s;
}
.ck2-coupon-remove:hover { opacity: .7; }

/* Wallet credit */
.ck2-credit-row {
    padding: 12px 0; border-bottom: 1px solid #f3f4f6;
}
.ck2-credit-label {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer; width: 100%;
}
.ck2-credit-check {
    margin-top: 3px; accent-color: #A41034; flex-shrink: 0;
}
.ck2-credit-text { font-size: .84rem; color: #374151; line-height: var(--lh-normal); }
.ck2-credit-text strong { color: #1C1514; }
.ck2-credit-text small { display: block; font-size: .72rem; color: #9ca3af; margin-top: 2px; }
.ck2-credit-val { font-weight: 700; color: #059669; font-size: .875rem; white-space: nowrap; }

/* Total row */
.ck2-total-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 14px; padding-top: 14px;
    border-top: 2px solid #f0eeec;
}
.ck2-total-label {
    font-size: .78rem; font-weight: 800; color: #6b7280;
    text-transform: uppercase; letter-spacing: .07em;
}
.ck2-total-val {
    font-size: 1.7rem; font-weight: 900; color: #A41034; letter-spacing: -.02em;
}

/* ── Payment methods grid ── */
.ck2-methods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.ck2-method {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 18px 12px;
    background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px;
    text-decoration: none !important; transition: all .2s; cursor: pointer;
}
.ck2-method:hover {
    border-color: #A41034;
    box-shadow: 0 4px 16px rgba(164,16,52,.15);
    transform: translateY(-2px);
}
.ck2-method img { height: 32px; width: auto; max-width: 84px; object-fit: contain; }
.ck2-method span { font-size: .72rem; font-weight: 700; color: #374151; text-align: center; }

/* Free button */
.ck2-free-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(135deg, #A41034, #c41840);
    color: #fff; border-radius: 12px; padding: 16px 28px;
    font-size: 1rem; font-weight: 800; text-decoration: none;
    box-shadow: 0 6px 20px rgba(164,16,52,.35);
    transition: all .2s; width: 100%;
}
.ck2-free-btn:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 10px 28px rgba(164,16,52,.45); text-decoration: none; }

/* Stripe CTA button */
.ck2-stripe-btn {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, #1C1514, #37302F);
    color: #fff; border-radius: 12px; padding: 16px 22px;
    font-size: .95rem; font-weight: 800; text-decoration: none;
    box-shadow: 0 6px 20px rgba(28,21,20,.3);
    transition: all .2s; width: 100%; margin-bottom: 0;
}
.ck2-stripe-btn:hover { box-shadow: 0 10px 28px rgba(28,21,20,.4); transform: translateY(-2px); color: #fff; text-decoration: none; }
.ck2-stripe-btn .btn-left { display: flex; align-items: center; gap: 10px; }
.ck2-stripe-btn .btn-amount {
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px; padding: 4px 12px;
    font-size: .85rem; font-weight: 700;
}

/* ── Student profile card (top of left sidebar) ── */
.ck2-student {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 22px 18px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    background: rgba(0,0,0,.18);
}
.ck2-student-avatar-wrap { position: relative; flex-shrink: 0; }
.ck2-student-avatar {
    width: 54px; height: 54px; border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(164,16,52,.5);
    box-shadow: 0 0 0 3px rgba(164,16,52,.15);
}
.ck2-student-initials {
    width: 54px; height: 54px; border-radius: 50%;
    background: linear-gradient(135deg, #A41034, #c41840);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 900; color: #fff;
    border: 2px solid rgba(164,16,52,.4);
    box-shadow: 0 0 0 3px rgba(164,16,52,.15);
}
.ck2-student-info { min-width: 0; flex: 1; }
.ck2-student-name {
    font-size: .88rem; font-weight: 800; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: var(--lh-snug);
}
.ck2-student-email {
    font-size: .72rem; color: rgba(255,255,255,.45);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}
.ck2-student-badge {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 6px; font-size: .62rem; font-weight: 700;
    background: rgba(164,16,52,.2); border: 1px solid rgba(164,16,52,.3);
    color: #fca5a5; padding: 2px 8px; border-radius: 100px;
}

/* Wallet credit inside sidebar */
.ck2-credit-block { flex-direction: column; align-items: flex-start; }
.ck2-credit-toggle {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; width: 100%;
}
.ck2-credit-toggle-text {
    font-size: .78rem; color: rgba(255,255,255,.6); flex: 1;
}
.ck2-credit-toggle-text small {
    display: block; font-size: .68rem; color: rgba(255,255,255,.35); margin-top: 1px;
}

/* ── Trust strip ── */
.ck2-trust-strip {
    display: flex; flex-wrap: wrap; gap: 10px;
    padding: 18px 0 4px;
    border-top: 1px solid #f0eeec;
    margin-top: 20px;
}
.ck2-trust-item {
    display: flex; align-items: center; gap: 6px;
    font-size:1rem; color: #6b7280; flex: 1; min-width: 120px;
}
.ck2-trust-item i { color: #A41034; font-size: .7rem; }

/* Secure note */
.ck2-secure-note {
    display: flex; align-items: center; gap: 6px; justify-content: center;
    font-size: .72rem; color: #9ca3af; margin-top: 12px;
    text-align: center;
}
.ck2-secure-note i { color: #A41034; }

/* Card logos */
.ck2-card-logos {
    display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.ck2-card-logos img { height: 22px; object-fit: contain; opacity: .6; }

/* Alert */
.ck2-alert {
    display: flex; align-items: flex-start; gap: 10px;
    background: #fff8e1; border: 1px solid #f59e0b;
    border-radius: 10px; padding: 12px 16px;
    font-size: .82rem; color: #92400e; margin-bottom: 12px;
}
.ck2-alert i { color: #f59e0b; flex-shrink: 0; margin-top: 1px; }

/* ── Right: Order Summary Sidebar ── */
.ck2-sidebar {
    background: linear-gradient(155deg, #1c0810 0%, #2e1018 40%, #1C1514 100%);
    border-radius: 18px;
    border: 1px solid rgba(164,16,52,.25);
    box-shadow: 0 10px 36px rgba(0,0,0,.35);
    overflow: hidden;
    position: sticky; top: 20px;
}
.ck2-sidebar-head {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 22px 16px;
    font-size: .95rem; font-weight: 800; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.ck2-sidebar-head i { color: #f87171; font-size: .9rem; }
.ck2-sidebar-count {
    margin-left: auto; font-size: .68rem; font-weight: 700;
    background: rgba(164,16,52,.2); border: 1px solid rgba(164,16,52,.3);
    color: #fca5a5; padding: 3px 10px; border-radius: 100px; white-space: nowrap;
}
.ck2-sidebar-items {
    padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex; flex-direction: column; gap: 13px;
    max-height: 280px; overflow-y: auto;
}
.ck2-sidebar-items::-webkit-scrollbar { width: 4px; }
.ck2-sidebar-items::-webkit-scrollbar-track { background: transparent; }
.ck2-sidebar-items::-webkit-scrollbar-thumb { background: rgba(164,16,52,.4); border-radius: 4px; }
.ck2-sidebar-item { display: flex; align-items: center; gap: 11px; }
.ck2-sidebar-thumb {
    width: 58px; height: 42px; border-radius: 7px; object-fit: cover;
    flex-shrink: 0; border: 1px solid rgba(255,255,255,.12);
}
.ck2-sidebar-item-info { flex: 1; min-width: 0; }
.ck2-sidebar-item-name {
    display: block; font-size: .77rem; font-weight: 600; color: rgba(255,255,255,.85);
    text-decoration: none; line-height: var(--lh-snug);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck2-sidebar-item-name:hover { color: #fca5a5; text-decoration: none; }
.ck2-sidebar-item-meta { margin-top: 4px; }
.ck2-tag {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .6rem; font-weight: 700; letter-spacing: .03em;
    padding: 2px 7px; border-radius: 100px;
}
.ck2-tag--course {
    background: rgba(164,16,52,.18); border: 1px solid rgba(164,16,52,.3); color: #fca5a5;
}
.ck2-tag--klip {
    background: rgba(16,185,129,.14); border: 1px solid rgba(16,185,129,.25); color: #6ee7b7;
}
.ck2-sidebar-item-price {
    font-size: .82rem; font-weight: 700; color: #fecdd3; white-space: nowrap; flex-shrink: 0;
}
.ck2-sidebar-breakdown {
    padding: 8px 22px 4px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.ck2-sidebar-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 9px 0; font-size: .8rem; color: rgba(255,255,255,.45);
    border-bottom: 1px solid rgba(255,255,255,.04); gap: 8px;
}
.ck2-sidebar-row:last-child { border-bottom: none; }
.ck2-sidebar-row > span:last-child,
.ck2-sidebar-row > *:last-child { white-space: nowrap; font-weight: 600; color: rgba(255,255,255,.8); }
.ck2-sidebar-green { color: #34d399 !important; font-weight: 700 !important; }
.ck2-sidebar-total {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    font-size: .72rem; font-weight: 800;
    color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .1em;
}
.ck2-sidebar-total-val {
    font-size: 1.55rem; font-weight: 900;
    color: #fff; letter-spacing: -.02em; text-transform: none;
}

/* ── Modal ── */
.ck2-modal { z-index: 10000 !important; }
.modal-backdrop { z-index: 9999 !important; }
.ck2-modal .modal-content {
    border: none; border-radius: 18px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.ck2-modal .modal-header {
    background: linear-gradient(135deg, #1C1514, #A41034);
    border-bottom: 1px solid rgba(164,16,52,.2); padding: 20px 24px;
}
.ck2-modal .modal-title {
    font-size: 1rem; font-weight: 800; color: #fff; margin: 0;
    display: flex; align-items: center; gap: 10px;
}
.ck2-modal .modal-title .stripe-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem;
}
.ck2-modal .btn-close { filter: invert(1) brightness(2); opacity: .7; }
.ck2-modal .modal-body { padding: 26px; background: #fff; }

/* Modal form */
.ck2-card-field { margin-bottom: 18px; }
.ck2-card-label {
    display: block; font-size: .78rem; font-weight: 700;
    color: #374151; margin-bottom: 6px;
}
.ck2-card-label .req { color: #A41034; margin-left: 2px; }
.ck2-card-input {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid #e5e7eb; border-radius: 10px;
    font-size: .875rem; color: #111827; background: #fafafa;
    outline: none; transition: border-color .2s, box-shadow .2s; font-family: inherit;
}
.ck2-card-input:focus {
    border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.1); background: #fff;
}
.ck2-card-input::placeholder { color: #d1d5db; font-weight: 400; letter-spacing: normal; }
.ck2-modal-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px;
}
.ck2-btn-cancel {
    background: #f3f4f6; color: #374151; border: 1.5px solid #e5e7eb;
    padding: 9px 20px; border-radius: 9px; font-size: .875rem;
    font-weight: 600; cursor: pointer; transition: all .2s;
}
.ck2-btn-cancel:hover { background: #e5e7eb; }
.ck2-btn-pay {
    background: linear-gradient(135deg, #A41034, #c41840);
    color: #fff; border: none; padding: 9px 24px; border-radius: 9px;
    font-size: .875rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 14px rgba(164,16,52,.35); transition: all .2s;
}
.ck2-btn-pay:hover { box-shadow: 0 6px 20px rgba(164,16,52,.5); transform: translateY(-1px); }
.ck2-btn-pay:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.ck2-modal-error {
    display: none; background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 8px; padding: 10px 14px; font-size: .82rem;
    color: #991b1b; margin-top: 10px;
}

/* ══════════════════════════════════════
   RIGHT PAYMENT PANEL
══════════════════════════════════════ */
.ck2-pay-panel {
    background: #fff; border-radius: 20px;
    border: 1px solid #d8d6d4;
    box-shadow: 0 4px 28px rgba(0,0,0,.08);
    overflow: hidden;
}
.ck2-pay-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 28px 20px;
    border-bottom: 1px solid #f0eeec;
    flex-wrap: wrap; gap: 12px;
}
.ck2-pay-header-left { display: flex; align-items: center; gap: 14px; }
.ck2-pay-icon {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, #A41034, #c41840);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .95rem;
    box-shadow: 0 4px 12px rgba(164,16,52,.3);
}
.ck2-pay-title { font-size: 1rem; font-weight: 800; color: #1C1514; }
.ck2-pay-sub { font-size: .72rem; color: #9ca3af; margin-top: 2px; }
.ck2-card-brands { display: flex; align-items: center; gap: 6px; }
.ck2-card-brands img { height: 26px; width: auto; object-fit: contain; border-radius: 4px; }

.ck2-pay-body { padding: 32px 28px 28px; }

/* Amount display */
.ck2-amount-display {
    text-align: center; padding: 28px 20px 24px;
    background: #fafaf9; border-radius: 14px;
    border: 1px solid #e8e6e3; margin-bottom: 24px;
}
.ck2-amount-label {
    font-size: .72rem; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px;
}
.ck2-amount-value {
    font-size: 2.8rem; font-weight: 900; color: #1C1514;
    letter-spacing: -.03em; line-height: 1;
}

/* Pay button */
.ck2-pay-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 18px 24px;
    background: linear-gradient(135deg, #A41034 0%, #c41840 100%);
    color: #fff; border: none; border-radius: 14px;
    font-size: 1.05rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 6px 24px rgba(164,16,52,.4);
    transition: all .22s; letter-spacing: -.01em;
    text-decoration: none;
}
.ck2-pay-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(164,16,52,.5);
    color: #fff;
}
.ck2-pay-btn:active { transform: translateY(0); }
.ck2-pay-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.ck2-pay-btn-left { display: flex; align-items: center; gap: 10px; }
.ck2-pay-btn-left i { font-size: .85rem; }
.ck2-pay-btn-amount {
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px; padding: 4px 14px;
    font-size: .9rem; font-weight: 700;
}

/* ══════════════════════════════════════
   STRIPE PAYMENT MODAL  (spm-*)
══════════════════════════════════════ */
#stripeModal { z-index: 10500 !important; }
#stripeModal .modal-backdrop,
.modal-backdrop { z-index: 10499 !important; }
/* All Bootstrap modals must appear above the globally-raised backdrop (10499).
   stripeModal already has its own 10500 rule above; this covers everything else. */
.modal { z-index: 10500 !important; }

.spm-dialog { max-width: 460px; }
.spm-content {
    border: none; border-radius: 20px; overflow: hidden;
    box-shadow: 0 24px 72px rgba(0,0,0,.35);
}

/* Header */
.spm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px;
    background: #1C1514;
    gap: 12px;
}
.spm-header-left { display: flex; align-items: center; gap: 14px; }
.spm-lock-ring {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    background: rgba(164,16,52,.25);
    border: 2px solid rgba(164,16,52,.5);
    display: flex; align-items: center; justify-content: center;
    color: #fca5a5; font-size: .9rem;
}
.spm-header-title { font-size: .95rem; font-weight: 800; color: #fff; }
.spm-header-sub   { font-size: .68rem; color: rgba(255,255,255,.4); margin-top: 1px; }
.spm-header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.spm-amount {
    font-size: 1.25rem; font-weight: 900; color: #fff; letter-spacing: -.02em;
}
.spm-close {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.7); font-size:1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.spm-close:hover { background: rgba(164,16,52,.35); color: #fff; border-color: rgba(164,16,52,.5); }

/* Accent bar below header */
.spm-accent-bar {
    height: 3px;
    background: linear-gradient(90deg, #A41034 0%, #e83d60 50%, #A41034 100%);
}

/* Body */
.spm-body { padding: 28px 28px 24px; background: #fff; }

/* Field */
.spm-field { margin-bottom: 18px; }
.spm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.spm-label {
    display: flex; align-items: center; gap: 6px;
    font-size:1rem; font-weight: 700; color: #374151; margin-bottom: 7px;
}
.spm-cvc-hint { color: #9ca3af; cursor: help; font-size: .7rem; }

/* Input wrapper */
.spm-input-wrap { position: relative; }
.spm-input {
    width: 100%; padding: 12px 44px 12px 14px;
    border: 1.5px solid #FFFFFF; border-radius: 10px;
    font-size: .9rem; color: #1C1514; background: #fafaf9;
    outline: none; font-family: "Plus Jakarta Sans", monospace;
    letter-spacing: .06em;
    transition: border-color .2s, box-shadow .2s;
}
.spm-input:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.1);
    background: #fff;
}
.spm-input::placeholder { color: #c4c4c2; letter-spacing: normal; font-family: inherit; }
.spm-input-wrap.spm-error-ring .spm-input {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.12);
}
.spm-field-icon {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    color: #c4c4c2; font-size: .8rem; pointer-events: none;
}

/* Card brand icons inside card-number field */
.spm-card-icons {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    display: flex; gap: 3px; align-items: center;
}
.spm-card-icons img { height: 18px; width: auto; border-radius: 3px; transition: opacity .2s; }

/* Error */
.spm-error {
    display: none; align-items: flex-start; gap: 8px;
    background: #fff5f5; border: 1px solid #fecaca;
    border-radius: 9px; padding: 10px 14px;
    font-size: .8rem; color: #991b1b; margin-bottom: 16px;
}
.spm-error i { color: #A41034; flex-shrink: 0; margin-top: 1px; }

/* Pay button inside modal */
.spm-pay-btn {
    width: 100%; padding: 15px 20px;
    background: linear-gradient(135deg, #A41034 0%, #c41840 100%);
    color: #fff; border: none; border-radius: 12px;
    font-size: 1rem; font-weight: 800; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 6px 22px rgba(164,16,52,.38);
    transition: all .22s; letter-spacing: -.01em;
    margin-bottom: 20px;
}
.spm-pay-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(164,16,52,.5); }
.spm-pay-btn:active { transform: translateY(0); }
.spm-pay-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.spm-pay-btn i { font-size: .8rem; }

/* Footer */
.spm-footer {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    padding-top: 16px; border-top: 1px solid #f0eeec;
}
.spm-footer-security {
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem; color: #9ca3af;
}
.spm-footer-security i { color: #A41034; }
.spm-footer-brands { display: flex; align-items: center; gap: 5px; }
.spm-footer-brands img { height: 20px; width: auto; border-radius: 3px; opacity: .7; }

/* ── Responsive ── */
@media(max-width:991px) {
    .ck2-sidebar { position: static; }
    .ck2-methods { grid-template-columns: repeat(3,1fr); }
}
@media(max-width:640px) {
    .ck2-hero { padding: 40px 0 32px; }
    .ck2-section-body, .ck2-cta-body, .ck2-pay-body { padding: 20px; }
    .ck2-pay-header { padding: 16px 20px; }
    .ck2-section { padding: 14px 20px 12px; }
    .ck2-total-val { font-size: 1.5rem; }
    .ck2-sidebar-total-val { font-size: 1.3rem; }
    .ck2-amount-value { font-size: 2.2rem; }
    .spm-body { padding: 20px 18px 18px; }
    .spm-row { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media(max-width:575px) {
    .ck2-methods { grid-template-columns: repeat(2,1fr); }
    .ck2-sidebar-items { max-height: 220px; }
    .ck2-card-brands { display: none; }
    .spm-dialog { max-width: 100%; margin: 0 10px; }
}
            border-bottom: 1px solid rgb(56, 53, 53);
        }

/* ── edit ── */
        .bottom-border {
            border-bottom: 1px solid rgb(56, 53, 53);
        }

/* ── index ── */
        .dd-custom-css {
            position: absolute;
            will-change: transform;
            top: 0px;
            left: 0px;
            transform: translate3d(0px, -131px, 0px);
        }

        .max-h-400 {
            min-height: 400px;
        }

/* ── terms-and-conditions ── */
/* ── Reset site container so .pp-wrap can be full-width ── */
/* Prevent global heading/link colours leaking in */
.pp-wrap h1, .pp-wrap h2, .pp-wrap h3, .pp-wrap h4, .pp-wrap h5, .pp-wrap h6 {
  color: inherit !important;
  font-family: inherit;
}
.pp-wrap a { color: inherit; text-decoration: none; }

/* ====================================================
   IGURUS TERMS & CONDITIONS PAGE — scoped under .pp-wrap
==================================================== */
.pp-wrap {
  --violet-950: #2B0510;
  --violet-900: #4A0A1D;
  --violet-800: #A41034;
  --violet-700: #A41034;
  --violet-600: #A41034;
  --violet-500: #D45A76;
  --violet-300: #FFFFFF;
  --violet-200: #F6D9DF;
  --violet-100: #FBEEF0;
  --violet-50:  #FDF5F6;
  --ink:        #221A38;
  --ink-soft:   #4A4063;
  --ink-faint:  #7C7494;
  --line:       #E7E1F5;
  --paper:      #FBFAFF;
  --paper-card: #FFFFFF;
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --maxw:  1180px;
  --radius: 18px;

  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pp-wrap *, .pp-wrap *::before, .pp-wrap *::after { box-sizing: border-box; }
.pp-wrap ::selection { background: var(--violet-200); color: var(--violet-900); }

/* ── HERO ── */
.pp-wrap .hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 12% 0%, #6B0E29 0%, var(--violet-900) 45%, var(--violet-950) 100%);
  color: #fff;
}
.pp-wrap .hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(164,16,52,.45), transparent 70%),
    radial-gradient(500px 280px at 100% 90%, rgba(196,181,253,.22), transparent 70%);
  pointer-events: none;
}
.pp-wrap .hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
}
.pp-wrap .hero-inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 86px 32px 120px;
}
.pp-wrap .eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet-300);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.pp-wrap .eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--violet-300); display: inline-block;
}
.pp-wrap .hero h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(46px, 7vw, 82px);
  line-height: .98; letter-spacing: -.03em;
  margin: 22px 0 0; color: #fff;
}
.pp-wrap .hero h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--violet-300);
}
.pp-wrap .hero-lede {
  max-width: 640px; margin: 24px 0 0;
  font-size: 21px; line-height: var(--lh-normal); color: #E9E3FB;
}
.pp-wrap .hero-meta {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--violet-200);
}
.pp-wrap .hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.pp-wrap .hero-meta dt { color: var(--violet-300); opacity: .75; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.pp-wrap .hero-meta dd { margin: 0; color: #fff; font-size: var(--fs-base); font-weight: 500; }

/* ── SUMMARY CARD ── */
.pp-wrap .summary-wrap {
  max-width: var(--maxw); margin: -72px auto 0;
  padding: 0 32px; position: relative; z-index: 5;
}
.pp-wrap .summary-card {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -34px rgba(46,16,101,.45);
  padding: 38px 44px;
  display: grid; grid-template-columns: 168px 1fr; gap: 36px;
}
.pp-wrap .summary-tag {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600);
}
.pp-wrap .summary-tag .tldr {
  display: block; font-size: var(--fs-4xl); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
  margin-top: 8px; text-transform: none;
}
.pp-wrap .summary-card p {
  margin: 0; font-size: var(--fs-lg); line-height: 1.72; color: var(--ink-soft);
}
.pp-wrap .summary-card strong { color: var(--ink); font-weight: 600; }

/* ── LAYOUT ── */
.pp-wrap .layout {
  max-width: var(--maxw); margin: 0 auto;
  padding: 72px 32px 40px;
  display: grid; grid-template-columns: 256px 1fr;
  gap: 64px; align-items: start;
}

/* TOC */
.pp-wrap .toc { position: sticky; top: 96px; font-family: var(--sans); }
.pp-wrap .toc-title {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 18px; padding-left: 14px;
}
.pp-wrap .toc ol { list-style: none; margin: 0; padding: 0; }
.pp-wrap .toc li { margin: 0; }
.pp-wrap .toc a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 14px; border-left: 2px solid var(--line);
  color: var(--ink-faint); text-decoration: none;
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  transition: color .15s, border-color .15s, background .15s;
}
.pp-wrap .toc a .num { font-size: var(--fs-xs); font-weight: 600; opacity: .7; min-width: 18px; }
.pp-wrap .toc a:hover { color: var(--violet-700); border-color: var(--violet-300); }
.pp-wrap .toc a.active {
  color: var(--violet-800); border-color: var(--violet-600);
  background: var(--violet-50); font-weight: 600;
}
.pp-wrap .toc a.active .num { opacity: 1; color: var(--violet-600); }

/* CONTENT */
.pp-wrap .content { min-width: 0; max-width: 760px; }
.pp-wrap section.policy { scroll-margin-top: 96px; padding-bottom: 64px; }
.pp-wrap section.policy + section.policy { border-top: 1px solid var(--line); padding-top: 56px; }

.pp-wrap .sec-head { display: flex; align-items: baseline; gap: 20px; margin: 0 0 8px; }
.pp-wrap .sec-num {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-xl);
  color: var(--violet-600); letter-spacing: .02em; flex-shrink: 0;
  line-height: 1;
}
.pp-wrap .sec-head h2 {
  font-family: var(--sans) !important; font-weight: 600 !important;
  font-size: clamp(27px, 3.4vw, 34px) !important;
  line-height: 1.12 !important; letter-spacing: -.02em !important;
  margin: 0 !important; color: var(--ink) !important;
}
.pp-wrap .sec-intro {
  margin: 0 0 26px 35px; color: var(--ink-soft); font-size: var(--fs-lg); max-width: 640px;
}
.pp-wrap .content p { margin: 0 0 18px 35px; max-width: 660px; }
.pp-wrap .content p.flush { margin-left: 0; }

/* Unordered Lists and Custom Items */
.pp-wrap .content ul { margin: 0 0 24px 35px; padding-left: 20px; color: var(--ink-soft); }
.pp-wrap .content ul li { margin-bottom: 10px; font-size: var(--fs-md); line-height: var(--lh-normal); }
.pp-wrap .content ul li strong { color: var(--ink); }

/* Ordered Lists */
.pp-wrap .content ol { margin: 0 0 24px 35px; padding-left: 20px; color: var(--ink-soft); }
.pp-wrap .content ol li { margin-bottom: 10px; font-size: var(--fs-md); line-height: var(--lh-normal); }
.pp-wrap .content ol li strong { color: var(--ink); }

/* Definition list */
.pp-wrap .deflist { margin: 0 0 8px 35px; padding: 0; list-style: none; display: grid; gap: 2px; }
.pp-wrap .deflist li {
  display: grid; grid-template-columns: 232px 1fr;
  gap: 8px 28px; padding: 15px 4px;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.pp-wrap .deflist li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .deflist dt {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-base);
  color: var(--violet-800); letter-spacing: -.01em;
}
.pp-wrap .deflist dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.62; }

/* Callout */
.pp-wrap .callout {
  margin: 8px 0 24px 35px; padding: 22px 26px; border-radius: 14px;
  background: linear-gradient(120deg, var(--violet-50), #fff);
  border: 1px solid var(--violet-200);
  display: flex; gap: 16px; align-items: flex-start;
}
.pp-wrap .callout.alert-danger-styled {
  background: linear-gradient(120deg, #FFF5F5, #ffffff);
  border-color: #FEB2B2;
}
.pp-wrap .callout.alert-danger-styled .ico {
  background: #E53E3E;
}
.pp-wrap .callout .ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--violet-600); color: #fff; display: grid; place-items: center;
}
.pp-wrap .callout p { margin: 0; font-size: var(--fs-md); color: var(--ink); margin-left: 0 !important; }
.pp-wrap .callout strong { color: var(--ink); }
.pp-wrap .callout.alert-danger-styled strong { color: #C53030; }
.pp-wrap .callout a { color: var(--violet-700); font-weight: 600; text-decoration: none; }
.pp-wrap .callout a:hover { text-decoration: underline; }

/* Rights / contact mini-cards */
.pp-wrap .cards { margin: 18px 0 24px 35px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-wrap .cards.solo { grid-template-columns: 1fr; }
.pp-wrap .cards.triple { grid-template-columns: 1fr 1fr 1fr; }
.pp-wrap .card {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; background: var(--paper-card);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.pp-wrap .card:hover {
  border-color: var(--violet-300); transform: translateY(-2px);
  box-shadow: 0 14px 28px -20px rgba(164,16,52,.5);
}
.pp-wrap .card h3 {
  font-family: var(--sans); font-size: var(--fs-base); font-weight: 600;
  margin: 0 0 6px; color: var(--violet-800);
  display: flex; align-items: center; gap: 9px;
}
.pp-wrap .card h3 .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-500); }
.pp-wrap .card p { margin: 0 !important; font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.55; margin-left: 0 !important; }
.pp-wrap .card .price-tag { font-family: var(--sans); font-size: var(--fs-2xl); font-weight: 700; color: var(--ink); margin-top: 8px; }

/* Contact strip */
.pp-wrap .contact-list { margin: 4px 0 0 35px; list-style: none; padding: 0; display: grid; gap: 0; }
.pp-wrap .contact-list li {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 6px 20px; padding: 16px 2px;
  border-bottom: 1px solid var(--line);
}
.pp-wrap .contact-list li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .contact-list .label { font-family: var(--sans); font-weight: 500; font-size: var(--fs-md); color: var(--ink); }
.pp-wrap .contact-list a { font-family: var(--sans); font-weight: 600; color: var(--violet-700); text-decoration: none; font-size: var(--fs-md); }
.pp-wrap .contact-list a:hover { text-decoration: underline; }
.pp-wrap .contact-list .plain { font-family: var(--sans); color: var(--ink-soft); font-size: var(--fs-base); }

/* ── Responsive ── */
@media (max-width: 920px) {
  .pp-wrap .layout { grid-template-columns: 1fr; gap: 32px; }
  .pp-wrap .toc { position: static; border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper-card); }
  .pp-wrap .toc ol { columns: 2; column-gap: 24px; }
  .pp-wrap .summary-card { grid-template-columns: 1fr; gap: 16px; padding: 30px 26px; }
  .pp-wrap .summary-tag .tldr { font-size: 34px; }
  .pp-wrap .cards.triple { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pp-wrap { font-size: var(--fs-md); }
  .pp-wrap .hero-inner { padding: 60px 22px 96px; }
  .pp-wrap .summary-wrap, .pp-wrap .layout { padding-left: 20px; padding-right: 20px; }
  .pp-wrap .deflist li { grid-template-columns: 1fr; gap: 4px; }
  .pp-wrap .cards { grid-template-columns: 1fr; }
  .pp-wrap .content p, .pp-wrap .sec-intro, .pp-wrap .deflist, .pp-wrap .content ul, .pp-wrap .content ol,
  .pp-wrap .callout, .pp-wrap .cards, .pp-wrap .contact-list { margin-left: 0; }
  .pp-wrap .sec-head { gap: 12px; }
  .pp-wrap .toc ol { columns: 1; }
}

/* ── privacy-policy ── */
/* ── Reset site container so .pp-wrap can be full-width ── */
/* Prevent global heading/link colours leaking in */
.pp-wrap h1,.pp-wrap h2,.pp-wrap h3,.pp-wrap h4,.pp-wrap h5,.pp-wrap h6 {
  color: inherit !important;
  font-family: inherit;
}
.pp-wrap a { color: inherit; text-decoration: none; }

/* ====================================================
   IGURUS PRIVACY PAGE — scoped under .pp-wrap
==================================================== */
.pp-wrap {
  --violet-950: #2B0510;
  --violet-900: #4A0A1D;
  --violet-800: #A41034;
  --violet-700: #A41034;
  --violet-600: #A41034;
  --violet-500: #D45A76;
  --violet-300: #FFFFFF;
  --violet-200: #F6D9DF;
  --violet-100: #FBEEF0;
  --violet-50:  #FDF5F6;
  --ink:        #221A38;
  --ink-soft:   #4A4063;
  --ink-faint:  #7C7494;
  --line:       #E7E1F5;
  --paper:      #FBFAFF;
  --paper-card: #FFFFFF;
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --maxw:  1180px;
  --radius: 18px;

  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pp-wrap *, .pp-wrap *::before, .pp-wrap *::after { box-sizing: border-box; }
.pp-wrap ::selection { background: var(--violet-200); color: var(--violet-900); }

/* ── HERO ── */
.pp-wrap .hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 12% 0%, #6B0E29 0%, var(--violet-900) 45%, var(--violet-950) 100%);
  color: #fff;
}
.pp-wrap .hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(164,16,52,.45), transparent 70%),
    radial-gradient(500px 280px at 100% 90%, rgba(196,181,253,.22), transparent 70%);
  pointer-events: none;
}
.pp-wrap .hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
}
.pp-wrap .hero-inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 86px 32px 120px;
}
.pp-wrap .eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet-300);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.pp-wrap .eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--violet-300); display: inline-block;
}
.pp-wrap .hero h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(46px, 7vw, 82px);
  line-height: .98; letter-spacing: -.03em;
  margin: 22px 0 0; color: #fff;
}
.pp-wrap .hero h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--violet-300);
}
.pp-wrap .hero-lede {
  max-width: 640px; margin: 24px 0 0;
  font-size: 21px; line-height: var(--lh-normal); color: #E9E3FB;
}
.pp-wrap .hero-meta {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--violet-200);
}
.pp-wrap .hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.pp-wrap .hero-meta dt { color: var(--violet-300); opacity: .75; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.pp-wrap .hero-meta dd { margin: 0; color: #fff; font-size: var(--fs-base); font-weight: 500; }

/* ── SUMMARY CARD ── */
.pp-wrap .summary-wrap {
  max-width: var(--maxw); margin: -72px auto 0;
  padding: 0 32px; position: relative; z-index: 5;
}
.pp-wrap .summary-card {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -34px rgba(46,16,101,.45);
  padding: 38px 44px;
  display: grid; grid-template-columns: 168px 1fr; gap: 36px;
}
.pp-wrap .summary-tag {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600);
}
.pp-wrap .summary-tag .tldr {
  display: block; font-size: var(--fs-4xl); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
  margin-top: 8px; text-transform: none;
}
.pp-wrap .summary-card p {
  margin: 0; font-size: var(--fs-lg); line-height: 1.72; color: var(--ink-soft);
}
.pp-wrap .summary-card strong { color: var(--ink); font-weight: 600; }

/* ── LAYOUT ── */
.pp-wrap .layout {
  max-width: var(--maxw); margin: 0 auto;
  padding: 72px 32px 40px;
  display: grid; grid-template-columns: 256px 1fr;
  gap: 64px; align-items: start;
}

/* TOC */
.pp-wrap .toc { position: sticky; top: 96px; font-family: var(--sans); }
.pp-wrap .toc-title {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 18px; padding-left: 14px;
}
.pp-wrap .toc ol { list-style: none; margin: 0; padding: 0; }
.pp-wrap .toc li { margin: 0; }
.pp-wrap .toc a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 14px; border-left: 2px solid var(--line);
  color: var(--ink-faint); text-decoration: none;
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  transition: color .15s, border-color .15s, background .15s;
}
.pp-wrap .toc a .num { font-size: var(--fs-xs); font-weight: 600; opacity: .7; min-width: 18px; }
.pp-wrap .toc a:hover { color: var(--violet-700); border-color: var(--violet-300); }
.pp-wrap .toc a.active {
  color: var(--violet-800); border-color: var(--violet-600);
  background: var(--violet-50); font-weight: 600;
}
.pp-wrap .toc a.active .num { opacity: 1; color: var(--violet-600); }

/* CONTENT */
.pp-wrap .content { min-width: 0; max-width: 760px; }
.pp-wrap section.policy { scroll-margin-top: 96px; padding-bottom: 64px; }
.pp-wrap section.policy + section.policy { border-top: 1px solid var(--line); padding-top: 56px; }

.pp-wrap .sec-head { display: flex; align-items: baseline; gap: 20px; margin: 0 0 8px; }
.pp-wrap .sec-num {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-xl);
  color: var(--violet-600); letter-spacing: .02em; flex-shrink: 0;
  line-height: 1;
}
.pp-wrap .sec-head h2 {
  font-family: var(--sans) !important; font-weight: 600 !important;
  font-size: clamp(27px, 3.4vw, 34px) !important;
  line-height: 1.12 !important; letter-spacing: -.02em !important;
  margin: 0 !important; color: var(--ink) !important;
}
.pp-wrap .sec-intro {
  margin: 0 0 26px 35px; color: var(--ink-soft); font-size: var(--fs-lg); max-width: 640px;
}
.pp-wrap .content p { margin: 0 0 18px 35px; max-width: 660px; }
.pp-wrap .content p.flush { margin-left: 0; }

/* Definition list */
.pp-wrap .deflist { margin: 0 0 8px 35px; padding: 0; list-style: none; display: grid; gap: 2px; }
.pp-wrap .deflist li {
  display: grid; grid-template-columns: 232px 1fr;
  gap: 8px 28px; padding: 15px 4px;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.pp-wrap .deflist li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .deflist dt {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-base);
  color: var(--violet-800); letter-spacing: -.01em;
}
.pp-wrap .deflist dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.62; }

/* Callout */
.pp-wrap .callout {
  margin: 8px 0 8px 35px; padding: 22px 26px; border-radius: 14px;
  background: linear-gradient(120deg, var(--violet-50), #fff);
  border: 1px solid var(--violet-200);
  display: flex; gap: 16px; align-items: flex-start;
}
.pp-wrap .callout .ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--violet-600); color: #fff; display: grid; place-items: center;
}
.pp-wrap .callout p { margin: 0; font-size: var(--fs-md); color: var(--ink); margin-left: 0 !important; }
.pp-wrap .callout strong { color: var(--violet-800); }
.pp-wrap .callout a { color: var(--violet-700); font-weight: 600; text-decoration: none; }
.pp-wrap .callout a:hover { text-decoration: underline; }

/* Rights / contact mini-cards */
.pp-wrap .cards { margin: 4px 0 0 35px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-wrap .cards.solo { grid-template-columns: 1fr; }
.pp-wrap .card {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; background: var(--paper-card);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.pp-wrap .card:hover {
  border-color: var(--violet-300); transform: translateY(-2px);
  box-shadow: 0 14px 28px -20px rgba(164,16,52,.5);
}
.pp-wrap .card h3 {
  font-family: var(--sans); font-size: var(--fs-base); font-weight: 600;
  margin: 0 0 6px; color: var(--violet-800);
  display: flex; align-items: center; gap: 9px;
}
.pp-wrap .card h3 .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-500); }
.pp-wrap .card p { margin: 0 !important; font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.55; }
.pp-wrap .card a { color: var(--violet-700); text-decoration: none; font-weight: 600; }
.pp-wrap .card a:hover { text-decoration: underline; }

/* Contact strip */
.pp-wrap .contact-list { margin: 4px 0 0 35px; list-style: none; padding: 0; display: grid; gap: 0; }
.pp-wrap .contact-list li {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 6px 20px; padding: 16px 2px;
  border-bottom: 1px solid var(--line);
}
.pp-wrap .contact-list li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .contact-list .label { font-family: var(--sans); font-weight: 500; font-size: var(--fs-md); color: var(--ink); }
.pp-wrap .contact-list a { font-family: var(--sans); font-weight: 600; color: var(--violet-700); text-decoration: none; font-size: var(--fs-md); }
.pp-wrap .contact-list a:hover { text-decoration: underline; }
.pp-wrap .contact-list .plain { font-family: var(--sans); color: var(--ink-soft); font-size: var(--fs-base); }

/* ── Responsive ── */
@media (max-width: 920px) {
  .pp-wrap .layout { grid-template-columns: 1fr; gap: 32px; }
  .pp-wrap .toc { position: static; border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper-card); }
  .pp-wrap .toc ol { columns: 2; column-gap: 24px; }
  .pp-wrap .summary-card { grid-template-columns: 1fr; gap: 16px; padding: 30px 26px; }
  .pp-wrap .summary-tag .tldr { font-size: 34px; }
}
@media (max-width: 640px) {
  .pp-wrap { font-size: var(--fs-md); }
  .pp-wrap .hero-inner { padding: 60px 22px 96px; }
  .pp-wrap .summary-wrap, .pp-wrap .layout { padding-left: 20px; padding-right: 20px; }
  .pp-wrap .deflist li { grid-template-columns: 1fr; gap: 4px; }
  .pp-wrap .cards { grid-template-columns: 1fr; }
  .pp-wrap .content p, .pp-wrap .sec-intro, .pp-wrap .deflist,
  .pp-wrap .callout, .pp-wrap .cards, .pp-wrap .contact-list { margin-left: 0; }
  .pp-wrap .sec-head { gap: 12px; }
  .pp-wrap .toc ol { columns: 1; }
}

/* ── master-services-agreement ── */
/* ── Reset site container so .pp-wrap can expand seamlessly ── */
/* Prevent global layout color leaks */
.pp-wrap h1, .pp-wrap h2, .pp-wrap h3, .pp-wrap h4, .pp-wrap h5, .pp-wrap h6 {
  color: inherit !important;
  font-family: inherit;
}
.pp-wrap a { color: inherit; text-decoration: none; }

/* ====================================================
   IGURUS PREMIUM DOCUMENT DESIGN MODULE
==================================================== */
.pp-wrap {
  --violet-950: #2B0510;
  --violet-900: #4A0A1D;
  --violet-800: #A41034;
  --violet-700: #A41034;
  --violet-600: #A41034;
  --violet-500: #D45A76;
  --violet-300: #FFFFFF;
  --violet-200: #F6D9DF;
  --violet-100: #FBEEF0;
  --violet-50:  #FDF5F6;
  --ink:        #221A38;
  --ink-soft:   #4A4063;
  --ink-faint:  #7C7494;
  --line:       #E7E1F5;
  --paper:      #FBFAFF;
  --paper-card: #FFFFFF;
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --maxw:  1180px;
  --radius: 18px;

  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pp-wrap *, .pp-wrap *::before, .pp-wrap *::after { box-sizing: border-box; }
.pp-wrap ::selection { background: var(--violet-200); color: var(--violet-900); }

/* ── HERO BANNER ── */
.pp-wrap .hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 12% 0%, #6B0E29 0%, var(--violet-900) 45%, var(--violet-950) 100%);
  color: #fff;
}
.pp-wrap .hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(164,16,52,.45), transparent 70%),
    radial-gradient(500px 280px at 100% 90%, rgba(196,181,253,.22), transparent 70%);
  pointer-events: none;
}
.pp-wrap .hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
}
.pp-wrap .hero-inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 86px 32px 120px;
}
.pp-wrap .eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet-300);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.pp-wrap .eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--violet-300); display: inline-block;
}
.pp-wrap .hero h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(42px, 6.5vw, 76px);
  line-height: 1.02; letter-spacing: -.03em;
  margin: 22px 0 0; color: #fff;
}
.pp-wrap .hero h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--violet-300);
}
.pp-wrap .hero-lede {
  max-width: 680px; margin: 24px 0 0;
  font-size: 21px; line-height: var(--lh-normal); color: #E9E3FB;
}
.pp-wrap .hero-meta {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--violet-200);
}
.pp-wrap .hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.pp-wrap .hero-meta dt { color: var(--violet-300); opacity: .75; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.pp-wrap .hero-meta dd { margin: 0; color: #fff; font-size: var(--fs-base); font-weight: 500; }

/* ── CONTEXTUAL OVERLAY SUMMARY ── */
.pp-wrap .summary-wrap {
  max-width: var(--maxw); margin: -72px auto 0;
  padding: 0 32px; position: relative; z-index: 5;
}
.pp-wrap .summary-card {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -34px rgba(46,16,101,.45);
  padding: 38px 44px;
  display: grid; grid-template-columns: 168px 1fr; gap: 36px;
}
.pp-wrap .summary-tag {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600);
}
.pp-wrap .summary-tag .tldr {
  display: block; font-size: var(--fs-4xl); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
  margin-top: 8px; text-transform: none;
}
.pp-wrap .summary-card p {
  margin: 0; font-size: var(--fs-lg); line-height: 1.72; color: var(--ink-soft);
}
.pp-wrap .summary-card strong { color: var(--ink); font-weight: 600; }

/* ── STRUCTURAL TWO-COLUMN GRID ── */
.pp-wrap .layout {
  max-width: var(--maxw); margin: 0 auto;
  padding: 72px 32px 40px;
  display: grid; grid-template-columns: 260px 1fr;
  gap: 64px; align-items: start;
}

/* TRACKING NAVIGATION SIDEBAR */
.pp-wrap .toc { position: sticky; top: 96px; font-family: var(--sans); }
.pp-wrap .toc-title {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 18px; padding-left: 14px;
}
.pp-wrap .toc ol { list-style: none; margin: 0; padding: 0; }
.pp-wrap .toc li { margin: 0; }
.pp-wrap .toc a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 14px; border-left: 2px solid var(--line);
  color: var(--ink-faint); text-decoration: none;
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  transition: color .15s, border-color .15s, background .15s;
}
.pp-wrap .toc a .num { font-size: var(--fs-xs); font-weight: 600; opacity: .7; min-width: 18px; }
.pp-wrap .toc a:hover { color: var(--violet-700); border-color: var(--violet-300); }
.pp-wrap .toc a.active {
  color: var(--violet-800); border-color: var(--violet-600);
  background: var(--violet-50); font-weight: 600;
}
.pp-wrap .toc a.active .num { opacity: 1; color: var(--violet-600); }

/* CONTENT MODULES */
.pp-wrap .content { min-width: 0; max-width: 760px; }
.pp-wrap section.policy { scroll-margin-top: 96px; padding-bottom: 64px; }
.pp-wrap section.policy + section.policy { border-top: 1px solid var(--line); padding-top: 56px; }

.pp-wrap .sec-head { display: flex; align-items: baseline; gap: 20px; margin: 0 0 16px; }
.pp-wrap .sec-num {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-xl);
  color: var(--violet-600); letter-spacing: .02em; flex-shrink: 0;
  line-height: 1;
}
.pp-wrap .sec-head h2 {
  font-family: var(--sans) !important; font-weight: 600 !important;
  font-size: clamp(24px, 3.2vw, 30px) !important;
  line-height: 1.15 !important; letter-spacing: -.02em !important;
  margin: 0 !important; color: var(--ink) !important;
}
.pp-wrap .sec-intro {
  margin: 0 0 26px 35px; color: var(--ink-soft); font-size: var(--fs-lg); max-width: 640px;
}
.pp-wrap .content p { margin: 0 0 18px 35px; max-width: 660px; }
.pp-wrap .content ul, .pp-wrap .content ol { margin: 12px 0 24px 35px; padding-left: 20px; color: var(--ink-soft); }
.pp-wrap .content li { margin-bottom: 10px; }
.pp-wrap .content strong { color: var(--ink); }

/* PREMIUM CARD COMPONENT BLOCK FOR INNER TEXT SUBSECTIONS */
.pp-wrap .sub-block-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0 24px 35px;
}
.pp-wrap .sub-block-card h3, .pp-wrap .sub-block-card h4 {
  font-family: var(--sans) !important;
  font-size: var(--fs-lg) !important;
  font-weight: 600 !important;
  color: var(--violet-900) !important;
  margin: 0 0 12px 0 !important;
}
.pp-wrap .sub-block-card h4 { font-size: var(--fs-md) !important; color: var(--violet-700) !important; }
.pp-wrap .sub-block-card p { margin-left: 0 !important; font-size: var(--fs-md); color: var(--ink-soft); }
.pp-wrap .sub-block-card p:last-child { margin-bottom: 0; }
.pp-wrap .sub-block-card ul, .pp-wrap .sub-block-card ol { margin-left: 0; padding-left: 18px; }

/* CALLOUT MESSAGE CONTAINERS */
.pp-wrap .callout {
  margin: 18px 0 24px 35px; padding: 22px 26px; border-radius: 14px;
  background: linear-gradient(120deg, var(--violet-50), #fff);
  border: 1px solid var(--violet-200);
  display: flex; gap: 16px; align-items: flex-start;
}
.pp-wrap .callout .ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--violet-600); color: #fff; display: grid; place-items: center;
}
.pp-wrap .callout p { margin: 0; font-size: var(--fs-md); color: var(--ink); margin-left: 0 !important; }
.pp-wrap .callout strong { color: var(--violet-800); }

/* STRUCTURED TERMINOLOGY GLOSSARIES */
.pp-wrap .deflist { margin: 0 0 8px 35px; padding: 0; list-style: none; display: grid; gap: 2px; }
.pp-wrap .deflist li {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 8px 28px; padding: 15px 4px;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.pp-wrap .deflist li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .deflist dt {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-base);
  color: var(--violet-800); letter-spacing: -.01em;
}
.pp-wrap .deflist dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-md); line-height: var(--lh-normal); }

/* Horizontal Dividers */
.pp-wrap hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0 32px 35px; }

/* ── RESPONSIVE ADAPTATIONS ── */
@media (max-width: 920px) {
  .pp-wrap .layout { grid-template-columns: 1fr; gap: 32px; }
  .pp-wrap .toc { position: static; border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper-card); }
  .pp-wrap .toc ol { columns: 2; column-gap: 24px; }
  .pp-wrap .summary-card { grid-template-columns: 1fr; gap: 16px; padding: 30px 26px; }
  .pp-wrap .summary-tag .tldr { font-size: 34px; }
}
@media (max-width: 640px) {
  .pp-wrap { font-size: var(--fs-md); }
  .pp-wrap .hero-inner { padding: 60px 22px 96px; }
  .pp-wrap .summary-wrap, .pp-wrap .layout { padding-left: 20px; padding-right: 20px; }
  .pp-wrap .deflist li { grid-template-columns: 1fr; gap: 4px; }
  .pp-wrap .content p, .pp-wrap .sec-intro, .pp-wrap .deflist, .pp-wrap .sub-block-card,
  .pp-wrap .callout, .pp-wrap .content ul, .pp-wrap .content ol, .pp-wrap hr { margin-left: 0; }
  .pp-wrap .sec-head { gap: 12px; }
  .pp-wrap .toc ol { columns: 1; }
}

/* ── intellectual-property-policy ── */
/* ── Reset site container so .pp-wrap can expand seamlessly ── */
/* Prevent global layout color leaks */
.pp-wrap h1, .pp-wrap h2, .pp-wrap h3, .pp-wrap h4, .pp-wrap h5, .pp-wrap h6 {
  color: inherit !important;
  font-family: inherit;
}
.pp-wrap a { color: inherit; text-decoration: none; }

/* ====================================================
   IGURUS PREMIUM DOCUMENT DESIGN MODULE
==================================================== */
.pp-wrap {
  --violet-950: #2B0510;
  --violet-900: #4A0A1D;
  --violet-800: #A41034; 
  --violet-700: #A41034;
  --violet-600: #A41034;
  --violet-500: #D45A76;
  --violet-300: #FFFFFF;
  --violet-200: #F6D9DF;
  --violet-100: #FBEEF0;
  --violet-50:  #FDF5F6;
  --ink:        #221A38;
  --ink-soft:   #4A4063;
  --ink-faint:  #7C7494;
  --line:       #E7E1F5;
  --paper:      #FBFAFF;
  --paper-card: #FFFFFF;
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --maxw:  1180px;
  --radius: 18px;

  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pp-wrap *, .pp-wrap *::before, .pp-wrap *::after { box-sizing: border-box; }
.pp-wrap ::selection { background: var(--violet-200); color: var(--violet-900); }

/* ── HERO BANNER ── */
.pp-wrap .hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 12% 0%, #6B0E29 0%, var(--violet-900) 45%, var(--violet-950) 100%);
  color: #fff;
}
.pp-wrap .hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(164,16,52,.45), transparent 70%),
    radial-gradient(500px 280px at 100% 90%, rgba(196,181,253,.22), transparent 70%);
  pointer-events: none;
}
.pp-wrap .hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
}
.pp-wrap .hero-inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 86px 32px 120px;
}
.pp-wrap .eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet-300);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.pp-wrap .eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--violet-300); display: inline-block;
}
.pp-wrap .hero h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(42px, 6.5vw, 76px);
  line-height: 1.02; letter-spacing: -.03em;
  margin: 22px 0 0; color: #fff;
}
.pp-wrap .hero h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--violet-300);
}
.pp-wrap .hero-lede {
  max-width: 680px; margin: 24px 0 0;
  font-size: 21px; line-height: var(--lh-normal); color: #E9E3FB;
}
.pp-wrap .hero-meta {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--violet-200);
}
.pp-wrap .hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.pp-wrap .hero-meta dt { color: var(--violet-300); opacity: .75; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.pp-wrap .hero-meta dd { margin: 0; color: #fff; font-size: var(--fs-base); font-weight: 500; }

/* ── CONTEXTUAL OVERLAY SUMMARY ── */
.pp-wrap .summary-wrap {
  max-width: var(--maxw); margin: -72px auto 0;
  padding: 0 32px; position: relative; z-index: 5;
}
.pp-wrap .summary-card {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -34px rgba(46,16,101,.45);
  padding: 38px 44px;
  display: grid; grid-template-columns: 168px 1fr; gap: 36px;
}
.pp-wrap .summary-tag {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600);
}
.pp-wrap .summary-tag .tldr {
  display: block; font-size: var(--fs-4xl); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
  margin-top: 8px; text-transform: none;
}
.pp-wrap .summary-card p {
  margin: 0; font-size: var(--fs-lg); line-height: 1.72; color: var(--ink-soft);
}
.pp-wrap .summary-card strong { color: var(--ink); font-weight: 600; }

/* ── STRUCTURAL TWO-COLUMN GRID ── */
.pp-wrap .layout {
  max-width: var(--maxw); margin: 0 auto;
  padding: 72px 32px 40px;
  display: grid; grid-template-columns: 260px 1fr;
  gap: 64px; align-items: start;
}

/* TRACKING NAVIGATION SIDEBAR */
.pp-wrap .toc { position: sticky; top: 96px; font-family: var(--sans); }
.pp-wrap .toc-title {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 18px; padding-left: 14px;
}
.pp-wrap .toc ol { list-style: none; margin: 0; padding: 0; }
.pp-wrap .toc li { margin: 0; }
.pp-wrap .toc a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 14px; border-left: 2px solid var(--line);
  color: var(--ink-faint); text-decoration: none;
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  transition: color .15s, border-color .15s, background .15s;
}
.pp-wrap .toc a .num { font-size: var(--fs-xs); font-weight: 600; opacity: .7; min-width: 18px; }
.pp-wrap .toc a:hover { color: var(--violet-700); border-color: var(--violet-300); }
.pp-wrap .toc a.active {
  color: var(--violet-800); border-color: var(--violet-600);
  background: var(--violet-50); font-weight: 600;
}
.pp-wrap .toc a.active .num { opacity: 1; color: var(--violet-600); }

/* CONTENT MODULES */
.pp-wrap .content { min-width: 0; max-width: 760px; }
.pp-wrap section.policy { scroll-margin-top: 96px; padding-bottom: 64px; }
.pp-wrap section.policy + section.policy { border-top: 1px solid var(--line); padding-top: 56px; }

.pp-wrap .sec-head { display: flex; align-items: baseline; gap: 20px; margin: 0 0 16px; }
.pp-wrap .sec-num {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-xl);
  color: var(--violet-600); letter-spacing: .02em; flex-shrink: 0;
  line-height: 1;
}
.pp-wrap .sec-head h2 {
  font-family: var(--sans) !important; font-weight: 600 !important;
  font-size: clamp(24px, 3.2vw, 30px) !important;
  line-height: 1.15 !important; letter-spacing: -.02em !important;
  margin: 0 !important; color: var(--ink) !important;
}
.pp-wrap .sec-intro {
  margin: 0 0 26px 35px; color: var(--ink-soft); font-size: var(--fs-lg); max-width: 640px;
}
.pp-wrap .content p { margin: 0 0 18px 35px; max-width: 660px; }
.pp-wrap .content ul, .pp-wrap .content ol { margin: 12px 0 24px 35px; padding-left: 20px; color: var(--ink-soft); }
.pp-wrap .content li { margin-bottom: 10px; }
.pp-wrap .content strong { color: var(--ink); }

/* PREMIUM CARD COMPONENT BLOCK FOR INNER TEXT SUBSECTIONS */
.pp-wrap .sub-block-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0 24px 35px;
}
.pp-wrap .sub-block-card h3, .pp-wrap .sub-block-card h4 {
  font-family: var(--sans) !important;
  font-size: var(--fs-lg) !important;
  font-weight: 600 !important;
  color: var(--violet-900) !important;
  margin: 0 0 12px 0 !important;
}
.pp-wrap .sub-block-card h4 { font-size: var(--fs-md) !important; color: var(--violet-700) !important; }
.pp-wrap .sub-block-card p { margin-left: 0 !important; font-size: var(--fs-md); color: var(--ink-soft); }
.pp-wrap .sub-block-card p:last-child { margin-bottom: 0; }
.pp-wrap .sub-block-card ul, .pp-wrap .sub-block-card ol { margin-left: 0; padding-left: 18px; }

/* CALLOUT MESSAGE CONTAINERS */
.pp-wrap .callout {
  margin: 18px 0 24px 35px; padding: 22px 26px; border-radius: 14px;
  background: linear-gradient(120deg, var(--violet-50), #fff);
  border: 1px solid var(--violet-200);
  display: flex; gap: 16px; align-items: flex-start;
}
.pp-wrap .callout .ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--violet-600); color: #fff; display: grid; place-items: center;
}
.pp-wrap .callout p { margin: 0; font-size: var(--fs-md); color: var(--ink); margin-left: 0 !important; }
.pp-wrap .callout strong { color: var(--violet-800); }

/* STRUCTURED TERMINOLOGY GLOSSARIES */
.pp-wrap .deflist { margin: 0 0 8px 35px; padding: 0; list-style: none; display: grid; gap: 2px; }
.pp-wrap .deflist li {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 8px 28px; padding: 15px 4px;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.pp-wrap .deflist li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .deflist dt {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-base);
  color: var(--violet-800); letter-spacing: -.01em;
}
.pp-wrap .deflist dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-md); line-height: var(--lh-normal); }

/* Horizontal Dividers */
.pp-wrap hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0 32px 35px; }

/* ── RESPONSIVE ADAPTATIONS ── */
@media (max-width: 920px) {
  .pp-wrap .layout { grid-template-columns: 1fr; gap: 32px; }
  .pp-wrap .toc { position: static; border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper-card); }
  .pp-wrap .toc ol { columns: 2; column-gap: 24px; }
  .pp-wrap .summary-card { grid-template-columns: 1fr; gap: 16px; padding: 30px 26px; }
  .pp-wrap .summary-tag .tldr { font-size: 34px; }
}
@media (max-width: 640px) {
  .pp-wrap { font-size: var(--fs-md); }
  .pp-wrap .hero-inner { padding: 60px 22px 96px; }
  .pp-wrap .summary-wrap, .pp-wrap .layout { padding-left: 20px; padding-right: 20px; }
  .pp-wrap .deflist li { grid-template-columns: 1fr; gap: 4px; }
  .pp-wrap .content p, .pp-wrap .sec-intro, .pp-wrap .deflist, .pp-wrap .sub-block-card,
  .pp-wrap .callout, .pp-wrap .content ul, .pp-wrap .content ol, .pp-wrap hr { margin-left: 0; }
  .pp-wrap .sec-head { gap: 12px; }
  .pp-wrap .toc ol { columns: 1; }
}

/* ── igurus-api-license-agreement ── */
/* ── Reset site container so .pp-wrap can expand seamlessly ── */
/* Prevent global layout color leaks */
.pp-wrap h1, .pp-wrap h2, .pp-wrap h3, .pp-wrap h4, .pp-wrap h5, .pp-wrap h6 {
  color: inherit !important;
  font-family: inherit;
}
.pp-wrap a { color: inherit; text-decoration: none; }

/* ====================================================
   IGURUS PREMIUM DOCUMENT DESIGN MODULE
==================================================== */
.pp-wrap {
  --violet-950: #2B0510;
  --violet-900: #4A0A1D;
  --violet-800: #A41034; 
  --violet-700: #A41034;
  --violet-600: #A41034;
  --violet-500: #D45A76;
  --violet-300: #FFFFFF;
  --violet-200: #F6D9DF;
  --violet-100: #FBEEF0;
  --violet-50:  #FDF5F6;
  --ink:        #221A38;
  --ink-soft:   #4A4063;
  --ink-faint:  #7C7494;
  --line:       #E7E1F5;
  --paper:      #FBFAFF;
  --paper-card: #FFFFFF;
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --maxw:  1180px;
  --radius: 18px;

  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pp-wrap *, .pp-wrap *::before, .pp-wrap *::after { box-sizing: border-box; }
.pp-wrap ::selection { background: var(--violet-200); color: var(--violet-900); }

/* ── HERO BANNER ── */
.pp-wrap .hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 12% 0%, #6B0E29 0%, var(--violet-900) 45%, var(--violet-950) 100%);
  color: #fff;
}
.pp-wrap .hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(164,16,52,.45), transparent 70%),
    radial-gradient(500px 280px at 100% 90%, rgba(196,181,253,.22), transparent 70%);
  pointer-events: none;
}
.pp-wrap .hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
}
.pp-wrap .hero-inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 86px 32px 120px;
}
.pp-wrap .eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet-300);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.pp-wrap .eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--violet-300); display: inline-block;
}
.pp-wrap .hero h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(42px, 6.5vw, 76px);
  line-height: 1.02; letter-spacing: -.03em;
  margin: 22px 0 0; color: #fff;
}
.pp-wrap .hero h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--violet-300);
}
.pp-wrap .hero-lede {
  max-width: 680px; margin: 24px 0 0;
  font-size: 21px; line-height: var(--lh-normal); color: #E9E3FB;
}
.pp-wrap .hero-meta {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--violet-200);
}
.pp-wrap .hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.pp-wrap .hero-meta dt { color: var(--violet-300); opacity: .75; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.pp-wrap .hero-meta dd { margin: 0; color: #fff; font-size: var(--fs-base); font-weight: 500; }

/* ── CONTEXTUAL OVERLAY SUMMARY ── */
.pp-wrap .summary-wrap {
  max-width: var(--maxw); margin: -72px auto 0;
  padding: 0 32px; position: relative; z-index: 5;
}
.pp-wrap .summary-card {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -34px rgba(46,16,101,.45);
  padding: 38px 44px;
  display: grid; grid-template-columns: 168px 1fr; gap: 36px;
}
.pp-wrap .summary-tag {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600);
}
.pp-wrap .summary-tag .tldr {
  display: block; font-size: var(--fs-4xl); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
  margin-top: 8px; text-transform: none;
}
.pp-wrap .summary-card p {
  margin: 0; font-size: var(--fs-lg); line-height: 1.72; color: var(--ink-soft);
}
.pp-wrap .summary-card strong { color: var(--ink); font-weight: 600; }

/* ── STRUCTURAL TWO-COLUMN GRID ── */
.pp-wrap .layout {
  max-width: var(--maxw); margin: 0 auto;
  padding: 72px 32px 40px;
  display: grid; grid-template-columns: 260px 1fr;
  gap: 64px; align-items: start;
}

/* TRACKING NAVIGATION SIDEBAR */
.pp-wrap .toc { position: sticky; top: 96px; font-family: var(--sans); }
.pp-wrap .toc-title {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 18px; padding-left: 14px;
}
.pp-wrap .toc ol { list-style: none; margin: 0; padding: 0; }
.pp-wrap .toc li { margin: 0; }
.pp-wrap .toc a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 14px; border-left: 2px solid var(--line);
  color: var(--ink-faint); text-decoration: none;
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  transition: color .15s, border-color .15s, background .15s;
}
.pp-wrap .toc a .num { font-size: var(--fs-xs); font-weight: 600; opacity: .7; min-width: 18px; }
.pp-wrap .toc a:hover { color: var(--violet-700); border-color: var(--violet-300); }
.pp-wrap .toc a.active {
  color: var(--violet-800); border-color: var(--violet-600);
  background: var(--violet-50); font-weight: 600;
}
.pp-wrap .toc a.active .num { opacity: 1; color: var(--violet-600); }

/* CONTENT MODULES */
.pp-wrap .content { min-width: 0; max-width: 760px; }
.pp-wrap section.policy { scroll-margin-top: 96px; padding-bottom: 64px; }
.pp-wrap section.policy + section.policy { border-top: 1px solid var(--line); padding-top: 56px; }

.pp-wrap .sec-head { display: flex; align-items: baseline; gap: 20px; margin: 0 0 16px; }
.pp-wrap .sec-num {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-xl);
  color: var(--violet-600); letter-spacing: .02em; flex-shrink: 0;
  line-height: 1;
}
.pp-wrap .sec-head h2 {
  font-family: var(--sans) !important; font-weight: 600 !important;
  font-size: clamp(24px, 3.2vw, 30px) !important;
  line-height: 1.15 !important; letter-spacing: -.02em !important;
  margin: 0 !important; color: var(--ink) !important;
}
.pp-wrap .sec-intro {
  margin: 0 0 26px 35px; color: var(--ink-soft); font-size: var(--fs-lg); max-width: 640px;
}
.pp-wrap .content p { margin: 0 0 18px 35px; max-width: 660px; }
.pp-wrap .content ul, .pp-wrap .content ol { margin: 12px 0 24px 35px; padding-left: 20px; color: var(--ink-soft); }
.pp-wrap .content li { margin-bottom: 10px; }
.pp-wrap .content strong { color: var(--ink); }

/* PREMIUM CARD COMPONENT BLOCK FOR INNER TEXT SUBSECTIONS */
.pp-wrap .sub-block-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0 24px 35px;
}
.pp-wrap .sub-block-card h3, .pp-wrap .sub-block-card h4 {
  font-family: var(--sans) !important;
  font-size: var(--fs-lg) !important;
  font-weight: 600 !important;
  color: var(--violet-900) !important;
  margin: 0 0 12px 0 !important;
}
.pp-wrap .sub-block-card h4 { font-size: var(--fs-md) !important; color: var(--violet-700) !important; }
.pp-wrap .sub-block-card p { margin-left: 0 !important; font-size: var(--fs-md); color: var(--ink-soft); }
.pp-wrap .sub-block-card p:last-child { margin-bottom: 0; }
.pp-wrap .sub-block-card ul, .pp-wrap .sub-block-card ol { margin-left: 0; padding-left: 18px; }

/* CALLOUT MESSAGE CONTAINERS */
.pp-wrap .callout {
  margin: 18px 0 24px 35px; padding: 22px 26px; border-radius: 14px;
  background: linear-gradient(120deg, var(--violet-50), #fff);
  border: 1px solid var(--violet-200);
  display: flex; gap: 16px; align-items: flex-start;
}
.pp-wrap .callout .ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--violet-600); color: #fff; display: grid; place-items: center;
}
.pp-wrap .callout p { margin: 0; font-size: var(--fs-md); color: var(--ink); margin-left: 0 !important; }
.pp-wrap .callout strong { color: var(--violet-800); }

/* STRUCTURED TERMINOLOGY GLOSSARIES */
.pp-wrap .deflist { margin: 0 0 8px 35px; padding: 0; list-style: none; display: grid; gap: 2px; }
.pp-wrap .deflist li {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 8px 28px; padding: 15px 4px;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.pp-wrap .deflist li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .deflist dt {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-base);
  color: var(--violet-800); letter-spacing: -.01em;
}
.pp-wrap .deflist dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-md); line-height: var(--lh-normal); }

/* Horizontal Dividers */
.pp-wrap hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0 32px 35px; }

/* ── RESPONSIVE ADAPTATIONS ── */
@media (max-width: 920px) {
  .pp-wrap .layout { grid-template-columns: 1fr; gap: 32px; }
  .pp-wrap .toc { position: static; border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper-card); }
  .pp-wrap .toc ol { columns: 2; column-gap: 24px; }
  .pp-wrap .summary-card { grid-template-columns: 1fr; gap: 16px; padding: 30px 26px; }
  .pp-wrap .summary-tag .tldr { font-size: 34px; }
}
@media (max-width: 640px) {
  .pp-wrap { font-size: var(--fs-md); }
  .pp-wrap .hero-inner { padding: 60px 22px 96px; }
  .pp-wrap .summary-wrap, .pp-wrap .layout { padding-left: 20px; padding-right: 20px; }
  .pp-wrap .deflist li { grid-template-columns: 1fr; gap: 4px; }
  .pp-wrap .content p, .pp-wrap .sec-intro, .pp-wrap .deflist, .pp-wrap .sub-block-card,
  .pp-wrap .callout, .pp-wrap .content ul, .pp-wrap .content ol, .pp-wrap hr { margin-left: 0; }
  .pp-wrap .sec-head { gap: 12px; }
  .pp-wrap .toc ol { columns: 1; }
}

/* ── legal-page ── */
:root {
  --cp-violet-950:#2B0510;--cp-violet-900:#4A0A1D;--cp-violet-800:#6B0E29;
  --cp-violet-700:#7A0D27;--cp-violet-600:#A41034;--cp-violet-500:#A41034;
  --cp-violet-400:#D45A76;--cp-violet-300:#FFFFFF;--cp-violet-200:#FFFFFF;
  --cp-violet-100:#FBEEF0;--cp-violet-50:#FDF5F6;
  --cp-ink:#1c1630;--cp-ink-2:#403955;--cp-ink-3:#6b6582;
  --cp-line:#e9e4f5;--cp-line-2:#f1edfa;--cp-bg:#faf9fe;--cp-card:#ffffff;
  --cp-serif:"Newsreader","Lora",Georgia,serif;
  --cp-sans:"Space Grotesk","Inter",system-ui,sans-serif;
  --cp-display:"Outfit","Space Grotesk",system-ui,sans-serif;
  --cp-maxw:1200px;
}
.cp-scope *{box-sizing:border-box;}
.cp-scope{font-family:var(--cp-serif);color:var(--cp-ink-2);background:var(--cp-bg);}
.cp-shell{max-width:var(--cp-maxw);margin:0 auto;padding:0 32px;}
#cp-progress{position:fixed;top:0;left:0;z-index:9999;height:3px;width:0%;background:linear-gradient(90deg,var(--cp-violet-600),var(--cp-violet-300));transition:width .1s linear;}
.cp-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(120% 130% at 8% 0%,rgba(164,16,52,.55) 0%,transparent 55%),radial-gradient(90% 100% at 100% 90%,rgba(164,16,52,.32) 0%,transparent 55%),linear-gradient(160deg,var(--cp-violet-950) 0%,#4A0A1D 48%,#1C0509 100%);}
.cp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 110% 100% at 50% 0%,#000 38%,transparent 82%);mask-image:radial-gradient(ellipse 110% 100% at 50% 0%,#000 38%,transparent 82%);}
.cp-hero__inner{position:relative;z-index:2;padding-top:60px;padding-bottom:84px;}
.cp-crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--cp-sans);font-size:12.5px;font-weight:500;color:rgba(255,255,255,.5);margin:0 0 30px;padding:0;list-style:none;}
.cp-crumb a{color:var(--cp-violet-200);text-decoration:none;transition:color .2s;}
.cp-crumb a:hover{color:#fff;}
.cp-crumb .sep{opacity:.5;font-size:10px;}
.cp-eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--cp-sans);font-size: var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--cp-violet-300);margin:0 0 20px;}
.cp-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--cp-violet-300);}
.cp-title{font-family:var(--cp-display);font-weight:800;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;letter-spacing:-0.035em;color:#fff;margin:0 0 22px;max-width:14ch;text-wrap:balance;}
.cp-title .accent{background:linear-gradient(100deg,var(--cp-violet-200),#93c5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.cp-lede{font-family:var(--cp-serif);font-size:1.2rem;line-height: var(--lh-normal);color:rgba(255,255,255,.7);max-width:600px;margin:0 0 32px;}
.cp-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.cp-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:7px 15px;font-family:var(--cp-sans);font-size:12.5px;color:rgba(255,255,255,.72);}
.cp-chip svg{width:13px;height:13px;color:var(--cp-violet-300);flex:none;}
.cp-chip strong{color:#fff;font-weight:600;}
.cp-actions{display:flex;gap:11px;margin-top:32px;flex-wrap:wrap;}
.cp-btn{display:inline-flex;align-items:center;gap:8px;border-radius:11px;padding:11px 22px;font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:transform .18s,box-shadow .18s,background .2s,opacity .2s;}
.cp-btn svg{width:15px;height:15px;}
.cp-btn:hover{transform:translateY(-2px);text-decoration:none;}
.cp-btn--primary{background:linear-gradient(135deg,var(--cp-violet-500),var(--cp-violet-700));color:#fff;box-shadow:0 6px 22px rgba(164,16,52,.42);}
.cp-btn--primary:hover{color:#fff;box-shadow:0 10px 28px rgba(164,16,52,.5);}
.cp-btn--ghost{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);color:rgba(255,255,255,.85);}
.cp-btn--ghost:hover{color:#fff;background:rgba(255,255,255,.13);}
.cp-body{padding:0 0 96px;}
.cp-layout{display:grid;grid-template-columns:268px 1fr;gap:56px;align-items:start;padding-top:48px;}
.cp-layout.cp-solo{grid-template-columns:minmax(0,820px);justify-content:center;}
.cp-layout.cp-solo .cp-toc-wrap{display:none;}
.cp-toc-wrap{position:sticky;top:32px;}
.cp-toc-toggle{display:none;width:100%;text-align:left;align-items:center;justify-content:space-between;gap:10px;background:var(--cp-card);border:1.5px solid var(--cp-line);border-radius:13px;padding:13px 18px;font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:600;color:var(--cp-ink-2);cursor:pointer;box-shadow:0 2px 10px rgba(40,16,80,.05);}
.cp-toc-toggle svg{width:13px;height:13px;color:var(--cp-violet-500);transition:transform .25s;}
.cp-toc-toggle.open svg.chev{transform:rotate(180deg);}
.cp-toc-card{background:var(--cp-card);border:1.5px solid var(--cp-line);border-radius:18px;overflow:hidden;box-shadow:0 6px 24px rgba(40,16,80,.06);}
.cp-toc-head{display:flex;align-items:center;gap:10px;padding:16px 20px 14px;border-bottom:1px solid var(--cp-line-2);}
.cp-toc-head-label{font-family:var(--cp-sans);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--cp-ink-3);white-space:nowrap;}
.cp-toc-prog{flex:1;height:3px;background:var(--cp-line);border-radius:3px;overflow:hidden;}
.cp-toc-prog-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--cp-violet-500),var(--cp-violet-300));transition:width .12s;}
.cp-toc-list{list-style:none;padding:10px 0;margin:0;max-height:62vh;overflow-y:auto;}
.cp-toc-list::-webkit-scrollbar{width:4px;}
.cp-toc-list::-webkit-scrollbar-thumb{background:var(--cp-violet-200);border-radius:4px;}
.cp-toc-list a{display:flex;align-items:baseline;gap:10px;padding:7px 20px;font-family:var(--cp-sans);font-size:12.5px;line-height:1.42;color:var(--cp-ink-3);text-decoration:none;border-left:2px solid transparent;transition:color .15s,background .15s,border-color .15s;}
.cp-toc-list a .num{font-size:10px;font-weight:700;color:var(--cp-violet-300);min-width:18px;flex:none;}
.cp-toc-list a.sub{padding-left:38px;font-size: var(--fs-xs);}
.cp-toc-list a.sub .num{display:none;}
.cp-toc-list a:hover{color:var(--cp-violet-700);background:var(--cp-violet-50);border-left-color:var(--cp-violet-200);}
.cp-toc-list a.active{color:var(--cp-violet-800);background:var(--cp-violet-50);border-left-color:var(--cp-violet-600);font-weight:600;}
.cp-toc-list a.active .num{color:var(--cp-violet-600);}
.cp-toc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 20px;border-top:1px solid var(--cp-line-2);}
.cp-toc-back{display:inline-flex;align-items:center;gap:7px;font-family:var(--cp-sans);font-size: var(--fs-xs);font-weight:600;color:var(--cp-violet-600);text-decoration:none;padding:6px 10px;border-radius:8px;transition:background .15s;}
.cp-toc-back svg{width:12px;height:12px;}
.cp-toc-back:hover{background:var(--cp-violet-50);text-decoration:none;}
.cp-toc-count{font-family:var(--cp-sans);font-size: var(--fs-xs);color:var(--cp-ink-3);background:var(--cp-violet-50);padding:3px 10px;border-radius:999px;}
.cp-article{min-width:0;}
.cp-prose{font-family:var(--cp-serif);font-size: var(--fs-lg);line-height: var(--lh-relaxed);color:var(--cp-ink-2);max-width:760px;}
.cp-prose ::selection{background:var(--cp-violet-100);color:var(--cp-violet-900);}
.cp-prose p{margin:0 0 1.15em;}
.cp-prose p strong,.cp-prose li strong{color:var(--cp-ink);font-weight:600;}
.cp-prose a{color:var(--cp-violet-600);font-weight:500;text-decoration:underline;text-decoration-color:var(--cp-violet-200);text-underline-offset:2px;transition:color .15s;word-break:break-word;}
.cp-prose a:hover{color:var(--cp-violet-800);text-decoration-color:var(--cp-violet-500);}
.cp-prose h1,.cp-prose h2,.cp-prose .ig-sh1{display:flex;align-items:baseline;gap:16px;font-family:var(--cp-display);font-weight:800;font-size:clamp(1.45rem,3vw,2rem);line-height:1.15;letter-spacing:-0.025em;color:var(--cp-ink);margin:0;padding:1.9em 0 .5em;border-top:1px solid var(--cp-line);scroll-margin-top:32px;text-wrap:balance;}
.cp-prose > :is(h1,h2,.ig-sh1):first-child,.cp-prose .ig-sh1.is-first{border-top:none;padding-top:.2em;}
.ig-sh1-num{font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:700;color:var(--cp-violet-400);min-width:26px;flex:none;line-height:2.2;}
.cp-prose h3,.cp-prose .ig-sh2{font-family:var(--cp-display);font-weight:700;font-size:1.18rem;color:var(--cp-ink);line-height: var(--lh-snug);margin:1.7em 0 .5em;padding:9px 16px;background:linear-gradient(120deg,var(--cp-violet-50),#fff);border-left:3px solid var(--cp-violet-500);border-radius:0 10px 10px 0;scroll-margin-top:32px;}
.cp-prose h4,.cp-prose .ig-sh3{font-family:var(--cp-sans);font-weight:600;font-size:1rem;color:var(--cp-ink-2);margin:1.4em 0 .4em;padding:0 0 0 13px;border-left:2px solid var(--cp-violet-200);scroll-margin-top:32px;}
.cp-prose h5,.cp-prose h6{font-family:var(--cp-sans);font-weight:600;font-size:.95rem;color:var(--cp-ink-2);margin:1.3em 0 .35em;}
.cp-prose .ig-slabel{font-family:var(--cp-sans);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--cp-violet-500);margin:1.6em 0 .35em;}
.cp-prose .ig-smixed{margin-bottom:.9em;}
.cp-prose .ig-smixed > strong:first-child{font-family:var(--cp-sans);font-size:1rem;font-weight:700;color:var(--cp-ink);display:block;margin-bottom:.15em;}
.cp-prose ul,.cp-prose ol{margin:.4em 0 1.2em;padding-left:1.6em;}
.cp-prose li{margin-bottom:.45em;font-size: var(--fs-md);line-height: var(--lh-relaxed);}
.cp-prose ul li::marker{color:var(--cp-violet-400);}
.cp-prose ol li::marker{color:var(--cp-violet-500);font-weight:700;font-family:var(--cp-sans);}
.cp-prose ul ul,.cp-prose ol ol,.cp-prose ul ol,.cp-prose ol ul{margin:.4em 0 .5em;}
.cp-prose span[style*="mso-list: Ignore"],.cp-prose span[style*="mso-list:Ignore"]{display:none;}
.cp-prose hr{border:none;height:1px;margin:2.4em 0;background:linear-gradient(90deg,transparent,var(--cp-violet-200) 22%,var(--cp-violet-100) 50%,var(--cp-violet-200) 78%,transparent);}
.cp-prose blockquote{border-left:4px solid var(--cp-violet-500);margin:1.8em 0;padding:16px 24px;background:var(--cp-violet-50);border-radius:0 13px 13px 0;color:var(--cp-ink-2);font-style:italic;}
.cp-prose blockquote p:last-child{margin-bottom:0;}
.cp-prose .cp-table-wrap{overflow-x:auto;margin:1.5em 0;border:1px solid var(--cp-line);border-radius:13px;}
.cp-prose table{border-collapse:collapse;width:100%;font-family:var(--cp-sans);font-size: var(--fs-sm);}
.cp-prose th,.cp-prose td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--cp-line);vertical-align:top;}
.cp-prose thead th{background:var(--cp-violet-50);color:var(--cp-violet-800);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;}
.cp-prose tbody tr:last-child td{border-bottom:none;}
.cp-prose tbody tr:hover{background:var(--cp-line-2);}
.cp-prose img{max-width:100%;height:auto;border-radius:13px;margin:1.2em 0;border:1px solid var(--cp-line);}
.cp-prose figure{margin:1.5em 0;}
.cp-prose figcaption{font-family:var(--cp-sans);font-size: var(--fs-sm);color:var(--cp-ink-3);text-align:center;margin-top:8px;}
.cp-prose code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.88em;background:var(--cp-violet-50);color:var(--cp-violet-800);padding:2px 7px;border-radius:6px;border:1px solid var(--cp-line);}
.cp-prose pre{background:var(--cp-violet-950);color:#e9e3fb;padding:18px 22px;border-radius:13px;overflow-x:auto;margin:1.5em 0;font-size: var(--fs-sm);line-height: var(--lh-normal);}
.cp-prose pre code{background:none;border:none;color:inherit;padding:0;}
.cp-prose dl{margin:1.2em 0;}
.cp-prose dt{font-family:var(--cp-sans);font-weight:700;color:var(--cp-ink);margin-top:1em;}
.cp-prose dd{margin:.2em 0 0;padding-left:0;}
.cp-prose p:empty{display:none;}
.ig-built-toc{background:linear-gradient(135deg,var(--cp-violet-50),#eef4ff);border:1px solid rgba(164,16,52,.14);border-radius:16px;padding:22px 26px;margin:1.4em 0 2.2em;}
.ig-built-toc > :is(.ig-sh1,h1,h2){font-family:var(--cp-sans);font-size: var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--cp-violet-500);border-top:none;padding:0 0 12px;margin:0 0 6px;}
.ig-built-toc .ig-sh1-num{display:none;}
.ig-built-toc ol,.ig-built-toc ul{display:grid;grid-template-columns:1fr 1fr;gap:.5em 2.4em;margin:0;padding:0;list-style:none;counter-reset:igtoc;}
.ig-built-toc li{font-size: var(--fs-sm);color:var(--cp-ink-2);line-height:1.45;padding-left:1.9em;position:relative;}
.ig-built-toc ol li{counter-increment:igtoc;}
.ig-built-toc ol li::before{content:counter(igtoc)".";position:absolute;left:0;top:0;font-family:var(--cp-sans);font-weight:700;color:var(--cp-violet-400);font-size: var(--fs-xs);}
.ig-built-toc ul li::before{content:"";position:absolute;left:.5em;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--cp-violet-300);}
@media(max-width:560px){.ig-built-toc ol,.ig-built-toc ul{grid-template-columns:1fr;}}
.ig-pledge{display:flex;gap:15px;align-items:flex-start;background:linear-gradient(120deg,#FDF5F6,#fff);border:1px solid var(--cp-violet-100);border-radius:15px;padding:18px 22px;margin:1.3em 0;}
.ig-pledge::before{content:"";width:34px;height:34px;flex:none;border-radius:10px;margin-top:2px;background:var(--cp-violet-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/18px no-repeat;}
.ig-pledge p{margin:0!important;font-size:16.5px!important;color:var(--cp-ink)!important;}
.cp-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-top:52px;max-width:760px;background:linear-gradient(135deg,var(--cp-violet-950),var(--cp-violet-900));border:1px solid rgba(167,139,250,.2);border-radius:20px;padding:30px 34px;}
.cp-cta__text strong{display:block;font-family:var(--cp-display);font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:5px;}
.cp-cta__text span{font-family:var(--cp-sans);font-size: var(--fs-sm);color:rgba(255,255,255,.55);}
.cp-cta__btn{display:inline-flex;align-items:center;gap:9px;flex:none;white-space:nowrap;background:linear-gradient(135deg,var(--cp-violet-500),var(--cp-violet-700));color:#fff;border-radius:11px;padding:13px 26px;font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:700;text-decoration:none;box-shadow:0 6px 22px rgba(164,16,52,.4);transition:transform .18s,opacity .2s;}
.cp-cta__btn svg{width:15px;height:15px;}
.cp-cta__btn:hover{transform:translateY(-2px);opacity:.92;color:#fff;text-decoration:none;}
.cp-pagefoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;border-top:1px solid var(--cp-line);margin-top:36px;padding-top:28px;max-width:760px;}
.cp-foot-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:600;color:var(--cp-violet-700);text-decoration:none;padding:10px 18px;border:1.5px solid var(--cp-line);border-radius:11px;transition:all .18s;}
.cp-foot-back svg{width:14px;height:14px;}
.cp-foot-back:hover{border-color:var(--cp-violet-300);background:var(--cp-violet-50);color:var(--cp-violet-800);text-decoration:none;}
.cp-foot-date{font-family:var(--cp-sans);font-size: var(--fs-xs);color:var(--cp-ink-3);display:flex;align-items:center;gap:7px;}
.cp-foot-date svg{width:13px;height:13px;color:var(--cp-violet-400);}
#cp-totop{position:fixed;right:26px;bottom:26px;z-index:60;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--cp-violet-500),var(--cp-violet-700));color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(164,16,52,.45);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s;}
#cp-totop.show{opacity:1;visibility:visible;transform:translateY(0);}
#cp-totop:hover{transform:translateY(-3px);}
#cp-totop svg{width:18px;height:18px;}
@media(max-width:1024px){.cp-layout{grid-template-columns:228px 1fr;gap:36px;}}
@media(max-width:860px){.cp-layout,.cp-layout.cp-solo{grid-template-columns:1fr;padding-top:30px;}.cp-toc-wrap{position:static;margin-bottom:8px;}.cp-layout.cp-solo .cp-toc-wrap{display:none;}.cp-toc-toggle{display:flex;}.cp-toc-card{display:none;margin-top:-1px;border-radius:0 0 13px 13px;box-shadow:none;}.cp-toc-card.open{display:block;}.cp-toc-list{max-height:50vh;}}
@media(max-width:540px){.cp-shell{padding:0 20px;}.cp-hero__inner{padding-top:46px;padding-bottom:60px;}.cp-prose{font-size:16.5px;}.cp-cta{flex-direction:column;align-items:flex-start;padding:24px;}#cp-totop{right:16px;bottom:16px;}}
@media print{#cp-progress,#cp-totop,.cp-actions,.cp-toc-wrap,.cp-cta,.cp-foot-back{display:none!important;}.cp-layout{grid-template-columns:1fr!important;padding-top:16px!important;}.cp-hero{background:#fff!important;color:#000!important;}.cp-hero::after{display:none!important;}.cp-hero__inner{padding-top:0!important;padding-bottom:18px!important;}.cp-title,.cp-eyebrow,.cp-lede,.cp-crumb{color:#000!important;}.cp-title .accent{-webkit-text-fill-color:#000!important;color:#000!important;}.cp-chip{color:#000!important;border-color:#999!important;background:none!important;}.cp-prose{font-size:11.5pt;max-width:none;color:#000;}a{color:#000!important;}.cp-scope{background:#fff!important;}}

/* ── custom-page ── */
/* ═══════════════════════════════════════════════════════════════
   iGURUS · Custom Page  —  robust, adaptive design for ANY DB content
   Brand: violet editorial.  Works for legal docs, About, FAQ, etc.
═══════════════════════════════════════════════════════════════ */

:root {
  --cp-violet-950:#2B0510;
  --cp-violet-900:#4A0A1D;
  --cp-violet-800:#6B0E29;
  --cp-violet-700:#7A0D27;
  --cp-violet-600:#A41034;
  --cp-violet-500:#A41034;
  --cp-violet-400:#D45A76;
  --cp-violet-300:#FFFFFF;
  --cp-violet-200:#FFFFFF;
  --cp-violet-100:#FBEEF0;
  --cp-violet-50:#FDF5F6;

  --cp-ink:#1c1630;
  --cp-ink-2:#403955;
  --cp-ink-3:#6b6582;
  --cp-line:#e9e4f5;
  --cp-line-2:#f1edfa;
  --cp-bg:#faf9fe;
  --cp-card:#ffffff;

  --cp-serif:"Newsreader","Lora",Georgia,serif;
  --cp-sans:"Space Grotesk","Inter",system-ui,sans-serif;
  --cp-display:"Outfit","Space Grotesk",system-ui,sans-serif;

  --cp-maxw:1200px;
}

/* ── reset within our scope ──────────────────────────────────── */
.cp-scope *{box-sizing:border-box;}
.cp-scope{
  font-family:var(--cp-serif);
  color:var(--cp-ink-2);
  background:var(--cp-bg);
}
.cp-shell{max-width:var(--cp-maxw);margin:0 auto;padding:0 32px;}

/* ── reading progress bar ────────────────────────────────────── */
#cp-progress{
  position:fixed;top:0;left:0;z-index:9999;height:3px;width:0%;
  background:linear-gradient(90deg,var(--cp-violet-600),var(--cp-violet-300));
  transition:width .1s linear;
}

/* ═══ HERO ════════════════════════════════════════════════════ */
.cp-hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(120% 130% at 8% 0%,  rgba(164,16,52,.55) 0%, transparent 55%),
    radial-gradient(90% 100% at 100% 90%, rgba(164,16,52,.32) 0%, transparent 55%),
    linear-gradient(160deg, var(--cp-violet-950) 0%, #4A0A1D 48%, #1C0509 100%);
}
.cp-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 110% 100% at 50% 0%,#000 38%,transparent 82%);
  mask-image:radial-gradient(ellipse 110% 100% at 50% 0%,#000 38%,transparent 82%);
}
.cp-hero__inner{position:relative;z-index:2;padding-top:60px;padding-bottom:84px;}

.cp-crumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--cp-sans);font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.5);margin:0 0 30px;padding:0;list-style:none;
}
.cp-crumb a{color:var(--cp-violet-200);text-decoration:none;transition:color .2s;}
.cp-crumb a:hover{color:#fff;}
.cp-crumb .sep{opacity:.5;font-size:10px;}

.cp-eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--cp-sans);font-size: var(--fs-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--cp-violet-300);
  margin:0 0 20px;
}
.cp-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--cp-violet-300);}

.cp-title{
  font-family:var(--cp-display);font-weight:800;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;
  letter-spacing:-0.035em;color:#fff;margin:0 0 22px;max-width:14ch;
  text-wrap:balance;
}
.cp-title .accent{
  background:linear-gradient(100deg,var(--cp-violet-200),#93c5fd);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.cp-lede{
  font-family:var(--cp-serif);font-size:1.2rem;line-height: var(--lh-normal);
  color:rgba(255,255,255,.7);max-width:600px;margin:0 0 32px;
}

.cp-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.cp-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:999px;padding:7px 15px;
  font-family:var(--cp-sans);font-size:12.5px;color:rgba(255,255,255,.72);
}
.cp-chip svg{width:13px;height:13px;color:var(--cp-violet-300);flex:none;}
.cp-chip strong{color:#fff;font-weight:600;}

.cp-actions{display:flex;gap:11px;margin-top:32px;flex-wrap:wrap;}
.cp-btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:11px;
  padding:11px 22px;font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:600;
  text-decoration:none;cursor:pointer;border:none;
  transition:transform .18s,box-shadow .18s,background .2s,opacity .2s;
}
.cp-btn svg{width:15px;height:15px;}
.cp-btn:hover{transform:translateY(-2px);text-decoration:none;}
.cp-btn--primary{
  background:linear-gradient(135deg,var(--cp-violet-500),var(--cp-violet-700));
  color:#fff;box-shadow:0 6px 22px rgba(164,16,52,.42);
}
.cp-btn--primary:hover{color:#fff;box-shadow:0 10px 28px rgba(164,16,52,.5);}
.cp-btn--ghost{
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);
}
.cp-btn--ghost:hover{color:#fff;background:rgba(255,255,255,.13);}

/* ═══ BODY LAYOUT ════════════════════════════════════════════ */
.cp-body{padding:0 0 96px;}
.cp-layout{
  display:grid;grid-template-columns:268px 1fr;gap:56px;
  align-items:start;padding-top:48px;
}
/* single-column mode (short pages / no TOC) */
.cp-layout.cp-solo{grid-template-columns:minmax(0,820px);justify-content:center;}
.cp-layout.cp-solo .cp-toc-wrap{display:none;}

/* ── TOC sidebar ─────────────────────────────────────────────── */
.cp-toc-wrap{position:sticky;top:32px;}
.cp-toc-toggle{
  display:none;width:100%;text-align:left;align-items:center;justify-content:space-between;gap:10px;
  background:var(--cp-card);border:1.5px solid var(--cp-line);border-radius:13px;
  padding:13px 18px;font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:600;
  color:var(--cp-ink-2);cursor:pointer;box-shadow:0 2px 10px rgba(40,16,80,.05);
}
.cp-toc-toggle svg{width:13px;height:13px;color:var(--cp-violet-500);transition:transform .25s;}
.cp-toc-toggle.open svg.chev{transform:rotate(180deg);}

.cp-toc-card{
  background:var(--cp-card);border:1.5px solid var(--cp-line);border-radius:18px;
  overflow:hidden;box-shadow:0 6px 24px rgba(40,16,80,.06);
}
.cp-toc-head{
  display:flex;align-items:center;gap:10px;padding:16px 20px 14px;
  border-bottom:1px solid var(--cp-line-2);
}
.cp-toc-head-label{
  font-family:var(--cp-sans);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--cp-ink-3);white-space:nowrap;
}
.cp-toc-prog{flex:1;height:3px;background:var(--cp-line);border-radius:3px;overflow:hidden;}
.cp-toc-prog-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--cp-violet-500),var(--cp-violet-300));transition:width .12s;}

.cp-toc-list{list-style:none;padding:10px 0;margin:0;max-height:62vh;overflow-y:auto;}
.cp-toc-list::-webkit-scrollbar{width:4px;}
.cp-toc-list::-webkit-scrollbar-thumb{background:var(--cp-violet-200);border-radius:4px;}
.cp-toc-list a{
  display:flex;align-items:baseline;gap:10px;padding:7px 20px;
  font-family:var(--cp-sans);font-size:12.5px;line-height:1.42;
  color:var(--cp-ink-3);text-decoration:none;
  border-left:2px solid transparent;transition:color .15s,background .15s,border-color .15s;
}
.cp-toc-list a .num{font-size:10px;font-weight:700;color:var(--cp-violet-300);min-width:18px;flex:none;}
.cp-toc-list a.sub{padding-left:38px;font-size: var(--fs-xs);}
.cp-toc-list a.sub .num{display:none;}
.cp-toc-list a:hover{color:var(--cp-violet-700);background:var(--cp-violet-50);border-left-color:var(--cp-violet-200);}
.cp-toc-list a.active{color:var(--cp-violet-800);background:var(--cp-violet-50);border-left-color:var(--cp-violet-600);font-weight:600;}
.cp-toc-list a.active .num{color:var(--cp-violet-600);}

.cp-toc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:13px 20px;border-top:1px solid var(--cp-line-2);
}
.cp-toc-back{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--cp-sans);
  font-size: var(--fs-xs);font-weight:600;color:var(--cp-violet-600);text-decoration:none;
  padding:6px 10px;border-radius:8px;transition:background .15s;
}
.cp-toc-back svg{width:12px;height:12px;}
.cp-toc-back:hover{background:var(--cp-violet-50);text-decoration:none;}
.cp-toc-count{font-family:var(--cp-sans);font-size: var(--fs-xs);color:var(--cp-ink-3);background:var(--cp-violet-50);padding:3px 10px;border-radius:999px;}

/* ═══ ARTICLE / PROSE ════════════════════════════════════════ */
.cp-article{min-width:0;}
.cp-prose{
  font-family:var(--cp-serif);font-size: var(--fs-lg);line-height: var(--lh-relaxed);color:var(--cp-ink-2);
  max-width:760px;
}
.cp-prose ::selection{background:var(--cp-violet-100);color:var(--cp-violet-900);}

/* paragraphs */
.cp-prose p{margin:0 0 1.15em;}
.cp-prose p strong,.cp-prose li strong{color:var(--cp-ink);font-weight:600;}
.cp-prose a{color:var(--cp-violet-600);font-weight:500;text-decoration:underline;text-decoration-color:var(--cp-violet-200);text-underline-offset:2px;transition:color .15s;word-break:break-word;}
.cp-prose a:hover{color:var(--cp-violet-800);text-decoration-color:var(--cp-violet-500);}

/* native + detected SECTION headings (level 1) */
.cp-prose h1,.cp-prose h2,.cp-prose .ig-sh1{
  display:flex;align-items:baseline;gap:16px;
  font-family:var(--cp-display);font-weight:800;
  font-size:clamp(1.45rem,3vw,2rem);line-height:1.15;letter-spacing:-0.025em;
  color:var(--cp-ink);margin:0;padding:1.9em 0 .5em;
  border-top:1px solid var(--cp-line);scroll-margin-top:32px;text-wrap:balance;
}
.cp-prose > :is(h1,h2,.ig-sh1):first-child,
.cp-prose .ig-sh1.is-first{border-top:none;padding-top:.2em;}
.ig-sh1-num{
  font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:700;
  color:var(--cp-violet-400);min-width:26px;flex:none;line-height:2.2;
}

/* sub-section (level 2) */
.cp-prose h3,.cp-prose .ig-sh2{
  font-family:var(--cp-display);font-weight:700;font-size:1.18rem;
  color:var(--cp-ink);line-height: var(--lh-snug);margin:1.7em 0 .5em;
  padding:9px 16px;background:linear-gradient(120deg,var(--cp-violet-50),#fff);
  border-left:3px solid var(--cp-violet-500);border-radius:0 10px 10px 0;
  scroll-margin-top:32px;
}

/* deep sub (level 3) */
.cp-prose h4,.cp-prose .ig-sh3{
  font-family:var(--cp-sans);font-weight:600;font-size:1rem;color:var(--cp-ink-2);
  margin:1.4em 0 .4em;padding:0 0 0 13px;border-left:2px solid var(--cp-violet-200);
  scroll-margin-top:32px;
}
.cp-prose h5,.cp-prose h6{
  font-family:var(--cp-sans);font-weight:600;font-size:.95rem;color:var(--cp-ink-2);
  margin:1.3em 0 .35em;
}

/* inline bold "label" line */
.cp-prose .ig-slabel{
  font-family:var(--cp-sans);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--cp-violet-500);
  margin:1.6em 0 .35em;
}
/* bold-lead mixed paragraph */
.cp-prose .ig-smixed{margin-bottom:.9em;}
.cp-prose .ig-smixed > strong:first-child{
  font-family:var(--cp-sans);font-size:1rem;font-weight:700;color:var(--cp-ink);
  display:block;margin-bottom:.15em;
}

/* lists */
.cp-prose ul,.cp-prose ol{margin:.4em 0 1.2em;padding-left:1.6em;}
.cp-prose li{margin-bottom:.45em;font-size: var(--fs-md);line-height: var(--lh-relaxed);}
.cp-prose ul li::marker{color:var(--cp-violet-400);}
.cp-prose ol li::marker{color:var(--cp-violet-500);font-weight:700;font-family:var(--cp-sans);}
.cp-prose ul ul,.cp-prose ol ol,.cp-prose ul ol,.cp-prose ol ul{margin:.4em 0 .5em;}
/* strip MSO faux-bullet spans if any survive */
.cp-prose span[style*="mso-list: Ignore"],.cp-prose span[style*="mso-list:Ignore"]{display:none;}

/* horizontal rule → soft violet divider */
.cp-prose hr{
  border:none;height:1px;margin:2.4em 0;
  background:linear-gradient(90deg,transparent,var(--cp-violet-200) 22%,var(--cp-violet-100) 50%,var(--cp-violet-200) 78%,transparent);
}

/* blockquote / callout */
.cp-prose blockquote{
  border-left:4px solid var(--cp-violet-500);margin:1.8em 0;padding:16px 24px;
  background:var(--cp-violet-50);border-radius:0 13px 13px 0;color:var(--cp-ink-2);
  font-style:italic;
}
.cp-prose blockquote p:last-child{margin-bottom:0;}

/* tables */
.cp-prose .cp-table-wrap{overflow-x:auto;margin:1.5em 0;border:1px solid var(--cp-line);border-radius:13px;}
.cp-prose table{border-collapse:collapse;width:100%;font-family:var(--cp-sans);font-size: var(--fs-sm);}
.cp-prose th,.cp-prose td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--cp-line);vertical-align:top;}
.cp-prose thead th{background:var(--cp-violet-50);color:var(--cp-violet-800);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;}
.cp-prose tbody tr:last-child td{border-bottom:none;}
.cp-prose tbody tr:hover{background:var(--cp-line-2);}

/* images & figures */
.cp-prose img{max-width:100%;height:auto;border-radius:13px;margin:1.2em 0;border:1px solid var(--cp-line);}
.cp-prose figure{margin:1.5em 0;}
.cp-prose figcaption{font-family:var(--cp-sans);font-size: var(--fs-sm);color:var(--cp-ink-3);text-align:center;margin-top:8px;}

/* code */
.cp-prose code{font-family:"Plus Jakarta Sans", sans-serif;font-size:.88em;background:var(--cp-violet-50);color:var(--cp-violet-800);padding:2px 7px;border-radius:6px;border:1px solid var(--cp-line);}
.cp-prose pre{background:var(--cp-violet-950);color:#e9e3fb;padding:18px 22px;border-radius:13px;overflow-x:auto;margin:1.5em 0;font-size: var(--fs-sm);line-height: var(--lh-normal);}
.cp-prose pre code{background:none;border:none;color:inherit;padding:0;}

/* definition lists */
.cp-prose dl{margin:1.2em 0;}
.cp-prose dt{font-family:var(--cp-sans);font-weight:700;color:var(--cp-ink);margin-top:1em;}
.cp-prose dd{margin:.2em 0 0;padding-left:0;}

/* generic empty-paragraph trim */
.cp-prose p:empty{display:none;}

/* ── injected: built-in "Table of Contents" block inside content ── */
.ig-built-toc{
  background:linear-gradient(135deg,var(--cp-violet-50),#eef4ff);
  border:1px solid rgba(164,16,52,.14);border-radius:16px;
  padding:22px 26px;margin:1.4em 0 2.2em;
}
.ig-built-toc > :is(.ig-sh1,h1,h2){
  font-family:var(--cp-sans);font-size: var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--cp-violet-500);border-top:none;padding:0 0 12px;margin:0 0 6px;
}
.ig-built-toc .ig-sh1-num{display:none;}
.ig-built-toc ol,.ig-built-toc ul{
  display:grid;grid-template-columns:1fr 1fr;gap:.5em 2.4em;
  margin:0;padding:0;list-style:none;counter-reset:igtoc;
}
.ig-built-toc li{
  font-size: var(--fs-sm);color:var(--cp-ink-2);line-height:1.45;
  padding-left:1.9em;position:relative;
}
.ig-built-toc ol li{counter-increment:igtoc;}
.ig-built-toc ol li::before{
  content:counter(igtoc)".";position:absolute;left:0;top:0;
  font-family:var(--cp-sans);font-weight:700;color:var(--cp-violet-400);font-size: var(--fs-xs);
}
.ig-built-toc ul li::before{
  content:"";position:absolute;left:.5em;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--cp-violet-300);
}
@media (max-width:560px){.ig-built-toc ol,.ig-built-toc ul{grid-template-columns:1fr;}}

/* ── injected: "we never sell your data" pledge callout ──────── */
.ig-pledge{
  display:flex;gap:15px;align-items:flex-start;
  background:linear-gradient(120deg,#FDF5F6,#fff);
  border:1px solid var(--cp-violet-100);border-radius:15px;
  padding:18px 22px;margin:1.3em 0;
}
.ig-pledge::before{
  content:"";width:34px;height:34px;flex:none;border-radius:10px;margin-top:2px;
  background:var(--cp-violet-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/18px no-repeat;
}
.ig-pledge p{margin:0!important;font-size:16.5px!important;color:var(--cp-ink)!important;}

/* ═══ CTA CARD ═══════════════════════════════════════════════ */
.cp-cta{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
  margin-top:52px;max-width:760px;
  background:linear-gradient(135deg,var(--cp-violet-950),var(--cp-violet-900));
  border:1px solid rgba(167,139,250,.2);border-radius:20px;padding:30px 34px;
}
.cp-cta__text strong{display:block;font-family:var(--cp-display);font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:5px;}
.cp-cta__text span{font-family:var(--cp-sans);font-size: var(--fs-sm);color:rgba(255,255,255,.55);}
.cp-cta__btn{
  display:inline-flex;align-items:center;gap:9px;flex:none;white-space:nowrap;
  background:linear-gradient(135deg,var(--cp-violet-500),var(--cp-violet-700));
  color:#fff;border-radius:11px;padding:13px 26px;
  font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:700;text-decoration:none;
  box-shadow:0 6px 22px rgba(164,16,52,.4);transition:transform .18s,opacity .2s;
}
.cp-cta__btn svg{width:15px;height:15px;}
.cp-cta__btn:hover{transform:translateY(-2px);opacity:.92;color:#fff;text-decoration:none;}

/* ═══ PAGE FOOTER ROW ════════════════════════════════════════ */
.cp-pagefoot{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  border-top:1px solid var(--cp-line);margin-top:36px;padding-top:28px;max-width:760px;
}
.cp-foot-back{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--cp-sans);
  font-size: var(--fs-sm);font-weight:600;color:var(--cp-violet-700);text-decoration:none;
  padding:10px 18px;border:1.5px solid var(--cp-line);border-radius:11px;transition:all .18s;
}
.cp-foot-back svg{width:14px;height:14px;}
.cp-foot-back:hover{border-color:var(--cp-violet-300);background:var(--cp-violet-50);color:var(--cp-violet-800);text-decoration:none;}
.cp-foot-date{font-family:var(--cp-sans);font-size: var(--fs-xs);color:var(--cp-ink-3);display:flex;align-items:center;gap:7px;}
.cp-foot-date svg{width:13px;height:13px;color:var(--cp-violet-400);}

/* ═══ BACK TO TOP ════════════════════════════════════════════ */
#cp-totop{
  position:fixed;right:26px;bottom:26px;z-index:60;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--cp-violet-500),var(--cp-violet-700));
  color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(164,16,52,.45);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s,transform .25s,visibility .25s;
}
#cp-totop.show{opacity:1;visibility:visible;transform:translateY(0);}
#cp-totop:hover{transform:translateY(-3px);}
#cp-totop svg{width:18px;height:18px;}

/* ═══ RESPONSIVE ═════════════════════════════════════════════ */
@media (max-width:1024px){.cp-layout{grid-template-columns:228px 1fr;gap:36px;}}
@media (max-width:860px){
  .cp-layout,.cp-layout.cp-solo{grid-template-columns:1fr;padding-top:30px;}
  .cp-toc-wrap{position:static;margin-bottom:8px;}
  .cp-layout.cp-solo .cp-toc-wrap{display:none;}
  .cp-toc-toggle{display:flex;}
  .cp-toc-card{display:none;margin-top:-1px;border-radius:0 0 13px 13px;box-shadow:none;}
  .cp-toc-card.open{display:block;}
  .cp-toc-list{max-height:50vh;}
}
@media (max-width:540px){
  .cp-shell{padding:0 20px;}
  .cp-hero__inner{padding-top:46px;padding-bottom:60px;}
  .cp-prose{font-size:16.5px;}
  .cp-cta{flex-direction:column;align-items:flex-start;padding:24px;}
  #cp-totop{right:16px;bottom:16px;}
}

/* ═══ PRINT ══════════════════════════════════════════════════ */
@media print{
  #cp-progress,#cp-totop,.cp-actions,.cp-toc-wrap,.cp-cta,.cp-foot-back{display:none!important;}
  .cp-layout{grid-template-columns:1fr!important;padding-top:16px!important;}
  .cp-hero{background:#fff!important;color:#000!important;}
  .cp-hero::after{display:none!important;}
  .cp-hero__inner{padding-top:0!important;padding-bottom:18px!important;}
  .cp-title,.cp-eyebrow,.cp-lede,.cp-crumb{color:#000!important;}
  .cp-title .accent{-webkit-text-fill-color:#000!important;color:#000!important;}
  .cp-chip{color:#000!important;border-color:#999!important;background:none!important;}
  .cp-prose{font-size:11.5pt;max-width:none;color:#000;}
  .cp-prose :is(h1,h2,.ig-sh1){break-after:avoid;}
  a{color:#000!important;}
  .cp-scope{background:#fff!important;}
}


/* ════════════════════════════════════════════════════════════
   CC3 — Course Content Builder (Step 3)
   Namespace: .cc3
════════════════════════════════════════════════════════════ */

/* ── Card shell ─────────────────────────────────────────── */
.cc3-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(164,16,52,.09), 0 1px 4px rgba(0,0,0,.05);
    border: 1px solid rgba(164,16,52,.1);
    margin-bottom: 24px;
}

/* ── Card header ────────────────────────────────────────── */
.cc3-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: #A41034;
    border-bottom: 3px solid rgba(164,16,52,.22);
    border-radius: 18px 18px 0 0;
    gap: 16px;
}
.cc3-card-head-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cc3-card-head-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: #1C1514;
    border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: #FFFFFF; font-size: var(--fs-md); flex-shrink: 0;
}
.cc3-card-head-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem; font-weight: 800;
    color: #fff; letter-spacing: .01em; display: block;
}
.cc3-card-head-sub {
    font-size: 11.5px; color: rgba(255,255,255,.4);
    font-weight: 500; display: block; margin-top: 1px;
}
.cc3-add-chapter-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: #1C1514;
    color: #fff; border: none; border-radius: 10px;
    padding: 9px 18px; font-size: var(--fs-sm); font-weight: 700;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(164,16,52,.35);
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
}
.cc3-add-chapter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(164,16,52,.5);
    color: #fff;
}

/* ── Card body ──────────────────────────────────────────── */
.cc3-card-body {
    padding: 24px 28px;
    background: #faf9ff;
    min-height: 120px;
}

/* ── Card footer ────────────────────────────────────────── */
.cc3-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-top: 1px solid rgba(164,16,52,.1);
    background: #fff;
    border-radius: 0 0 18px 18px;
}

/* ── Empty state ────────────────────────────────────────── */
.cc3-empty {
    text-align: center;
    padding: 48px 24px;
}
.cc3-empty-icon {
    width: 64px; height: 64px; border-radius: 18px;
    background: rgba(164,16,52,.08);
    border: 1px solid rgba(164,16,52,.12);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-2xl); color: #A41034; margin-bottom: 16px;
}
.cc3-empty h4 {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem;
    font-weight: 700; color: #1e1240; margin-bottom: 6px;
}
.cc3-empty p {
    font-size: var(--fs-sm); color: #6b7280; margin-bottom: 20px;
}

/* ── Chapter accordion item ─────────────────────────────── */
.cc3-chapter {
    border: 1.5px solid rgba(164,16,52,.12);
    border-radius: 14px;
    margin-bottom: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(164,16,52,.05);
    transition: box-shadow .2s, border-color .2s;
    position: relative;
}
.cc3-chapter:hover {
    border-color: rgba(164,16,52,.25);
    box-shadow: 0 4px 16px rgba(164,16,52,.1);
}

.cc3-chapter-head {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #faf8ff;
    border-bottom: 1px solid rgba(164,16,52,.08);
    padding: 0 16px 0 0;
    border-radius: 12px 12px 0 0;
    overflow: visible;
}

.cc3-chapter-toggle {
    flex: 1;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    background: transparent !important;
    border: none !important;
    color: #1e1240 !important;
    font-size: var(--fs-sm) !important;
    text-align: left !important;
    cursor: pointer !important;
    width: auto !important;
}
.cc3-chapter-toggle::after { display: none !important; }
.cc3-chapter-toggle.collapsed .cc3-chapter-icon { color: #6b7280; }
.cc3-chapter-toggle:not(.collapsed) { color: #A41034 !important; background: rgba(164,16,52,.04) !important; }
.cc3-chapter-toggle:focus { box-shadow: none !important; outline: none !important; }

.cc3-chapter-icon { color: #A41034; font-size: var(--fs-base); flex-shrink: 0; }
.cc3-chapter-label { font-size: var(--fs-xs); font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.cc3-chapter-name { font-weight: 700; color: inherit; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc3-chapter-count { font-size: var(--fs-xs); font-weight: 600; color: #9ca3af; background: #f3f4f6; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }

/* ── Chapter action buttons ─────────────────────────────── */
.cc3-chapter-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.cc3-action-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); cursor: pointer;
    border: none; background: transparent;
    transition: background .15s, color .15s;
    text-decoration: none;
    flex-shrink: 0;
}
.cc3-action-btn--add { color: #A41034; background: rgba(164,16,52,.08); }
.cc3-action-btn--add:hover { background: #A41034; color: #fff; }
.cc3-action-btn--edit { color: #374151; }
.cc3-action-btn--edit:hover { background: rgba(164,16,52,.1); color: #A41034; }
.cc3-action-btn--delete { color: #6b7280; }
.cc3-action-btn--delete:hover { background: rgba(239,68,68,.1); color: #ef4444; }
.cc3-action-btn--drag { color: #d1d5db; cursor: grab; }
.cc3-action-btn--drag:hover { color: #9ca3af; background: #f3f4f6; }

/* ── Items list ─────────────────────────────────────────── */
.cc3-items-list {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f9f8fe;
    border-radius: 0 0 12px 12px;
}

/* ── Item row ───────────────────────────────────────────── */
.cc3-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border: 1.5px solid #ede9f8;
    border-radius: 10px;
    padding: 10px 14px;
    transition: border-color .15s, box-shadow .15s;
}
.cc3-item:hover {
    border-color: rgba(164,16,52,.22);
    box-shadow: 0 2px 8px rgba(164,16,52,.07);
}
.cc3-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* ── Type badges ────────────────────────────────────────── */
.cc3-item-badge {
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); flex-shrink: 0;
}
.cc3-item-badge--video  { background: rgba(59,130,246,.12); color: #3b82f6; }
.cc3-item-badge--live   { background: rgba(16,185,129,.12); color: #10b981; }
.cc3-item-badge--doc    { background: rgba(239,68,68,.1);   color: #ef4444; }
.cc3-item-badge--quiz   { background: rgba(245,158,11,.12); color: #f59e0b; }
.cc3-item-badge--short  { background: rgba(164,16,52,.1);  color: #A41034; }

.cc3-item-type {
    font-size: 10.5px; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .07em;
    white-space: nowrap;
}
.cc3-item-title {
    font-size: var(--fs-sm); font-weight: 600; color: #1e1240;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc3-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.cc3-item-stat {
    font-size: var(--fs-xs); color: #6b7280; font-weight: 500;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px; background: #f3f4f6;
}
.cc3-item-stat i { font-size: 10px; }
.cc3-item-price {
    font-size: var(--fs-xs); font-weight: 700; color: #A41034;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px;
    background: rgba(164,16,52,.07);
}

/* ── Quiz item ──────────────────────────────────────────── */
.cc3-item--quiz {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-radius: 10px;
    overflow: visible;
}
.cc3-item--quiz > .cc3-item-quiz-head {
    border-radius: 10px;
    overflow: hidden;
}
.cc3-item--quiz > .accordion-collapse > .cc3-quiz-questions {
    border-radius: 0 0 10px 10px;
}
.cc3-item-quiz-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
}
.cc3-item-quiz-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    color: #1e1240 !important;
    font-size: var(--fs-sm) !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-align: left !important;
    flex: 1;
}
.cc3-item-quiz-toggle::after { display: none !important; }
.cc3-item-quiz-toggle:focus { box-shadow: none !important; outline: none !important; }
.cc3-item-count {
    font-size: 10.5px; font-weight: 700; color: #9ca3af;
    background: #f3f4f6; padding: 2px 7px; border-radius: 20px;
}

/* ── Quiz questions ─────────────────────────────────────── */
.cc3-quiz-questions {
    border-top: 1px solid #f0ecff;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #faf8ff;
}
.cc3-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border: 1px solid #ede9f8;
    border-radius: 8px;
    padding: 8px 12px;
}
.cc3-question-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.cc3-question-icon { color: #f59e0b; font-size: var(--fs-sm); }
.cc3-question-title {
    font-size: var(--fs-sm); font-weight: 600; color: #374151;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Empty chapter / inline empty ─────────────────────── */
.cc3-empty-chapter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: #9ca3af;
    font-size: var(--fs-sm);
    border: 1.5px dashed #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}
.cc3-empty-chapter i { color: #d1d5db; font-size: var(--fs-base); }
.cc3-empty-chapter strong { color: #A41034; }
.cc3-empty-inline {
    text-align: center;
    color: #9ca3af;
    font-size: 12.5px;
    margin: 4px 0;
}

/* ── Dropdown menu ──────────────────────────────────────── */
.cc3-dropdown {
    border: 1px solid #ede9f8 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(164,16,52,.12) !important;
    padding: 6px !important;
    min-width: 160px !important;
    z-index: 1055 !important;
}
.cc3-dropdown .dropdown-item {
    border-radius: 7px !important;
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #374151 !important;
}
.cc3-dropdown .dropdown-item:hover {
    background: rgba(164,16,52,.07) !important;
    color: #A41034 !important;
}
.cc3-dropdown .dropdown-item i { color: #A41034; font-size: var(--fs-xs); width: 14px; }

/* ── Modal ──────────────────────────────────────────────── */
.cc3-modal {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(164,16,52,.2) !important;
}
.cc3-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #A41034;
    border-bottom: 2px solid rgba(164,16,52,.25);
}
.cc3-modal-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .98rem; font-weight: 800;
    color: #fff; margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.cc3-modal-title i { color: #FFFFFF; }
.cc3-modal-body { padding: 20px; background: #fff; }
.cc3-form-grp { margin-bottom: 16px; }
.cc3-form-grp label {
    display: block;
    font-size: 12.5px; font-weight: 700;
    color: #A41034; margin-bottom: 8px;
    letter-spacing: .01em;
}
.cc3-form-grp label code { color: #ef4444; background: none; padding: 0; font-size: var(--fs-sm); font-weight: bold; }
.cc3-form-grp input {
    width: 100% !important; height: 44px !important;
    padding: 10px 14px !important;
    border: 1.5px solid #dcd7eb !important;
    border-radius: 10px !important;
    font-size: var(--fs-sm) !important; color: #1e1240 !important;
    background: #faf9ff !important;
    outline: none !important; transition: all .2s !important;
    text-align: left !important; direction: ltr !important;
    font-family: "Plus Jakarta Sans", sans-serif;
}
.cc3-form-grp input:focus {
    border-color: #A41034 !important;
    box-shadow: 0 0 0 3px rgba(164,16,52,.12) !important;
    background: #fff !important;
}
.cc3-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #f0ecff;
    margin-top: 4px;
}
.cc3-modal-btn {
    border-radius: 8px;
    font-size: var(--fs-sm); font-weight: 700;
    padding: 8px 18px; cursor: pointer;
    border: none; transition: all .2s;
}
.cc3-modal-btn--cancel {
    background: #f3f4f6; color: #374151;
    border: 1px solid #e5e7eb;
}
.cc3-modal-btn--cancel:hover { background: #e5e7eb; }
.cc3-modal-btn--submit {
    background: linear-gradient(135deg,#A41034,#A41034);
    color: #fff;
    box-shadow: 0 4px 14px rgba(164,16,52,.35);
}
.cc3-modal-btn--submit:hover {
    box-shadow: 0 6px 20px rgba(164,16,52,.5);
    transform: translateY(-1px);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .cc3-card-head { flex-direction: column; align-items: flex-start; padding: 16px 20px; }
    .cc3-card-body { padding: 16px; }
    .cc3-footer { padding: 14px 20px; }
    .cc3-chapter-toggle { padding: 12px !important; }
    .cc3-item-stat { display: none; }
    .cc3-chapter-head { flex-wrap: wrap; }
    .cc3-chapter-label { display: none; }
}




/* ── CC3 Inline Add-Chapter Form (replaces modal) ────────── */
.cc3-inline-form {
    background: linear-gradient(135deg, #FDF5F6 0%, #FBEEF0 100%);
    border-bottom: 2px solid rgba(164,16,52,.15);
    padding: 18px 28px;
    animation: cc3SlideDown .22s ease;
}
@keyframes cc3SlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cc3-inline-form-body {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}
.cc3-inline-form-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: rgba(164,16,52,.10);
    border: 1px solid rgba(164,16,52,.2);
    display: flex; align-items: center; justify-content: center;
    color: #A41034; font-size: var(--fs-md); flex-shrink: 0;
    margin-bottom: 1px;
}
.cc3-inline-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .cc3-inline-form { padding: 16px; }
    .cc3-inline-form-body { flex-direction: column; align-items: stretch; }
    .cc3-inline-form-icon { display: none; }
    .cc3-inline-form-actions { justify-content: flex-end; }
}


.klip-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 24px !important;
    background: linear-gradient(135deg, #100822 0%, #1e1040 60%, #0c0518 100%) !important;
    border-bottom: 3px solid rgba(164,16,52,.35) !important;
    border-radius: 0 !important;
}
.klip-modal-body {
    padding: 20px 24px !important;
    background: #faf9ff !important;
}
.klip-modal-head-left { display: flex; align-items: center; gap: 12px; }
.klip-modal-head-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: #FFFFFF; font-size: var(--fs-md);
}
.klip-modal-title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1rem; font-weight: 800;
    color: #fff; margin: 0; letter-spacing: .01em;
}
.klip-modal-sub { font-size: var(--fs-xs); color: rgba(255,255,255,.4); font-weight: 500; display: block; margin-top: 1px; }

/* Notice */
.klip-notice {
    display: flex; align-items: center; gap: 9px;
    background: rgba(164,16,52,.05); border-left: 3px solid #A41034;
    border-radius: 6px; padding: 9px 13px; margin-bottom: 18px;
    font-size: 12.5px; font-weight: 500; color: #475569;
}
.klip-notice i { color: #A41034; font-size: var(--fs-sm); flex-shrink: 0; }

/* Layout */
.klip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.klip-row--3 { grid-template-columns: 1fr auto 1fr; align-items: end; }
.klip-col--sm { min-width: 120px; }
.klip-col--xs { min-width: 90px; }

/* Field */
.klip-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.klip-field--center { align-items: center; }
.klip-label {
    font-size: 12.5px !important; font-weight: 700 !important;
    color: #A41034 !important; letter-spacing: .01em; margin: 0 !important;
    display: flex !important; align-items: center; gap: 4px;
}
.klip-label code { color: #ef4444 !important; background: none !important; padding: 0 !important; font-size: var(--fs-sm) !important; font-weight: bold !important; }
.klip-hint { font-size: 10.5px; font-weight: 500; color: #9ca3af; }

/* Inputs */
.klip-input, .klip-select, .klip-textarea {
    width: 100% !important; padding: 9px 13px !important;
    border: 1.5px solid #dcd7eb !important; border-radius: 9px !important;
    font-size: var(--fs-sm) !important; color: #1e1240 !important;
    background: #fff !important; outline: none !important;
    transition: border-color .2s, box-shadow .2s !important;
    font-family: "Plus Jakarta Sans", sans-serif;
    text-align: left !important; direction: ltr !important;
}
.klip-input:focus, .klip-select:focus, .klip-textarea:focus {
    border-color: #A41034 !important;
    box-shadow: 0 0 0 3px rgba(164,16,52,.12) !important;
}
.klip-input--readonly { background: #F3F4F6 !important; color: #6b7280 !important; cursor: default; }
.klip-textarea { height: 88px !important; resize: vertical !important; padding-top: 10px !important; }
.klip-select { height: 42px !important; cursor: pointer; }
.klip-char-hint { font-size: var(--fs-xs); color: #9ca3af; text-align: right; }

/* File input */
.klip-file-wrap { position: relative; }
.klip-file-hidden { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.klip-file-label {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 13px; border: 1.5px solid #dcd7eb; border-radius: 9px;
    background: #fff; color: #6b7280; font-size: var(--fs-sm); font-weight: 600;
    cursor: pointer; transition: border-color .2s, color .2s; overflow: hidden;
}
.klip-file-label i { color: #A41034; font-size: var(--fs-base); flex-shrink: 0; }
.klip-file-label:hover { border-color: #A41034; color: #A41034; }
.klip-file-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Dropzone */
.klip-dropzone {
    border: 2px dashed #dcd7eb !important; border-radius: 10px !important;
    background: #f9f7ff !important; min-height: 96px !important;
    transition: border-color .2s, background .2s !important;
    margin-bottom: 14px;
}
.klip-dropzone:hover, .klip-dropzone.dz-drag-hover {
    border-color: #A41034 !important; background: #f0ebff !important;
}
.klip-dropzone .dz-message { color: #9ca3af !important; font-size: var(--fs-sm) !important; font-weight: 600 !important; }
.klip-dropzone--docs { min-height: 72px !important; }

/* Toggle switch */
.klip-toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; margin: 0; }
.klip-toggle input { opacity: 0; width: 0; height: 0; }
.klip-toggle-slider {
    position: absolute; inset: 0; border-radius: 24px;
    background: #e5e7eb; transition: .25s;
}
.klip-toggle-slider::before {
    content: ''; position: absolute;
    width: 18px; height: 18px; border-radius: 50%;
    left: 3px; top: 3px; background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: .25s;
}
.klip-toggle input:checked + .klip-toggle-slider { background: linear-gradient(135deg,#A41034,#A41034); }
.klip-toggle input:checked + .klip-toggle-slider::before { transform: translateX(20px); }

/* Footer */
.klip-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding-top: 10px; margin-top: 2px;
    border-top: 1px solid rgba(164,16,52,.12);
}
.klip-btn {
    border-radius: 9px; font-size: var(--fs-sm); font-weight: 700;
    padding: 9px 20px; cursor: pointer; border: none;
    transition: all .2s; display: inline-flex; align-items: center; gap: 7px;
}
.klip-btn--cancel { background: #f3f4f6; color: #374151; border: 1.5px solid #e5e7eb; }
.klip-btn--cancel:hover { background: #e5e7eb; }
.klip-btn--submit {
    background: linear-gradient(135deg,#A41034,#A41034); color: #fff;
    box-shadow: 0 4px 14px rgba(164,16,52,.35);
}
.klip-btn--submit:hover { color: #FFFFFF; box-shadow: 0 6px 20px rgba(164,16,52,.5); transform: translateY(-1px); }

/* Thumbnail preview (edit modal) */
.klip-thumb-preview {
    position: relative; display: inline-flex; margin-top: 8px;
    border-radius: 9px; overflow: hidden; border: 1.5px solid #dcd7eb;
}
.klip-thumb-preview img { width: 120px; height: 68px; object-fit: cover; display: block; }
.klip-thumb-preview-remove {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(17,10,30,.65); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; transition: background .2s;
}
.klip-thumb-preview-remove:hover { background: #A41034; color: #fff; }

/* Uploaded documents list (edit modal) */
.klip-doc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.klip-doc-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 11px; border: 1.5px solid #dcd7eb; border-radius: 8px;
    background: #fff; font-size: 12.5px;
}
.klip-doc-item i.fa-paperclip { color: #A41034; font-size: var(--fs-xs); flex-shrink: 0; }
.klip-doc-item a { color: #1e1240; font-weight: 600; text-decoration: none; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klip-doc-item a:hover { color: #A41034; text-decoration: underline; }
.klip-doc-item-remove { color: #9ca3af; cursor: pointer; flex-shrink: 0; transition: color .2s; }
.klip-doc-item-remove:hover { color: #ef4444; }

/* Validation error */
.klip-input.error, .klip-select.error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important; }
label.error { font-size: 11.5px !important; color: #ef4444 !important; font-weight: 600 !important; margin-top: 3px !important; display: block !important; }

@media (max-width: 576px) {
    .klip-row, .klip-row--3 { grid-template-columns: 1fr; }
    .klip-modal-body { padding: 16px; }
}
/* ════════════════════════════════════════════════════════════
   CC4 — Finish & Publish (Step 4)
   Namespace: .cc4
════════════════════════════════════════════════════════════ */

/* ── Card ───────────────────────────────────────────────── */
.cc4-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(164,16,52,.09), 0 1px 4px rgba(0,0,0,.05);
    border: 1px solid rgba(164,16,52,.1);
    margin-bottom: 24px;
    overflow: visible;
}
.cc4-card-head {
    display: flex; align-items: center; gap: 16px;
    padding: 22px 30px;
    background: #A41034;
    border-bottom: 3px solid rgba(164,16,52,.22);
    border-radius: 18px 18px 0 0;
}
.cc4-card-head-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: #FFFFFF; font-size: var(--fs-lg);
}
.cc4-card-head-title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem; font-weight: 800;
    color: #fff; margin: 0; letter-spacing: .01em;
}
.cc4-card-head-sub { font-size: var(--fs-xs); color: rgba(255,255,255,.45); margin: 2px 0 0; }

.cc4-card-body { padding: 30px 32px; background: #fff; border-radius: 0 0 18px 18px; }

/* ── Field ──────────────────────────────────────────────── */
.cc4-field { margin-bottom: 24px; }
.cc4-field--half { max-width: 100%; }

.cc4-label {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-sm) !important; font-weight: 700 !important;
    color: #A41034 !important; margin-bottom: 10px !important;
    letter-spacing: .01em;
}
.cc4-label-hint {
    font-size: var(--fs-xs); font-weight: 500; color: #9ca3af;
    background: #f3f4f6; padding: 2px 8px; border-radius: 20px;
}
.cc4-req { color: #ef4444 !important; background: none !important; padding: 0 !important; font-size: var(--fs-sm) !important; font-weight: bold !important; }

/* ── Textarea ───────────────────────────────────────────── */
.cc4-textarea {
    width: 100% !important; min-height: 120px !important;
    padding: 12px 16px !important;
    border: 1.5px solid #dcd7eb !important; border-radius: 10px !important;
    font-size: var(--fs-sm) !important; color: #1e1240 !important;
    background: #fff !important; outline: none !important;
    resize: vertical !important; font-family: "Plus Jakarta Sans", sans-serif;
    text-align: left !important; direction: ltr !important;
    transition: border-color .2s, box-shadow .2s !important;
    line-height: var(--lh-relaxed) !important;
}
.cc4-textarea:focus {
    border-color: #A41034 !important;
    box-shadow: 0 0 0 4px rgba(164,16,52,.1) !important;
}
.cc4-textarea::placeholder { color: #9ca3af !important; }

/* ── Status cards ───────────────────────────────────────── */
.cc4-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.cc4-status-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb; border-radius: 12px;
    background: #fff; cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s;
    position: relative;
}
.cc4-status-card input[type="radio"] {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0;
}
.cc4-status-card:hover {
    border-color: rgba(164,16,52,.3);
    box-shadow: 0 2px 10px rgba(164,16,52,.08);
}
.cc4-status-card--active {
    border-color: #A41034 !important;
    background: rgba(164,16,52,.03) !important;
    box-shadow: 0 0 0 3px rgba(164,16,52,.1) !important;
}
.cc4-status-card-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-base);
}
.cc4-status-card-icon--publish   { background: rgba(16,185,129,.1);  color: #10b981; }
.cc4-status-card-icon--draft     { background: rgba(245,158,11,.1);  color: #f59e0b; }
.cc4-status-card-icon--unpublish { background: rgba(107,114,128,.1); color: #6b7280; }
.cc4-status-card--active .cc4-status-card-icon--publish   { background: rgba(16,185,129,.18); }
.cc4-status-card--active .cc4-status-card-icon--draft     { background: rgba(245,158,11,.18); }
.cc4-status-card--active .cc4-status-card-icon--unpublish { background: rgba(107,114,128,.18); }
.cc4-status-card-title {
    display: block; font-size: var(--fs-sm); font-weight: 700; color: #1e1240; line-height: var(--lh-snug);
}
.cc4-status-card--active .cc4-status-card-title { color: #A41034; }
.cc4-status-card-desc { display: block; font-size: var(--fs-xs); color: #9ca3af; margin-top: 1px; }

/* ── Footer ─────────────────────────────────────────────── */
.cc4-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 24px; margin-top: 8px;
    border-top: 1px solid rgba(164,16,52,.1);
}
.cc4-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 10px;
    border: 1.5px solid rgba(164,16,52,.25); color: #A41034;
    font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
    background: #fff; transition: all .2s;
}
.cc4-back-btn:hover { border-color: #A41034; background: rgba(164,16,52,.04); color: #A41034; text-decoration: none; }
.cc4-back-btn i { font-size: .8rem; }
.cc4-save-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 10px; border: none; cursor: pointer;
    background: linear-gradient(135deg,#A41034,#A41034);
    color: #fff; font-size: var(--fs-sm); font-weight: 700;
    box-shadow: 0 4px 16px rgba(164,16,52,.35);
    transition: transform .2s, box-shadow .2s;
}
.cc4-save-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(164,16,52,.45); }
.cc4-save-btn i { font-size: .85rem; }

@media (max-width: 640px) {
    .cc4-status-grid { grid-template-columns: 1fr; }
    .cc4-card-body { padding: 20px; }
    .cc4-card-head { padding: 18px 20px; }
}

/* ════════════════════════════════════════════════════════════
   OC — My Courses (Instructor Dashboard)
   Namespace: .oc-scope
════════════════════════════════════════════════════════════ */

.oc-scope { font-family: "Plus Jakarta Sans", sans-serif; }

/* ── Alert ──────────────────────────────────────────────── */
.oc-alert {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fffbeb; border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b; border-radius: 12px;
    padding: 14px 18px; margin-bottom: 22px;
    font-size: var(--fs-sm); color: #78350f;
}
.oc-alert__icon { color: #f59e0b; font-size: var(--fs-md); flex-shrink: 0; margin-top: 1px; }
.oc-alert__body { flex: 1; }
.oc-alert__body strong { display: block; font-weight: 700; margin-bottom: 4px; }
.oc-alert__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.oc-alert__tag {
    font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px;
    background: #fef3c7; border: 1px solid #fde68a;
    border-radius: 20px; color: #92400e;
}

/* ── Hero Banner ────────────────────────────────────────── */
.oc-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #2B0510 0%, #A41034 50%, #A41034 100%);
    border-radius: 18px; padding: 28px 32px;
    margin-bottom: 22px;
    box-shadow: 0 8px 32px rgba(17,2,44,.4);
}
.oc-hero__shine {
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    pointer-events: none;
}
.oc-hero__blob {
    position: absolute; width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.07), transparent 65%);
    top: -130px; right: 10px; pointer-events: none;
}
.oc-hero__inner {
    display: flex; align-items: center; gap: 20px;
    position: relative; z-index: 1;
}
.oc-hero__icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.3rem;
}
.oc-hero__text { flex: 1; }
.oc-hero__eyebrow {
    font-size: .62rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 4px;
}
.oc-hero__title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.6rem; font-weight: 800;
    color: #fff; margin: 0; letter-spacing: -.02em; line-height: var(--lh-tight);
}
.oc-hero__sub { font-size: .78rem; color: rgba(255,255,255,.42); margin: 5px 0 0; }
.oc-hero__cta {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28);
    color: #fff; padding: 10px 20px; border-radius: 10px;
    font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
    backdrop-filter: blur(6px);
    transition: background .2s, border-color .2s;
}
.oc-hero__cta:hover {
    background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.45);
    color: #fff; text-decoration: none;
}

/* ── Stats Strip ────────────────────────────────────────── */
.oc-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}
.oc-stat-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border-radius: 14px;
    padding: 18px 20px;
    border: 1.5px solid rgba(164,16,52,.1);
    box-shadow: 0 2px 10px rgba(164,16,52,.06);
    transition: box-shadow .2s, transform .2s;
}
.oc-stat-card:hover { box-shadow: 0 6px 20px rgba(164,16,52,.12); transform: translateY(-2px); }
.oc-stat-card__icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-lg);
}
.oc-stat-card--1 .oc-stat-card__icon { background: rgba(164,16,52,.1);  color: #A41034; }
.oc-stat-card--2 .oc-stat-card__icon { background: rgba(16,185,129,.1);   color: #10b981; }
.oc-stat-card--3 .oc-stat-card__icon { background: rgba(245,158,11,.1);   color: #f59e0b; }
.oc-stat-card--4 .oc-stat-card__icon { background: rgba(59,130,246,.1);   color: #3b82f6; }
.oc-stat-card__info { display: flex; flex-direction: column; }
.oc-stat-card__val {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.35rem; font-weight: 800;
    color: #1e1240; line-height: var(--lh-tight);
}
.oc-stat-card__lbl { font-size: var(--fs-xs); font-weight: 500; color: #9ca3af; margin-top: 2px; }

/* ── Toolbar ────────────────────────────────────────────── */
.oc-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.oc-toolbar__count { font-size: var(--fs-sm); color: #6b7280; margin: 0; font-weight: 500; }
.oc-toolbar__count strong { color: #1e1240; font-weight: 700; }

/* ── Course Grid ────────────────────────────────────────── */
.oc-course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

/* ── Course Card ────────────────────────────────────────── */
.oc-course-card {
    background: #fff; border-radius: 16px;
    border: 1.5px solid rgba(164,16,52,.1);
    box-shadow: 0 2px 12px rgba(164,16,52,.07);
    overflow: hidden;
    transition: box-shadow .25s, transform .25s, border-color .25s;
    display: flex; flex-direction: column;
}
.oc-course-card:hover {
    box-shadow: 0 10px 32px rgba(164,16,52,.14);
    transform: translateY(-4px);
    border-color: rgba(164,16,52,.22);
}

/* Thumbnail */
.oc-course-card__thumb {
    position: relative; height: 170px; overflow: hidden; flex-shrink: 0;
}
.oc-course-card__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.oc-course-card:hover .oc-course-card__thumb img { transform: scale(1.05); }
.oc-course-card__thumb-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(15,7,35,.7));
    pointer-events: none;
}

/* Status badge */
.oc-status-badge {
    position: absolute; top: 12px; left: 12px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    padding: 3px 9px; border-radius: 20px;
    backdrop-filter: blur(8px); text-transform: uppercase;
}
.oc-status-badge--published  { background: rgba(16,185,129,.85);  color: #fff; }
.oc-status-badge--pending    { background: rgba(245,158,11,.85);  color: #fff; }
.oc-status-badge--rejected   { background: rgba(239,68,68,.85);   color: #fff; }
.oc-status-badge--inactive   { background: rgba(107,114,128,.85); color: #fff; }
.oc-status-badge--draft      { background: rgba(164,16,52,.7);      color: #e9d5ff; }

/* Price chip */
.oc-thumb-price {
    position: absolute; bottom: 10px; right: 12px;
    font-size: var(--fs-xs); font-weight: 800; color: #fff;
    background: rgba(164,16,52,.75); backdrop-filter: blur(6px);
    padding: 3px 9px; border-radius: 8px;
}

/* Action buttons (show on hover) */
.oc-card-actions {
    position: absolute; top: 10px; right: 10px;
    display: flex; flex-direction: column; gap: 5px;
    opacity: 0; transition: opacity .2s;
}
.oc-course-card:hover .oc-card-actions { opacity: 1; }
.oc-card-act-btn {
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    color: #1e1240; font-size: var(--fs-sm); text-decoration: none;
    border: 1px solid rgba(0,0,0,.08);
    transition: background .15s, color .15s;
}
.oc-card-act-btn:hover { background: #A41034; color: #fff; text-decoration: none; }
.oc-card-act-btn--view:hover  { background: #10b981; color: #fff; }
.oc-card-act-btn--delete:hover { background: #ef4444; color: #fff; }

/* Body */
.oc-course-card__body {
    padding: 16px 18px 14px; display: flex; flex-direction: column; flex: 1;
}
.oc-course-card__cat {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #A41034;
    background: rgba(164,16,52,.08); padding: 2px 8px;
    border-radius: 20px; display: inline-block; margin-bottom: 7px;
}
.oc-course-card__title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; font-weight: 700;
    color: #1e1240; margin: 0 0 10px; line-height: var(--lh-snug);
}
.oc-course-card__title a { color: inherit; text-decoration: none; }
.oc-course-card__title a:hover { color: #A41034; }

/* Meta row */
.oc-meta-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.oc-instructor-chip {
    display: flex; align-items: center; gap: 7px;
    font-size: var(--fs-xs); font-weight: 600; color: #374151;
}
.oc-instructor-chip img {
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
    border: 1.5px solid rgba(164,16,52,.2);
}
.oc-stars {
    display: flex; align-items: center; gap: 4px;
    font-size: var(--fs-xs); font-weight: 700; color: #f59e0b;
}
.oc-stars span { color: #374151; }

/* Footer stats */
.oc-card-footer {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
    margin-top: auto;
}
.oc-card-stat {
    display: flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: 600; color: #6b7280;
}
.oc-card-stat i { font-size: var(--fs-xs); color: #9ca3af; }
.oc-earnings-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: 700; color: #10b981;
    background: rgba(16,185,129,.1); padding: 2px 9px;
    border-radius: 20px; margin-left: auto;
}
.oc-earnings-chip i { font-size: var(--fs-xs); }

/* ── Empty State ────────────────────────────────────────── */
.oc-empty {
    grid-column: 1 / -1;
    text-align: center; padding: 64px 24px;
    background: #fff; border-radius: 16px;
    border: 1.5px dashed rgba(164,16,52,.2);
}
.oc-empty__circle {
    width: 72px; height: 72px; border-radius: 20px;
    background: rgba(164,16,52,.08); border: 1px solid rgba(164,16,52,.15);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-3xl); color: #A41034; margin-bottom: 20px;
}
.oc-empty__title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800;
    color: #1e1240; margin-bottom: 8px;
}
.oc-empty__desc { font-size: var(--fs-sm); color: #6b7280; max-width: 420px; margin: 0 auto 24px; line-height: var(--lh-relaxed); }

/* ── Primary Button ─────────────────────────────────────── */
.oc-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg,#A41034,#A41034);
    color: #fff; border-radius: 10px; padding: 11px 22px;
    font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 14px rgba(164,16,52,.35);
    transition: transform .2s, box-shadow .2s;
}
.oc-btn-primary:hover {
    transform: translateY(-1px); box-shadow: 0 6px 22px rgba(164,16,52,.45);
    color: #fff; text-decoration: none;
}

/* ── Pagination ─────────────────────────────────────────── */
.oc-pagination { display: flex; justify-content: center; margin-top: 8px; }
.oc-pagination .pagination { gap: 4px; }
.oc-pagination .page-link {
    border-radius: 8px !important; font-size: var(--fs-sm); font-weight: 600;
    color: #A41034; border-color: rgba(164,16,52,.2);
    padding: 7px 13px;
}
.oc-pagination .page-item.active .page-link {
    background: #A41034 !important; border-color: #A41034 !important; color: #fff !important;
}
.oc-pagination .page-link:hover { background: rgba(164,16,52,.08); }

/* ── Delete Modal ───────────────────────────────────────── */
.oc-delete-modal-content {
    border: none !important; border-radius: 16px !important; overflow: hidden;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .oc-course-grid { grid-template-columns: repeat(2, 1fr); }
    .oc-stats-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .oc-course-grid { grid-template-columns: 1fr; }
    .oc-stats-strip { grid-template-columns: repeat(2, 1fr); }
    .oc-hero { padding: 20px; }
    .oc-hero__inner { flex-wrap: wrap; }
    .oc-hero__cta { width: 100%; justify-content: center; }
    .oc-hero__title { font-size: 1.3rem; }
}



/* ════════════════════════════════════════════════════════════
   SD-FRAME — Student Dashboard Premium Wireframe
════════════════════════════════════════════════════════════ */

/* Outer frame shell */
.sd-frame {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #1C1514;
    border: 1.5px solid #1C1514;
    
}

/* Animated shimmer line across very top */
.sd-frame::before {
    content: "";
    display: block;
    height: 2px;
    
    background-size: 200% auto;
    animation: sdShimmer 4s linear infinite;
    flex-shrink: 0;
}
@keyframes sdShimmer {
    0%   { background-position: -100% center; }
    100% { background-position:  300% center; }
}

/* Inner glow border overlay */
.sd-frame::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 22px;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(196,181,253,.15),
                inset 0 -1px 0 rgba(164,16,52,.1);
    z-index: 10;
}

/* ── Top bar ────────────────────────────────────────────── */
.sd-frame__top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    height: 38px;
    padding: 0 20px;
    background:#1C1514;
    border-bottom: 1px solid rgba(164,16,52,.18);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}
/* suppress leftover pseudo content */
.sd-frame__top-bar::before,
.sd-frame__top-bar::after { display: none; }

/* Brand pill — left */
.sd-frame__brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -.01em;
    flex-shrink: 0;
}
.sd-frame__brand i {
    width: 20px; height: 20px;
    border-radius: 6px;
    background: #1C1514;
    display: inline-flex; align-items: center; justify-content: center;
    color: #FFFFFF; font-size: 9px;
}

/* Centre breadcrumb */
.sd-frame__label {
    flex: 1;
    text-align: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.5 rem;
    font-weight: 800;
    color: #000;
    letter-spacing: .1em;
    text-transform: uppercase;
    user-select: none;
}

/* Live indicator — right */
.sd-frame__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.3);
    letter-spacing: .06em;
    flex-shrink: 0;
}
.sd-frame__status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 5px rgba(16,185,129,.8);
    animation: sdPulse 2.5s ease-in-out infinite;
}
@keyframes sdPulse {
    0%, 100% { opacity: 1;  box-shadow: 0 0 5px  rgba(16,185,129,.8); }
    50%       { opacity: .4; box-shadow: 0 0 10px rgba(16,185,129,.3); }
}

/* ── Body grid ──────────────────────────────────────────── */
.sd-frame__body {
    display: flex;
    padding: 0;
    position: relative;
    z-index: 1;
}

/* Left sidebar column */
.sd-frame__sidebar-col {
    padding: 20px 0 20px 20px !important;
}

/* Right content column — subtle left divider */
.sd-frame__content-col {
    padding: 20px !important;
    border-left: 1px solid rgba(164,16,52,.1);
    background: rgba(255,255,255,.55);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991px) {
    .sd-frame { border-radius: 16px; }
    .sd-frame__sidebar-col { padding: 14px 14px 0 14px !important; }
    .sd-frame__content-col { padding: 14px !important; border-left: none !important; border-top: 1px solid rgba(164,16,52,.12); }
    .sd-frame__label { display: none; }
}
@media (max-width: 768px) {
    .sd-frame { border-radius: 14px; }
    .sd-frame__body { padding: 10px 4px; }
    .sd-frame__label { display: none; }
}

/* ── SD-FRAME section spacing fix ──────────────────────── */
.dashboard__area {
    margin-top: 0 !important;
    padding-top: 28px !important;
    padding-bottom: 48px !important;
}

/* ════════════════════════════════════════════════════════════════
   COURSES PAGE — CARD & FILTER REDESIGN
   Overrides the earlier ig-cr-* / ig-cc-* blocks via cascade.
════════════════════════════════════════════════════════════════ */

/* ── Page body ── */
.ig-cr-body {   padding: 36px 0 72px; min-height: 60vh; }

/* ══ SIDEBAR / FILTER ══ */
.ig-cr-sidebar { position: sticky; top: 92px; }

.ig-cr-filter-card {
    
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(164,16,52,.10);
    box-shadow: 0 4px 28px rgba(28,21,20,.08);
}

.ig-cr-filter-header {
    background: linear-gradient(135deg, #A41034 0%, #8b0a28 100%);
    padding: 15px 20px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: none;
}
.ig-cr-filter-title {
    font-size: var(--fs-sm); font-weight: 700; color: #fff;
    display: flex; align-items: center; gap: 8px; letter-spacing: .2px;
}
.ig-cr-filter-title i { color: #FFFFFF; font-size: var(--fs-sm); }
.ig-cr-clear-all {
    font-size: var(--fs-xs); font-weight: 600; color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.15); border: none; border-radius: 6px;
    padding: 3px 10px; cursor: pointer; transition: background .18s, color .18s;
}
.ig-cr-clear-all:hover { background: rgba(255,255,255,.28); color: #fff; text-decoration: none; }

.ig-cr-widget {
    padding: 15px 20px;
    border-bottom: 1px solid #f0eced;
    transition: background .15s;
}
.ig-cr-widget:last-child { border-bottom: none; }
.ig-cr-widget:hover { background: #fafaf9; }

.ig-cr-widget-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.ig-cr-widget-label {
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.1px; color: #A41034;
}
.ig-cr-clear-btn {
    font-size: 10.5px; font-weight: 600; color: #9ca3af;
    background: rgba(164,16,52,.06); border: none; border-radius: 5px;
    padding: 2px 8px; cursor: pointer; display: none;
    transition: background .15s, color .15s;
}
.ig-cr-clear-btn:hover { background: rgba(164,16,52,.12); color: #A41034; }

/* Custom radio */
.ig-cr-radio-dot {
    width: 17px; height: 17px; border-radius: 50%;
    border: 2px solid #d1d5db; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .18s;
}
.ig-cr-check input:checked ~ .ig-cr-radio-dot { border-color: #A41034; }
.ig-cr-check input:checked ~ .ig-cr-radio-dot::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: #A41034; display: block;
}

/* Custom checkbox */
.ig-cr-check-box {
    width: 17px; height: 17px; border-radius: 5px;
    border: 2px solid #d1d5db; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .18s, background .18s;
}
.ig-cr-check input:checked ~ .ig-cr-check-box { background: #A41034; border-color: #A41034; }
.ig-cr-check input:checked ~ .ig-cr-check-box::after {
    content: '✓'; color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
}

/* Item row */
.ig-cr-check {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 6px; border-radius: 8px; cursor: pointer;
    transition: background .15s;
}
.ig-cr-check:hover { background: #fdf8f8; }
.ig-cr-check input[type=checkbox],
.ig-cr-check input[type=radio] { display: none; }

.ig-cr-check-label {
    font-size: var(--fs-sm); color: #4b5563; line-height: var(--lh-snug); transition: color .15s;
}
.ig-cr-check:hover .ig-cr-check-label { color: #A41034; }
.ig-cr-check input:checked ~ .ig-cr-check-label { color: #A41034; font-weight: 700; }

/* Stars */
.ig-cr-star-row { display: flex; align-items: center; gap: 4px; }
.ig-cr-stars { display: flex; align-items: center; gap: 2px; }
.ig-cr-stars i { color: #f59e0b; font-size: var(--fs-xs); }
.ig-cr-stars i.empty { color: #e5e7eb; }
.ig-cr-rating-text { font-size: var(--fs-xs); color: #6b7280; margin-left: 4px; }

/* Sub-cat separator */
.sub-category-holder .ig-cr-widget { border-top: 1px solid #f0eced; }

/* ══ TOP BAR ══ */
.ig-cr-topbar {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border-radius: 12px; padding: 12px 18px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(28,21,20,.06);
    border: 1px solid rgba(164,16,52,.07);
}
.ig-cr-count { font-size: var(--fs-sm); color: #6b7280; }
.ig-cr-count strong { color: #A41034; font-weight: 800; }
.ig-cr-sort { display: flex; align-items: center; gap: 10px; }
.ig-cr-sort-label { font-size: 12.5px; color: #9ca3af; font-weight: 500; white-space: nowrap; }
.ig-cr-sort select.orderby {
    -webkit-appearance: none; appearance: none;
    padding: 7px 32px 7px 12px;
    border: 1.5px solid #e5e7eb; border-radius: 9px;
    font-size: 12.5px; font-weight: 500; color: #374151;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 10px center;
    cursor: pointer; outline: none;
    transition: border-color .18s, box-shadow .18s;
}
.ig-cr-sort select.orderby:focus { border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.08); }

/* ══ COURSE CARD ══ */
.ig-course-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #FFFFFF;
    box-shadow: 0 2px 12px rgba(28,21,20,.06);
    height: 100%;
    display: flex; flex-direction: column;
    position: relative;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s;
}
.ig-course-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,#A41034,#8b0a28,#FFFFFF);
    opacity: 0; transition: opacity .22s; z-index: 2;
}
.ig-course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(28,21,20,.14);
    border-color: rgba(164,16,52,.22);
}
.ig-course-card:hover::before { opacity: 1; }

/* Thumbnail */
.ig-cc-thumb {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 9; flex-shrink: 0;
    background: #f5e5e8;
}
.ig-cc-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .45s ease;
}
.ig-course-card:hover .ig-cc-thumb img { transform: scale(1.06); }

/* Hover play overlay */
.ig-cc-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,rgba(20,0,5,.15) 0%,rgba(20,0,5,.72) 100%);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .28s ease;
}
.ig-course-card:hover .ig-cc-overlay { opacity: 1; }
.ig-cc-view-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; background: #fff; color: #A41034;
    border-radius: 100px; font-size: var(--fs-sm); font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    transform: translateY(8px);
    transition: background .18s, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.ig-course-card:hover .ig-cc-view-btn { transform: translateY(0); }
.ig-cc-view-btn:hover { background: #fdf8f8; color: #A41034; text-decoration: none; }

/* Badges */
.ig-cc-badge-row {
    position: absolute; top: 10px; left: 10px;
    display: flex; gap: 5px; flex-wrap: wrap; z-index: 3;
}
.ig-cc-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 100px;
    font-size: 10px; font-weight: 800; letter-spacing: .5px; line-height: var(--lh-normal);
}
.ig-cc-badge.free { background: rgba(22,163,74,.92); color: #fff; }
.ig-cc-badge.paid { background: #A41034; color: #fff; }
.ig-cc-badge.cert { background: rgba(245,158,11,.92); color: #fff; }
.ig-cc-badge.new  { background: linear-gradient(135deg,#db2777,#f472b6); color: #fff; }

/* Card body — explicit white background */
.ig-cc-body {
    background: #ffffff;
    padding: 16px 18px 14px;
    flex: 1; display: flex; flex-direction: column;
}

/* Category chip */
.ig-cc-cat {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: #A41034; background: rgba(164,16,52,.08);
    border-radius: 6px; padding: 2px 9px;
    margin-bottom: 8px;
    max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

/* Title */
.ig-cc-title {
    font-size: var(--fs-sm); font-weight: 700; color: #111827;
    line-height: 1.45; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    flex-shrink: 0;
}
.ig-cc-title a { color: inherit; text-decoration: none; }
.ig-cc-title a:hover { color: #A41034; }

/* Instructor row */
.ig-cc-instructor {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.ig-cc-inst-img {
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0; border: 2px solid #FFFFFF;
}
.ig-cc-inst-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: #A41034;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.ig-cc-inst-name { font-size: var(--fs-xs); color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-cc-inst-name a { color: #374151; font-weight: 600; text-decoration: none; }
.ig-cc-inst-name a:hover { color: #A41034; }

/* Meta pills */
.ig-cc-meta {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px; flex-wrap: wrap;
}
.ig-cc-rating {
    display: inline-flex; align-items: center; gap: 3px;
    background: #fffbeb; border-radius: 6px; padding: 3px 8px;
    font-size: var(--fs-xs); font-weight: 700; color: #d97706;
}
.ig-cc-rating i { color: #f59e0b; font-size: 10px; }
.ig-cc-rating span { color: #9ca3af; font-weight: 400; font-size: var(--fs-xs); margin-left: 2px; }
.ig-cc-dur {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; color: #6b7280;
    background: #f9fafb; border-radius: 6px; padding: 3px 8px;
}
.ig-cc-dur i { color: #FFFFFF; font-size: 10px; }
.ig-cc-level {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; color: #6b7280;
    background: #f9fafb; border-radius: 6px; padding: 3px 8px;
}
.ig-cc-level i { color: #A41034; font-size: 10px; }

/* Enrollment count */
.ig-cc-enroll-count {
    font-size: 11.5px; color: #9ca3af;
    display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
}
.ig-cc-enroll-count i { font-size: var(--fs-xs); color: #FFFFFF; }

/* Footer */
.ig-cc-footer {
    margin-top: auto; padding-top: 12px;
    border-top: 1px solid #FFFFFF;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ig-cc-price-wrap { display: flex; align-items: baseline; gap: 6px; }
.ig-cc-price { font-size: 1.15rem; font-weight: 800; color: #111827; }
.ig-cc-price.free { font-size: 1rem; font-weight: 700; color: #16a34a; }
.ig-cc-price-orig { font-size: 11.5px; color: #d1d5db; text-decoration: line-through; }

.ig-cc-cart-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 15px;
    background: #A41034;
    color: #fff; border-radius: 9px;
    font-size: var(--fs-xs); font-weight: 700;
    cursor: pointer; border: none; text-decoration: none;
    box-shadow: 0 2px 8px rgba(164,16,52,.30);
    transition: opacity .18s, transform .18s, box-shadow .18s;
    white-space: nowrap;
}
.ig-cc-cart-btn:hover {
    opacity: .92; transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(164,16,52,.40);
    color: #fff; text-decoration: none;
}
.ig-cc-enrolled-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 15px; background: #dcfce7; color: #15803d;
    border-radius: 9px; font-size: var(--fs-xs); font-weight: 700;
    text-decoration: none; white-space: nowrap; border: 1px solid #bbf7d0;
}
.ig-cc-enrolled-btn:hover { background: #bbf7d0; color: #15803d; text-decoration: none; }
.ig-cc-booked-btn {
    padding: 8px 15px; background: #f9fafb; color: #d1d5db;
    border-radius: 9px; font-size: var(--fs-xs); font-weight: 700;
    white-space: nowrap; border: 1px solid #e5e7eb;
}

/* Share */
.ig-cc-share-wrap { position: absolute; top: 10px; right: 10px; z-index: 5; }
.ig-cc-share-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.92); border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); color: #374151; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    transition: background .18s, color .18s; backdrop-filter: blur(6px);
}
.ig-cc-share-btn:hover { background: #fff; color: #A41034; }
.ig-cc-share-dropdown {
    position: absolute; top: 40px; right: 0;
    background: #fff; border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 8px;
    display: flex; flex-direction: column; gap: 4px;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px) scale(.96);
    transition: all .18s ease; z-index: 20;
    min-width: 42px; align-items: center;
    border: 1px solid #FFFFFF;
}
.ig-cc-share-wrap:hover .ig-cc-share-dropdown,
.ig-cc-share-wrap.open .ig-cc-share-dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ig-cc-share-link {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); text-decoration: none; border: none; cursor: pointer; transition: all .15s;
}
.ig-share-fb { background:#e8f0fe; color:#1877f2; } .ig-share-fb:hover { background:#1877f2; color:#fff; }
.ig-share-tw { background:#e8f5fe; color:#000; }    .ig-share-tw:hover { background:#000; color:#fff; }
.ig-share-li { background:#e8f0fe; color:#0a66c2; } .ig-share-li:hover { background:#0a66c2; color:#fff; }
.ig-share-wa { background:#e8fde8; color:#25d366; } .ig-share-wa:hover { background:#25d366; color:#fff; }
.ig-share-copy { background:#f9f9f9; color:#374151; } .ig-share-copy:hover { background:#A41034; color:#fff; }

/* Empty state */
.ig-cr-empty {
    text-align: center; padding: 72px 24px;
    background: #fff; border-radius: 16px; border: 1px dashed #FFFFFF;
}
.ig-cr-empty-icon {
    width: 76px; height: 76px; border-radius: 50%;
    background: rgba(164,16,52,.07);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px; font-size: var(--fs-3xl); color: #A41034;
    box-shadow: 0 4px 16px rgba(164,16,52,.15);
}
.ig-cr-empty h5 { font-size: 1.1rem; font-weight: 800; color: #1C1514; margin-bottom: 8px; }
.ig-cr-empty p { font-size: var(--fs-sm); color: #9ca3af; }

/* Pagination */
.pagination-wrap { margin-top: 32px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.pagination .page-item .page-link {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 9px;
    background: #fff; border: 1.5px solid #e5e7eb;
    color: #374151; font-size: var(--fs-sm); font-weight: 600;
    text-decoration: none; transition: all .15s;
}
.pagination .page-item.active .page-link { background: #A41034; border-color: transparent; color: #fff; }
.pagination .page-item .page-link:hover:not(.active) { border-color: #A41034; color: #A41034; }

/* Responsive */
@media (max-width: 991px) {
    .ig-cr-sidebar { position: static; margin-bottom: 20px; }
    .ig-cr-filter-card { max-height: none; }
}
@media (max-width: 575px) {
    .ig-cr-topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ig-cc-body { padding: 14px 14px 12px; }
}

/* ════════════════════════════════════════════════════════════
   STUDENT DASHBOARD — FULL PREMIUM REDESIGN
   Scoped overrides so they don't bleed into other pages
════════════════════════════════════════════════════════════ */

/* ── 1. PAGE BACKGROUND ─────────────────────────────────── */
.dashboard__area {
    background: linear-gradient(160deg, #f0eefa 0%, #e8e4f5 100%) !important;
}

/* ── 2. FRAME — refined app window ─────────────────────── */
.sd-frame {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #1C1514;
    border: 1.5px solid #1C1514;
    
}
.sd-frame::before {
    height: 3px !important;
    
    background-size: 200% auto !important;
}
.sd-frame::after {
    border: none !important;
    box-shadow: none !important;
}

/* ── 3. TOP BAR ─────────────────────────────────────────── */
.sd-frame__top-bar {
    height: 40px !important;
    padding: 0 24px !important;
    background: #1C1514 !important;
    border-bottom: 1px solid rgba(164,16,52,.2) !important;
}
.sd-frame__brand {
    font-size: var(--fs-sm) !important;
    color: #FFFFFF !important;
    gap: 8px !important;
}
.sd-frame__brand i {
    background: #1C1514 !important; 
}
.sd-frame__label {
    font-size: 10px !important;
    color: rgba(255,255,255,.22) !important;
    letter-spacing: .12em !important;
}
.sd-frame__status { color: rgba(255,255,255,.3) !important; }

/* ── 4. LAYOUT COLUMNS ──────────────────────────────────── */
.sd-frame__sidebar-col {
    padding: 20px 0 24px 20px !important;
    background: transparent !important;
}
.sd-frame__content-col {
    padding: 24px !important;
    background: #faf8ff !important;
    border-left: 1px solid rgba(164,16,52,.1) !important;
    border-radius: 0 0 24px 0 !important;
}

/* ── 5. SIDEBAR ─────────────────────────────────────────── */
.student-sidebar {
    margin-top: 0 !important;
    background: #1C1514 !important;
    border-radius: 18px !important;
    box-shadow:
        0 0 0 1px rgba(164,16,52,.2),
        0 8px 32px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(167,139,250,.1) !important;
}
.ss-name   { color: #fff !important; font-size: 1rem !important; }
.ss-email  { color: rgba(255,255,255,.32) !important; }
.ss-switch {
    background: #A41034 !important;
    border-color: #A41034 !important;
    color: #fff !important;
}
.ss-nav ul li a {
    font-size: .83rem !important;
    color: rgba(255,255,255,.5) !important;
    border-radius: 12px !important;
    transition: all .2s !important;
}
.ss-nav ul li a:hover {
   background: linear-gradient(135deg, #A41034 0%, #3d0613 50%, #1a1a1a 100%);
    color: rgba(255, 255, 255, 0.9); 
    text-decoration: none;
    padding-left: 14px;
}
.ss-nav ul li.active a {
    background: #A41034 !important;
    color: #e9d5ff !important;
    border-left-color: #FFFFFF !important;
    font-weight: 700 !important;
}
.ss-section {
    color: rgba(255,255,255,.2) !important;
    font-size: .58rem !important;
    letter-spacing: .16em !important;
}
.ss-divider { background: rgba(255,255,255,.06) !important; }

/* ── 6. SD TOKEN OVERRIDES (light content context) ──────── */
.sd-frame__content-col .sd,
.sd-frame__content-col {
    --card:       #ffffff;
    --card-alt:   #f5f2ff;
    --border:     rgba(164,16,52,.12);
    --text:       #1a0f3e;
    --text-sub:   #5b4d7a;
    --text-muted: #9b8ec4;
    --radius:     16px;
    --radius-sm:  10px;
}

/* ── 7. HERO ────────────────────────────────────────────── */
.sd-hero {
    background: #A41034;
    border-radius: 20px !important;
    padding: 32px 36px !important;
    box-shadow:
        0 0 0 1px rgba(164,16,52,.25),
        0 12px 40px rgba(164,16,52,.3) !important;
    margin-bottom: 22px !important;
}
.sd-hero__greeting { color: #FFFFFF !important; font-size: .68rem !important; }
.sd-hero__name { font-size: 2.1rem !important; }
.sd-hero__name span {
    background: #A41034 !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.sd-hero__sub { color: #A41034 !important; font-size: .85rem !important; }
.sd-hero__badge {
    background: #A41034 !important;
    border: 1px solid #A41034 !important;
    border-radius: 14px !important;
    padding: 16px 22px !important;
}
.sd-hero__badge-val { font-size: 1.5rem !important; }
.sd-hero__badge-lbl { color: #FFFFFF !important; font-size: .65rem !important; }

/* ── 8. STAT CARDS ──────────────────────────────────────── */
.sd-stats { gap: 14px !important; margin-bottom: 22px !important; }
.sd-stat {
    background: #fff !important;
    border: 1px solid rgba(164,16,52,.1) !important;
    border-left-width: 4px !important;
    border-radius: 14px !important;
    padding: 18px 18px 18px 16px !important;
    box-shadow: 0 2px 12px rgba(164,16,52,.07), 0 1px 3px rgba(0,0,0,.04) !important;
    transition: transform .22s, box-shadow .22s !important;
}
.sd-stat:hover {
    transform: translateY(-3px) !important;
}
.sd-stat--courses:hover { box-shadow: 0 8px 28px rgba(164,16,52,.14) !important; }
.sd-stat--klips:hover   { box-shadow: 0 8px 28px rgba(6,182,212,.14) !important; }
.sd-stat--quiz:hover    { box-shadow: 0 8px 28px rgba(245,158,11,.14) !important; }
.sd-stat--reviews:hover { box-shadow: 0 8px 28px rgba(244,63,94,.14) !important; }
.sd-stat--credit:hover  { box-shadow: 0 8px 28px rgba(16,185,129,.14) !important; }
.sd-stat--streak:hover  { box-shadow: 0 8px 28px rgba(249,115,22,.14) !important; }

.sd-stat__icon {
    width: 46px !important; height: 46px !important;
    border-radius: 12px !important; font-size: 1.15rem !important;
}
.sd-stat--courses .sd-stat__icon { background: #FBEEF0 !important; color: #A41034 !important; }
.sd-stat--klips   .sd-stat__icon { background: #cffafe !important; color: #0891b2 !important; }
.sd-stat--quiz    .sd-stat__icon { background: #fef3c7 !important; color: #d97706 !important; }
.sd-stat--reviews .sd-stat__icon { background: #ffe4e6 !important; color: #e11d48 !important; }
.sd-stat--credit  .sd-stat__icon { background: #d1fae5 !important; color: #059669 !important; }
.sd-stat--streak  .sd-stat__icon { background: #ffedd5 !important; color: #ea580c !important; }

.sd-stat__val {
    font-size: 1.75rem !important;
    color: #1a0f3e !important;
    margin-bottom: 3px !important;
}
.sd-stat__lbl { color: #9b8ec4 !important; font-size: .69rem !important; }

/* ── 9. SECTION LABEL ───────────────────────────────────── */
.sd-label {
    color: #7c6aaa !important;
    font-size: .65rem !important;
    letter-spacing: .14em !important;
    margin-bottom: 14px !important;
    margin-top: 22px !important;
}
.sd-label::after { background: linear-gradient(90deg,rgba(164,16,52,.2),transparent) !important; }

/* ── 10. QUICK ACCESS LINKS ─────────────────────────────── */
.sd-links { gap: 12px !important; margin-bottom: 22px !important; }
.sd-link {
    background: #fff !important;
    border: 1px solid rgba(164,16,52,.1) !important;
    border-radius: 16px !important;
    padding: 22px 14px 18px !important;
    box-shadow: 0 2px 10px rgba(164,16,52,.06) !important;
    transition: transform .22s, box-shadow .22s, border-color .22s !important;
}
.sd-link:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(164,16,52,.22) !important;
}
.sd-link--enrolled:hover { box-shadow: 0 10px 28px rgba(164,16,52,.14) !important; }
.sd-link--klips:hover    { box-shadow: 0 10px 28px rgba(6,182,212,.14) !important; }
.sd-link--wishlist:hover { box-shadow: 0 10px 28px rgba(244,63,94,.14) !important; }
.sd-link--quiz:hover     { box-shadow: 0 10px 28px rgba(245,158,11,.14) !important; }
.sd-link--certs:hover    { box-shadow: 0 10px 28px rgba(16,185,129,.14) !important; }
.sd-link--orders:hover   { box-shadow: 0 10px 28px rgba(249,115,22,.14) !important; }
.sd-link--profile:hover  { box-shadow: 0 10px 28px rgba(164,16,52,.14) !important; }
.sd-link--shorts:hover   { box-shadow: 0 10px 28px rgba(6,182,212,.14) !important; }

.sd-link__icon {
    width: 52px !important; height: 52px !important;
    border-radius: 14px !important; font-size: 1.2rem !important;
}
.sd-link--enrolled .sd-link__icon { background: #FBEEF0 !important; color: #A41034 !important; }
.sd-link--klips    .sd-link__icon { background: #cffafe !important; color: #0891b2 !important; }
.sd-link--wishlist .sd-link__icon { background: #ffe4e6 !important; color: #e11d48 !important; }
.sd-link--quiz     .sd-link__icon { background: #fef3c7 !important; color: #d97706 !important; }
.sd-link--certs    .sd-link__icon { background: #d1fae5 !important; color: #059669 !important; }
.sd-link--orders   .sd-link__icon { background: #ffedd5 !important; color: #ea580c !important; }
.sd-link--profile  .sd-link__icon { background: #FBEEF0 !important; color: #A41034 !important; }
.sd-link--shorts   .sd-link__icon { background: #cffafe !important; color: #0891b2 !important; }

.sd-link__lbl { color: #1a0f3e !important; font-size: .78rem !important; font-weight: 600 !important; }

/* ── 11. ORDERS CARD & TABLE ────────────────────────────── */
.sd-card {
    background: #fff !important;
    border: 1px solid rgba(164,16,52,.1) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(164,16,52,.07) !important;
    margin-bottom: 0 !important;
}
.sd-card__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(164,16,52,.08) !important;
    background: #faf8ff !important;
}
.sd-card__title { color: #1a0f3e !important; font-size: .9rem !important; font-weight: 700 !important; }
.sd-card__title i { color: #A41034 !important; margin-right: 6px; }
.sd-card__link {
    font-size: .78rem !important; font-weight: 600 !important;
    color: #A41034 !important; text-decoration: none !important;
    display: inline-flex; align-items: center; gap: 5px;
    transition: gap .2s;
}
.sd-card__link:hover { gap: 8px !important; color: #A41034 !important; }
.sd-table { width: 100%; border-collapse: collapse; }
.sd-table thead tr { background: #f5f2ff !important; }
.sd-table th {
    padding: 10px 16px !important;
    font-size: .67rem !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: .08em !important;
    color: #A41034 !important; text-align: left !important;
    border-bottom: 1px solid rgba(164,16,52,.1) !important;
    white-space: nowrap;
}
.sd-table tbody tr { border-bottom: 1px solid rgba(164,16,52,.06) !important; }
.sd-table tbody tr:last-child { border-bottom: none !important; }
.sd-table tbody tr:hover { background: #faf8ff !important; }
.sd-table td {
    padding: 12px 16px !important;
    font-size: .84rem !important;
    color: #1a0f3e !important;
    vertical-align: middle !important;
}
.sd-invoice { font-weight: 700; color: #A41034 !important; }
.sd-amount  { font-weight: 700; color: #1a0f3e !important; }
.sd-currency { font-size:1rem !important; color: #9b8ec4 !important; margin-left: 3px; }
.sd-gateway {
    display: inline-flex; align-items: center;
    background: #f5f2ff !important; color: #A41034 !important;
    font-size:1rem !important; font-weight: 600 !important;
    padding: 3px 10px !important; border-radius: 20px !important;
}
.sd-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem !important; font-weight: 700 !important;
    padding: 3px 10px !important; border-radius: 20px !important;
    white-space: nowrap;
}
.sd-badge--success { background: #d1fae5 !important; color: #065f46 !important; }
.sd-badge--info    { background: #dbeafe !important; color: #1e40af !important; }
.sd-badge--danger  { background: #ffe4e6 !important; color: #9f1239 !important; }
.sd-badge--warn    { background: #fef3c7 !important; color: #92400e !important; }
.sd-view-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size:1rem !important; font-weight: 700 !important;
    color: #A41034 !important; text-decoration: none !important;
    background: #FBEEF0 !important; padding: 4px 12px !important;
    border-radius: 8px !important; transition: background .15s !important;
}
.sd-view-btn:hover { background: #F6D9DF !important; color: #7A0D27 !important; text-decoration: none !important; }
.sd-empty { text-align: center; padding: 32px 20px !important; }
.sd-empty__icon { font-size: 2rem !important; color: #FFFFFF !important; margin-bottom: 10px; }
.sd-empty__text { font-size: .85rem !important; color: #9b8ec4 !important; }

/* ── 12. RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 991px) {
    .sd-frame__sidebar-col { padding: 16px 16px 0 !important; }
    .sd-frame__content-col { padding: 16px !important; border-left: none !important; border-top: 1px solid rgba(164,16,52,.1) !important; }
    .sd-hero { padding: 24px !important; }
    .sd-hero__name { font-size: 1.6rem !important; }
}

/* ════════════════════════════════════════════════════════════
   ID-FRAME — Instructor Dashboard Premium Frame
   Mirrors sd-frame but with the instructor gold/purple palette
════════════════════════════════════════════════════════════ */

/* ── 1. PAGE BACKGROUND ─────────────────────────────────── */
.instructor-pg {
    background: linear-gradient(160deg, #f0eefa 0%, #e8e4f5 100%) !important;
    padding-top: 28px !important;
    padding-bottom: 48px !important;
    margin-top: 0 !important;
}

/* ── 2. FRAME SHELL ─────────────────────────────────────── */
.id-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #f0eefa;
    border: 1.5px solid rgba(164,16,52,.22);
    box-shadow:
        0 0 0 4px rgba(164,16,52,.05),
        0 20px 60px rgba(164,16,52,.13),
        0 4px 12px rgba(0,0,0,.07);
}

/* Animated shimmer top line */
.id-frame::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        #f59e0b 10%, #FFFFFF 35%, #FFFFFF 50%,
        #FFFFFF 65%, #f59e0b 90%,
        transparent 100%);
    background-size: 200% auto;
    animation: idShimmer 4s linear infinite;
    flex-shrink: 0;
}
@keyframes idShimmer {
    0%   { background-position: -100% center; }
    100% { background-position:  300% center; }
}

/* Inner edge highlight */
.id-frame::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 24px;
    pointer-events: none;
    box-shadow:
        inset 0 1px 0 rgba(245,158,11,.1),
        inset 0 -1px 0 rgba(164,16,52,.08);
    z-index: 10;
}

/* ── 3. TOP BAR ─────────────────────────────────────────── */
.id-frame__top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 24px;
    background: #1C1514;
    border-bottom: 1px solid rgba(245,158,11,.15);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}
.id-frame__top-bar::before,
.id-frame__top-bar::after { display: none; }

.id-frame__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-sm);
    font-weight: 800;
    color: #fcd34d;
    letter-spacing: -.01em;
    flex-shrink: 0;
}
.id-frame__brand i {
    width: 20px; height: 20px;
    border-radius: 6px;
    background: linear-gradient(135deg,#92400e,#d97706);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fef3c7; font-size: 9px;
    box-shadow: 0 2px 8px rgba(217,119,6,.4);
}

.id-frame__label {
    flex: 1;
    text-align: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #A41034;
    letter-spacing: .12em;
    text-transform: uppercase;
    user-select: none;
}

.id-frame__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.28);
    letter-spacing: .06em;
    flex-shrink: 0;
}
.id-frame__status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 5px rgba(16,185,129,.8);
    animation: idPulse 2.5s ease-in-out infinite;
}
@keyframes idPulse {
    0%, 100% { opacity: 1;  box-shadow: 0 0 5px  rgba(16,185,129,.8); }
    50%       { opacity: .4; box-shadow: 0 0 10px rgba(16,185,129,.3); }
}

/* ── 4. LAYOUT COLUMNS ──────────────────────────────────── */
.id-frame__sidebar-col {
    padding: 20px 0 24px 20px !important;
}
.id-frame__content-col {
    padding: 24px !important;
    background: #faf8ff !important;
    border-left: 1px solid rgba(164,16,52,.1);
    border-radius: 0 0 24px 0;
}

/* ── 5. SIDEBAR REFRESH ─────────────────────────────────── */
.id-sidebar {
    margin-top: 0 !important;
    top: 80px !important;
    background: #1C1514 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(164,16,52,.2) !important;
    box-shadow:
        0 0 0 1px rgba(245,158,11,.08),
        0 8px 32px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(245,158,11,.06) !important;
}
.id-sb-name { color: #fff !important; }
.id-sb-role {
    background: rgba(245,158,11,.15) !important;
    border-color: rgba(245,158,11,.3) !important;
    color: #fcd34d !important;
}
.id-sb-rating { color: #fbbf24 !important; }
.id-sb-cta {
    background: linear-gradient(135deg,#A41034,#A41034) !important;
    box-shadow: 0 4px 16px rgba(164,16,52,.45) !important;
}
.id-sb-switch {
    background: rgba(245,158,11,.1) !important;
    border-color: rgba(245,158,11,.22) !important;
    color: rgba(253,211,77,.7) !important;
}
.id-sb-switch:hover { background: rgba(245,158,11,.18) !important; color: #fcd34d !important; }
.id-sb-section { color: rgba(245,158,11,.4) !important; }
.id-sb-section::after { background: rgba(245,158,11,.1) !important; }
.id-sb-divider { background: linear-gradient(90deg,transparent,rgba(245,158,11,.12),transparent) !important; }
.id-sb-link {
    border-radius: 12px !important;
    color: rgba(255,255,255,.5) !important;
    font-size: .83rem !important;
}
.id-sb-link:hover {
    background: linear-gradient(135deg, #A41034 0%, #3d0613 50%, #1a1a1a 100%) !important;
    color: rgba(255,255,255,.9) !important;
    padding-left: 14px !important;
}
.id-sb-link--active {
    background: #A41034 !important;
    color: #e9d5ff !important;
    border-left-color: #FFFFFF !important;
    font-weight: 700 !important;
}
.id-sb-link--active .id-sb-icon { background: rgba(255,255,255,.15) !important; color: #fff !important; }
.id-sb-logout { color: rgba(244,63,94,.65) !important; border-radius: 12px !important; }
.id-sb-logout:hover { background: rgba(244,63,94,.1) !important; color: #fda4af !important; }

/* ── 6. CONTENT TOKEN OVERRIDES ─────────────────────────── */
.id-frame__content-col {
    --card:       #ffffff;
    --card-alt:   #f5f2ff;
    --border:     rgba(164,16,52,.12);
    --text:       #1a0f3e;
    --text-sub:   #5b4d7a;
    --text-muted: #9b8ec4;
    --radius:     16px;
    --radius-sm:  10px;
}

/* ── 7. FORM INPUTS IN CONTENT AREA ─────────────────────── */
.id-frame__content-col .form-grp label,
.id-frame__content-col .cc-card .form-grp label,
.id-frame__content-col .ci-card label {
    color: #A41034 !important;
}
.id-frame__content-col .form-grp input[type="text"],
.id-frame__content-col .form-grp input[type="email"],
.id-frame__content-col .form-grp input[type="number"],
.id-frame__content-col .form-grp select,
.id-frame__content-col .form-grp textarea,
.id-frame__content-col .cc-card .form-grp input,
.id-frame__content-col .cc-card .form-grp select,
.id-frame__content-col .cc-card .form-grp textarea {
    background: #fff !important;
    color: #1a0f3e !important;
    border-color: #dcd7eb !important;
    text-align: left !important;
    direction: ltr !important;
}
.id-frame__content-col .form-grp input:focus,
.id-frame__content-col .form-grp select:focus,
.id-frame__content-col .form-grp textarea:focus {
    border-color: #A41034 !important;
    box-shadow: 0 0 0 3px rgba(164,16,52,.1) !important;
    background: #fff !important;
}

/* ── 8. PAGE TITLE HEADERS (ic-pg-h) ────────────────────── */
.id-frame__content-col .ic-pg-h {
    background: #A41034 !important;
    box-shadow: 0 0 0 1px rgba(164,16,52,.2),0 8px 32px rgba(164,16,52,.25) !important;
}

/* ── 9. CARDS (cc-card, ci-card) ────────────────────────── */
.id-frame__content-col .cc-card,
.id-frame__content-col .ci-card {
    background: #fff !important;
    border: 1px solid rgba(164,16,52,.1) !important;
    box-shadow: 0 2px 12px rgba(164,16,52,.07), 0 1px 3px rgba(0,0,0,.04) !important;
}
.id-frame__content-col .cc-card__body,
.id-frame__content-col .ci-card-body { background: #fff !important; }

/* ── 10. STEP NAV TABS ───────────────────────────────────── */
.id-frame__content-col .ic-pg .nav-tabs {
    background: #A41034 !important;
    border-color: rgba(164,16,52,.22) !important;
}

/* ── 11. OC-SCOPE (My Courses page) ─────────────────────── */
.id-frame__content-col .oc-hero { box-shadow: 0 0 0 1px rgba(164,16,52,.2),0 12px 40px rgba(164,16,52,.3) !important; }
.id-frame__content-col .oc-stat-card { background: #fff !important; box-shadow: 0 2px 12px rgba(164,16,52,.07) !important; }
.id-frame__content-col .oc-stat-card__val { color: #1a0f3e !important; }
.id-frame__content-col .oc-stat-card__lbl { color: #9b8ec4 !important; }
.id-frame__content-col .oc-course-card { background: #fff !important; border-color: rgba(164,16,52,.1) !important; box-shadow: 0 2px 12px rgba(164,16,52,.07) !important; }
.id-frame__content-col .oc-course-card__title a { color: #1a0f3e !important; }
.id-frame__content-col .oc-course-card__cat { background: #FBEEF0 !important; color: #A41034 !important; }
.id-frame__content-col .oc-card-stat { color: #6b7280 !important; }
.id-frame__content-col .oc-card-footer { border-top-color: #f3f4f6 !important; }
.id-frame__content-col .oc-toolbar__count { color: #6b7280 !important; }
.id-frame__content-col .oc-toolbar__count strong { color: #1a0f3e !important; }

/* ── 12. CC3 (Course Content Builder) ────────────────────── */
.id-frame__content-col .cc3-card { box-shadow: 0 4px 24px rgba(164,16,52,.09) !important; }
.id-frame__content-col .cc3-card-body { background: #faf9ff !important; }
.id-frame__content-col .cc3-chapter { background: #fff !important; }
.id-frame__content-col .cc3-chapter-head { background: #faf8ff !important; }
.id-frame__content-col .cc3-item { background: #fff !important; }
.id-frame__content-col .cc3-item-title { color: #1e1240 !important; }
.id-frame__content-col .cc3-item-type { color: #9ca3af !important; }
.id-frame__content-col .cc3-label { color: #A41034 !important; }
.id-frame__content-col .cc3-inline-form { background: linear-gradient(135deg,#FDF5F6,#FBEEF0) !important; }

/* ── 13. CC4 (Finish page) ───────────────────────────────── */
.id-frame__content-col .cc4-card { background: #fff !important; }
.id-frame__content-col .cc4-card-body { background: #faf9ff !important; }
.id-frame__content-col .cc4-textarea {
    background: #fff !important; color: #1e1240 !important; border-color: #dcd7eb !important;
}
.id-frame__content-col .cc4-status-card { background: #fff !important; border-color: #e5e7eb !important; }
.id-frame__content-col .cc4-label { color: #A41034 !important; }
.id-frame__content-col .cc4-label-hint { color: #9ca3af !important; background: #f3f4f6 !important; }

/* ── 14. RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 991px) {
    .id-frame { border-radius: 16px; }
    .id-frame__sidebar-col { padding: 14px 14px 0 14px !important; }
    .id-frame__content-col { padding: 14px !important; border-left: none !important; border-top: 1px solid rgba(164,16,52,.1); }
    .id-frame__label { display: none; }
}

/* ── Quiz Modal ── */
.ig-quiz-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: var(--tg-theme-primary, #A41034);
    border-radius: 8px 8px 0 0;
}
.ig-quiz-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
}
.ig-quiz-modal-title i {
    margin-right: 8px;
    opacity: 0.85;
}
.ig-quiz-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    color: #ffffff;
    font-size: var(--fs-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.ig-quiz-close-btn:hover {
    background: rgba(255,255,255,0.3);
}
.ig-quiz-modal-body {
    padding: 24px;
    background: #ffffff;
}
.ig-quiz-label {
    color: var(--tg-theme-primary, #A41034) !important;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 6px;
    display: block;
}
.ig-quiz-req {
    color: var(--tg-theme-primary, #A41034);
    font-style: normal;
}
.ig-quiz-hint {
    color: #888;
    font-weight: 400;
    font-size: 0.78rem;
}
.ig-quiz-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    background: #ffffff;
    border-top: 1px solid #e9e9e9;
    border-radius: 0 0 8px 8px;
}
.ig-quiz-cancel-btn {
    padding: 9px 22px;
    border: 1.5px solid var(--tg-theme-primary, #A41034);
    background: #ffffff;
    color: var(--tg-theme-primary, #A41034);
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.ig-quiz-cancel-btn:hover {
    color: #FFFFFF;
    background: var(--tg-theme-primary, #A41034);
}
.ig-quiz-submit-btn {
    padding: 9px 24px;
    border: none;
    background: var(--tg-theme-primary, #A41034);
    color: #ffffff;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;

}
.ig-quiz-submit-btn:hover {
    color: #FFFFFF;
    opacity: 0.9;
}


/* ================================================================
   iGURUS PAGE COMPONENTS — Safe Scoped Component CSS
   Rule: Only .class-name selectors. No body/main/root overrides.
================================================================ */

/* ── Legal / Policy pages full-bleed fix ───────────────────────────
   .pp-wrap pulls itself up by the header height so its hero fills the
   full viewport — replaces the old body #content-wrapper overrides.
──────────────────────────────────────────────────────────────── */
.pp-wrap {
    margin-top: calc(-1 * var(--header-h, 70px));
    background: #FBFAFF;
    min-height: 100vh;
    overflow: visible;
}
.main-area.fix { overflow: visible; }

/* ── Dashboard Layout Resets (instructor + student pages) ──────────
   These override the 60px sidebar padding on #wrapper.toggled pages.
   Safe globally: no-sidebar pages are unaffected by .toggled rules.
──────────────────────────────────────────────────────────────── */
#sidebar-wrapper          { display: none !important; width: 0 !important; }
#wrapper, #wrapper.toggled { padding-left: 0 !important; }
#wrapper.toggled #content-wrapper { margin-right: 0 !important; position: static !important; }
.dark-bkg-color.menu_darker_hide  { display: none !important; }
.instructor-pg { background: #f5f4fa !important; min-height: 100vh; }
@media (min-width: 992px) {
    #wrapper         { padding-left: 0 !important; }
    #wrapper.toggled { padding-left: 0 !important; }
    #sidebar-wrapper { display: none !important; width: 0 !important; }
}


/* ── login ── */
/* ══════════════════════════════════════════
   PAGE BACKGROUND  (identical to register)
══════════════════════════════════════════ */
.ig-reg-page {
    min-height: calc(100vh - 82px);
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px 0;
    position: relative;
    overflow: hidden;
}
.ig-reg-orb { position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; }
.ig-reg-orb-1 { width:700px;height:700px;background:radial-gradient(circle,rgba(164,16,52,.18),transparent 65%);top:-250px;left:-200px; }
.ig-reg-orb-2 { width:550px;height:550px;background:radial-gradient(circle,rgba(37,99,235,.15),transparent 65%);bottom:-200px;right:-150px; }
.ig-reg-orb-3 { width:400px;height:400px;background:radial-gradient(circle,rgba(219,39,119,.10),transparent 65%);top:40%;left:55%; }
.ig-reg-dots-bg { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;pointer-events:none; }

/* ══════════════════════════════════════════
   CARD SHELL  (80% = 10% each side)
══════════════════════════════════════════ */
.ig-reg-wrap {
    display: flex;
    width: 100%;
    max-width: 1240px;
    min-height: 620px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.07),
        0 32px 80px rgba(0,0,0,.55),
        0 8px 24px rgba(164,16,52,.15);
}

/* ══════════════════════════════════════════
   LEFT PANEL — White form
══════════════════════════════════════════ */
.ig-reg-left {
    flex: 0 0 48%;
    max-width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px 56px;
    background: #ffffff;
    overflow-y: auto;
}

.ig-reg-logo { display:flex;align-items:center;gap:9px;text-decoration:none;margin-bottom:28px; }
.ig-reg-logo img { max-height:30px; }
.ig-reg-logo-text {
    font-size: var(--fs-lg);font-weight:800;letter-spacing:-.5px;
    background:#A41034;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.ig-reg-title { font-size:1.7rem;font-weight:800;color:#0f0c29;line-height: var(--lh-tight);margin-bottom:5px; }
.ig-reg-sub   { font-size: var(--fs-sm);color:#6b7280;margin-bottom:22px; }

/* Google btn */
.ig-google-btn {
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:11px 20px;
    border:1.5px solid #e5e7eb;border-radius:10px;
    background:#fff;color:#374151;font-size: var(--fs-sm);font-weight:600;
    cursor:pointer;text-decoration:none;
    transition:border-color .2s,box-shadow .2s;
    margin-bottom:16px;
}
.ig-google-btn:hover { border-color:#A41034;box-shadow:0 0 0 3px rgba(164,16,52,.08);text-decoration:none;color:#374151; }
.ig-google-btn img { width:20px;height:20px; }

/* Divider */
.ig-divider { display:flex;align-items:center;gap:12px;margin-bottom:16px;color:#9ca3af;font-size:12.5px; }
.ig-divider::before,.ig-divider::after { content:'';flex:1;height:1px;background:#e5e7eb; }

/* Alert */
.ig-alert-danger { padding:10px 14px;border-radius:8px;font-size: var(--fs-sm);background:#fef2f2;border:1px solid #fecaca;color:#dc2626;margin-bottom:14px; }

/* Form fields */
.ig-fg { margin-bottom:14px;position:relative; }
.ig-label { display:block;font-size: var(--fs-xs);font-weight:600;color:#374151;margin-bottom:5px; }
.ig-label span { color:#ef4444; }
.ig-input {
    width:100%;padding:10px 13px;
    border:1.5px solid #e5e7eb;border-radius:9px;
    font-size: var(--fs-sm);color:#111827;background:#fafafa;outline:none;
    transition:border-color .2s,box-shadow .2s,background .2s;
    box-sizing:border-box;
}
.ig-input:focus { border-color:#A41034 !important;box-shadow:0 0 0 3px rgba(164,16,52,.10) !important;background:#fff; }
.ig-input.is-invalid { border-color:#ef4444 !important;background:#fff5f5; }
.ig-ferr { display:block;font-size: var(--fs-xs);color:#ef4444;margin-top:4px;font-weight:500;min-height:14px; }

/* Eye toggle */
.ig-pw-wrap { position:relative; }
.ig-pw-wrap .ig-input { padding-right:40px; }
.ig-pw-eye { position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:#9ca3af;font-size: var(--fs-sm);line-height:1; }
.ig-pw-eye:hover { color:#A41034; }

/* Remember + Forgot row */
.ig-auth-row {
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:16px;
}
.ig-auth-row label { font-size:12.5px;color:#6b7280;cursor:pointer;display:flex;align-items:center;gap:7px; }
.ig-auth-row label input { accent-color:#A41034;width:14px;height:14px; }
.ig-auth-row a { font-size:12.5px;color:#A41034;font-weight:600;text-decoration:none; }
.ig-auth-row a:hover { text-decoration:underline; }

/* Submit */
.ig-submit {
    width:100%;padding:12px;
    background:#A41034;
    color:#fff;border:none;border-radius:10px;
    font-size: var(--fs-sm);font-weight:700;cursor:pointer;
    transition:opacity .2s,transform .2s,box-shadow .2s;
    box-shadow:0 6px 20px rgba(164,16,52,.35);
    margin-bottom:13px;letter-spacing:.3px;
}
.ig-submit:hover { opacity:.88;transform:translateY(-1px);box-shadow:0 10px 28px rgba(164,16,52,.45); }

/* Alt links */
.ig-reg-alt { text-align:center;font-size:12.5px;color:#6b7280;margin-bottom:7px; }
.ig-reg-alt a { color:#A41034;font-weight:600;text-decoration:none; }
.ig-reg-alt a:hover { text-decoration:underline; }

/* ══════════════════════════════════════════
   RIGHT PANEL — Dark animated branding
   (same as register page, identical classes)
══════════════════════════════════════════ */
.ig-reg-right {
    flex:1;position:relative;background:#1C1514;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    padding:56px 44px;
}
.ig-rr-blob { position:absolute;border-radius:50%;filter:blur(80px);opacity:.52;animation:rrBlob 10s ease-in-out infinite alternate; }
.ig-rr-blob.p { width:480px;height:480px;background:radial-gradient(circle,#A41034,transparent 70%);top:-120px;left:-80px; }
.ig-rr-blob.b { width:380px;height:380px;background:radial-gradient(circle,#2563eb,transparent 70%);bottom:-80px;right:-60px;animation-duration:14s;animation-delay:-5s; }
.ig-rr-blob.k { width:300px;height:300px;background:radial-gradient(circle,#db2777,transparent 70%);top:45%;left:38%;animation-duration:12s;animation-delay:-3s; }
@keyframes rrBlob{0%{transform:translate(0,0) scale(1);}50%{transform:translate(18px,-14px) scale(1.05);}100%{transform:translate(-10px,18px) scale(.97);}}
.ig-rr-grid { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px;pointer-events:none; }
.ig-rr-shine { position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.5),transparent); }
.ig-rr-content { position:relative;z-index:1;text-align:center;max-width:420px;width:100%; }

/* Wordmark */
.ig-rr-wordmark {
    font-size:2.6rem;font-weight:900;letter-spacing:-2px;
    background:#A41034;
    background-size:200% auto;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:gShift 5s linear infinite;display:block;margin-bottom:18px;
}
@keyframes gShift{0%{background-position:0 center;}100%{background-position:200% center;}}

/* Progress bar */
.ig-rr-progress { height:2px;background:#fff;border-radius:2px;overflow:hidden;margin-bottom:20px; }
.ig-rr-progress-fill { height:100%;background:#A41034;width:0;transition:width 30s linear; }

/* Slides */
.ig-rr-slider { position:relative;min-height:320px; }
.ig-rr-slide { position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease;pointer-events:none; }
.ig-rr-slide.active { opacity:1;transform:translateY(0);pointer-events:auto;position:relative; }
.ig-rr-slide h2 { font-size:1.65rem;font-weight:800;color:#fff;line-height: var(--lh-tight);margin-bottom:10px; }
.ig-rr-slide p  { font-size: var(--fs-sm);color:rgba(255,255,255,.58);line-height:1.75;margin-bottom:22px; }

/* Feature list */
.ig-rr-feat { list-style:none;padding:0;margin:0 0 22px;text-align:left; }
.ig-rr-feat li {
    display:flex;align-items:center;gap:12px;
    padding:10px 13px;border-radius:11px;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);
    margin-bottom:8px;color:rgba(255,255,255,.85);font-size: var(--fs-sm);font-weight:500;
    transition:background .2s;
}
.ig-rr-feat li:hover { background: rgba(164, 16, 52, 0.15); }
.ig-rr-feat li .fi { width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size: var(--fs-base);flex-shrink:0; }
.ig-rr-feat li:nth-child(1) .fi { background:#A41034;color:#fff; }
.ig-rr-feat li:nth-child(2) .fi { background:#A41034;color:#fff; }
.ig-rr-feat li:nth-child(3) .fi { background:#A41034;color:#fff; }
.ig-rr-feat li:nth-child(4) .fi { background:#A41034;color:#fff; }

/* Stats */
.ig-rr-stats { display:flex;align-items:center;justify-content:center;flex-wrap:wrap; }
.ig-rr-stat  { display:flex;flex-direction:column;align-items:center;padding:0 16px; }
.ig-rr-stat strong {
    font-size:1.45rem;font-weight:900;line-height:1;display:block;
    background:#A41034;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ig-rr-stat span { font-size:9px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.38);margin-top:4px; }
.ig-rr-vdiv { width:1px;height:28px;background:rgba(255,255,255,.12); }

/* Testimonial */
.ig-rr-quote { background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:20px;text-align:left;margin-bottom:14px; }
.ig-rr-quote-text { font-size: var(--fs-sm);color:rgba(255,255,255,.78);line-height:1.75;margin-bottom:14px;font-style:italic; }
.ig-rr-quote-author { display:flex;align-items:center;gap:11px; }
.ig-rr-avatar { width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size: var(--fs-base);font-weight:800;color:#fff;flex-shrink:0; }
.ig-rr-quote-name { font-size:12.5px;font-weight:700;color:#fff;display:block; }
.ig-rr-quote-role { font-size:10.5px;color:rgba(255,255,255,.42);display:block; }

/* Dots */
.ig-rr-dots { display:flex;gap:6px;justify-content:center;margin-top:18px; }
.ig-rr-dot-btn { width:6px;height:6px;border-radius:50%;background:#A41034;border:none;cursor:pointer;padding:0;transition:all .3s; }
.ig-rr-dot-btn.active { width:20px;border-radius:4px;background:#A41034; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1199px){ .ig-reg-wrap{width:88%;} }
@media(max-width:991px){
    .ig-reg-wrap{width:92%;flex-direction:column;border-radius:18px;}
    .ig-reg-left{flex:none;max-width:100%;padding:36px 28px;}
    .ig-reg-right{display:none;}
}
@media(max-width:575px){
    .ig-reg-wrap{width:96%;border-radius:14px;}
    .ig-reg-left{padding:28px 18px;}
}

/* ── register ── */
/* ══════════════════════════════════════════
   PAGE BACKGROUND
══════════════════════════════════════════ */
.ig-reg-page {
    min-height: calc(100vh - 82px);
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px 0;
    position: relative;
    overflow: hidden;
}

/* Ambient glow orbs on page */
.ig-reg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}
.ig-reg-orb-1 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(164,16,52,.18), transparent 65%); top: -250px; left: -200px; }
.ig-reg-orb-2 { width: 550px; height: 550px; background: radial-gradient(circle, rgba(37,99,235,.15), transparent 65%); bottom: -200px; right: -150px; }
.ig-reg-orb-3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(219,39,119,.10), transparent 65%); top: 40%; left: 55%; }

/* Dot grid on page */
.ig-reg-dots-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* ══════════════════════════════════════════
   CARD SHELL  (80% width = 10% each side)
══════════════════════════════════════════ */
.ig-reg-wrap {
    display: flex;
    width: 100%;
    max-width: 1240px;
    min-height: 680px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.07),
        0 32px 80px rgba(0,0,0,.55),
        0 8px 24px rgba(164,16,52,.15);
}

/* ══════════════════════════════════════════
   LEFT PANEL — White form
══════════════════════════════════════════ */
.ig-reg-left {
    flex: 0 0 48%;
    max-width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 52px;
    background: #ffffff;
    overflow-y: auto;
}

.ig-reg-logo {  align-items:center; gap:9px; text-decoration:none; margin-bottom:28px; }
 
.ig-reg-logo-text {
    font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.5px;
    background: #A41034;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.ig-reg-title { font-size: 1.7rem; font-weight: 800; color: #0f0c29; line-height: var(--lh-tight); margin-bottom: 5px; }
.ig-reg-sub   { font-size: var(--fs-sm); color: #6b7280; margin-bottom: 22px; }

/* Google */
.ig-google-btn {
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:11px 20px;
    border: 1.5px solid #e5e7eb; border-radius: 10px;
    background: #fff; color: #374151; font-size: var(--fs-sm); font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
    margin-bottom: 16px;
}
.ig-google-btn:hover { border-color:#A41034; box-shadow:0 0 0 3px rgba(164,16,52,.08); text-decoration:none; color:#374151; }
.ig-google-btn img { width:20px; height:20px; }

/* Divider */
.ig-divider { display:flex; align-items:center; gap:12px; margin-bottom:16px; color:#9ca3af; font-size:12.5px; }
.ig-divider::before,.ig-divider::after { content:''; flex:1; height:1px; background:#e5e7eb; }

/* Alert */
.ig-alert-danger { padding:10px 14px; border-radius:8px; font-size: var(--fs-sm); background:#fef2f2; border:1px solid #fecaca; color:#dc2626; margin-bottom:14px; }

/* Role toggle */
.ig-role-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.ig-role-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 16px; border:2px solid #e5e7eb; border-radius:10px;
    font-size: var(--fs-sm); font-weight:600; color:#6b7280; cursor:pointer;
    transition:all .2s; background:#fff;
}
.ig-role-btn.active, .ig-role-btn:hover { border-color:#A41034; color:#A41034; background:rgba(164,16,52,.05); }
.ig-role-btn i { font-size: var(--fs-base); }

/* Form fields */
.ig-fg { margin-bottom:13px; position:relative; }
.ig-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.ig-label { display:block; font-size: var(--fs-xs); font-weight:600; color:#374151; margin-bottom:5px; }
.ig-label span { color:#ef4444; }
.ig-input {
    width:100%; padding:10px 13px;
    border:1.5px solid #e5e7eb; border-radius:9px;
    font-size: var(--fs-sm); color:#111827; background:#fafafa; outline:none;
    transition:border-color .2s, box-shadow .2s, background .2s;
    box-sizing:border-box;
}
.ig-input:focus { border-color:#A41034 !important; box-shadow:0 0 0 3px rgba(164,16,52,.10) !important; background:#fff; }
.ig-input.is-invalid { border-color:#ef4444 !important; background:#fff5f5; }
.ig-ferr { display:block; font-size: var(--fs-xs); color:#ef4444; margin-top:4px; font-weight:500; min-height:14px; }

/* Eye toggle */
.ig-pw-wrap { position:relative; }
.ig-pw-wrap .ig-input { padding-right:40px; }
.ig-pw-eye { position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; color:#9ca3af; font-size: var(--fs-sm); line-height:1; }
.ig-pw-eye:hover { color:#A41034; }

/* Password strength bar */
.ig-pw-strength { margin-top:8px; margin-bottom:13px; }
.ig-pw-bar-track { height:3px; border-radius:4px; background:#e5e7eb; overflow:hidden; margin-bottom:8px; }
.ig-pw-bar-fill  { height:100%; border-radius:4px; width:0; transition:width .4s, background .4s; }
.ig-pw-criteria  { display:flex; flex-wrap:wrap; gap:5px; }
.ig-pw-rule {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:100px;
    font-size: var(--fs-xs); font-weight:600;
    background:#f3f4f6; color:#9ca3af;
    border:1px solid #e5e7eb;
    transition:all .2s;
}
.ig-pw-rule.ok { background:rgba(16,185,129,.1); color:#059669; border-color:rgba(16,185,129,.3); }
.ig-pw-rule i { font-size:9px; }

/* Submit */
.ig-submit {
    width:100%; padding:12px;
    background: #A41034;
    color:#fff; border:none; border-radius:10px;
    font-size: var(--fs-sm); font-weight:700; cursor:pointer;
    transition:opacity .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 6px 20px rgba(164,16,52,.35);
    margin-bottom:13px;
    letter-spacing:.3px;
}
.ig-submit:hover { opacity:.88; transform:translateY(-1px); box-shadow:0 10px 28px rgba(164,16,52,.45); }

/* Checkbox */
.ig-check-row { display:flex; align-items:flex-start; gap:8px; margin-bottom:11px; }
.ig-check-row input[type=checkbox] { margin-top:2px; accent-color:#A41034; width:14px; height:14px; flex-shrink:0; cursor:pointer; }
.ig-check-row label { font-size: var(--fs-xs); color:#6b7280; cursor:pointer; line-height:1.45; }

/* Alt links */
.ig-reg-alt { text-align:center; font-size:12.5px; color:#6b7280; margin-bottom:7px; }
.ig-reg-alt a { color:#A41034; font-weight:600; text-decoration:none; }
.ig-reg-alt a:hover { text-decoration:underline; }

/* intl-tel-input overrides */
.iti { width: 100% !important; }
.iti__flag-container { height: 100% !important; }
.iti--separate-dial-code .iti__selected-flag {
    border-radius: 9px 0 0 9px !important;
    background: #f3f4f6 !important;
    border-right: 1px solid #e5e7eb !important;
    padding: 0 8px !important;
}
.iti--separate-dial-code input#phone_country_code {
    padding-left: 90px !important;
    border-radius: 9px !important;
    height: auto !important;
}
.iti--separate-dial-code input#phone_country_code:focus { border-color: #A41034 !important; box-shadow: 0 0 0 3px rgba(164,16,52,.10) !important; }
.iti__country-list { border-radius: 10px !important; border: 1px solid #e5e7eb !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; font-size: var(--fs-sm) !important; }
.iti__country-list .iti__country.iti__highlight { background: rgba(164,16,52,.08) !important; }
.iti__dial-code { color: #374151 !important; }
.iti__selected-dial-code { font-size: var(--fs-sm) !important; color: #374151 !important; font-weight: 600 !important; }

/* ══════════════════════════════════════════
   RIGHT PANEL — Dark animated branding
══════════════════════════════════════════ */
.ig-reg-right {
    flex: 1;
    position: relative;
    background: #1C1514;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 44px;
}

/* Right panel background blobs */
.ig-rr-blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.52; animation:rrBlob 10s ease-in-out infinite alternate; }
.ig-rr-blob.p { width:480px; height:480px; background:radial-gradient(circle,#A41034,transparent 70%); top:-120px; left:-80px; }
.ig-rr-blob.b { width:380px; height:380px; background:radial-gradient(circle,#2563eb,transparent 70%); bottom:-80px; right:-60px; animation-duration:14s; animation-delay:-5s; }
.ig-rr-blob.k { width:300px; height:300px; background:radial-gradient(circle,#db2777,transparent 70%); top:45%; left:38%; animation-duration:12s; animation-delay:-3s; }
@keyframes rrBlob { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(18px,-14px) scale(1.05);} 100%{transform:translate(-10px,18px) scale(.97);} }

.ig-rr-grid { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1px); background-size:34px 34px; pointer-events:none; }

/* Top shine accent */
.ig-rr-shine {
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 60%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167,139,250,.5), transparent);
}

.ig-rr-content { position:relative; z-index:1; text-align:center; max-width:420px; width:100%; }

/* Wordmark */
.ig-rr-wordmark {
    font-size: 2.6rem; font-weight: 900; letter-spacing: -2px;
    background: #A41034;
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: gShift 5s linear infinite;
    display: block; margin-bottom: 18px;
}
@keyframes gShift { 0%{background-position:0 center;} 100%{background-position:200% center;} }

/* Progress timer bar */
.ig-rr-progress { height:2px; background:#fff; border-radius:2px; overflow:hidden; margin-bottom:20px; }
.ig-rr-progress-fill { height:100%; background:#A41034; width:0; transition:width 30s linear; }

/* Slides */
.ig-rr-slider { position:relative; min-height:320px; }
.ig-rr-slide { position:absolute; inset:0; opacity:0; transform:translateY(16px); transition:opacity .65s ease,transform .65s ease; pointer-events:none; }
.ig-rr-slide.active { opacity:1; transform:translateY(0); pointer-events:auto; position:relative; }
.ig-rr-slide h2 { font-size:1.65rem; font-weight:800; color:#fff; line-height: var(--lh-tight); margin-bottom:10px; }
.ig-rr-slide p  { font-size: var(--fs-sm); color:rgba(255,255,255,.58); line-height:1.75; margin-bottom:22px; }

/* Feature list */
.ig-rr-feat { list-style:none; padding:0; margin:0 0 22px; text-align:left; }
.ig-rr-feat li {
    display:flex; align-items:center; gap:12px;
    padding:10px 13px; border-radius:11px;
    background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08);
    margin-bottom:8px; color:rgba(255,255,255,.85); font-size: var(--fs-sm); font-weight:500;
    transition:background .2s;
}
.ig-rr-feat li:hover { background: rgba(164, 16, 52, 0.15); }
.ig-rr-feat li .fi { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size: var(--fs-base); flex-shrink:0; }
.ig-rr-feat li:nth-child(1) .fi { background:#A41034;color:#fff; }
.ig-rr-feat li:nth-child(2) .fi { background:#A41034;color:#fff;}
.ig-rr-feat li:nth-child(3) .fi { background:#A41034;color:#fff; }
.ig-rr-feat li:nth-child(4) .fi { background:#A41034;color:#fff; }

/* Stats */
.ig-rr-stats { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.ig-rr-stat  { display:flex; flex-direction:column; align-items:center; padding:0 16px; }
.ig-rr-stat strong {
    font-size:1.45rem; font-weight:900; line-height:1; display:block;
    background:#A41034;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.ig-rr-stat span { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.38); margin-top:4px; }
.ig-rr-vdiv { width:1px; height:28px; background:rgba(255,255,255,.12); }

/* Testimonial */
.ig-rr-quote { background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:20px; text-align:left; margin-bottom:14px; }
.ig-rr-quote-text { font-size: var(--fs-sm); color:rgba(255,255,255,.78); line-height:1.75; margin-bottom:14px; font-style:italic; }
.ig-rr-quote-author { display:flex; align-items:center; gap:11px; }
.ig-rr-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size: var(--fs-base); font-weight:800; color:#fff; flex-shrink:0; }
.ig-rr-quote-name { font-size:12.5px; font-weight:700; color:#fff; display:block; }
.ig-rr-quote-role { font-size:10.5px; color:rgba(255,255,255,.42); display:block; }

/* Dot indicators */
.ig-rr-dots { display:flex; gap:6px; justify-content:center; margin-top:18px; }
.ig-rr-dot-btn { width:6px; height:6px; border-radius:50%; background:#A41034; border:none; cursor:pointer; padding:0; transition:all .3s; }
.ig-rr-dot-btn.active { width:20px; border-radius:4px; background:#A41034; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1199px) {
    .ig-reg-wrap { width:88%; }
}
@media(max-width:991px) {
    .ig-reg-wrap { width:92%; flex-direction:column; border-radius:18px; }
    .ig-reg-left { flex:none; max-width:100%; padding:36px 28px; }
    .ig-reg-right { display:none; }
}
@media(max-width:575px) {
    .ig-reg-wrap { width:96%; border-radius:14px; }
    .ig-reg-left { padding:28px 18px; }
    .ig-row-2 { grid-template-columns:1fr; }
}

/* ── two_factor_login ── */
/* ══════════════════════════════════════════
   PAGE BACKGROUND  (identical to register)
══════════════════════════════════════════ */
.ig-reg-page {
    min-height: calc(100vh - 82px);
    background: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    padding: 52px 0; position: relative; overflow: hidden;
}
.ig-reg-orb { position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none; }
.ig-reg-orb-1 { width:700px;height:700px;background:radial-gradient(circle,rgba(164,16,52,.18),transparent 65%);top:-250px;left:-200px; }
.ig-reg-orb-2 { width:550px;height:550px;background:radial-gradient(circle,rgba(37,99,235,.15),transparent 65%);bottom:-200px;right:-150px; }
.ig-reg-orb-3 { width:400px;height:400px;background:radial-gradient(circle,rgba(219,39,119,.10),transparent 65%);top:40%;left:55%; }
.ig-reg-dots-bg { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;pointer-events:none; }

/* ══════════════════════════════════════════
   CARD SHELL  (80% = 10% each side)
══════════════════════════════════════════ */
.ig-reg-wrap {
    display:flex; width:100%;   min-height:560px;
    border-radius:24px; overflow:hidden; position:relative; z-index:2;
    box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 32px 80px rgba(0,0,0,.55), 0 8px 24px rgba(164,16,52,.15);
}

/* ══════════════════════════════════════════
   LEFT PANEL — White form
══════════════════════════════════════════ */
.ig-reg-left {
    flex:0 0 48%; max-width:48%;
    display:flex; flex-direction:column; justify-content:center;
    padding:52px 56px; background:#ffffff; overflow-y:auto;
}

.ig-reg-logo { display:flex;align-items:center;gap:9px;text-decoration:none;margin-bottom:28px; }
.ig-reg-logo img { max-height:30px; }
.ig-reg-logo-text {
    font-size: var(--fs-lg);font-weight:800;letter-spacing:-.5px;
    background:#A41034;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ig-reg-title { font-size:1.7rem;font-weight:800;color:#0f0c29;line-height: var(--lh-tight);margin-bottom:5px; }
.ig-reg-sub   { font-size: var(--fs-sm);color:#6b7280;margin-bottom:22px; }

/* Google btn */
.ig-google-btn {
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:11px 20px;border:1.5px solid #e5e7eb;border-radius:10px;
    background:#fff;color:#374151;font-size: var(--fs-sm);font-weight:600;
    cursor:pointer;text-decoration:none;transition:border-color .2s,box-shadow .2s;margin-bottom:16px;
}
.ig-google-btn:hover { border-color:#A41034;box-shadow:0 0 0 3px rgba(164,16,52,.08);text-decoration:none;color:#374151; }
.ig-google-btn img { width:20px;height:20px; }

/* Divider */
.ig-divider { display:flex;align-items:center;gap:12px;margin-bottom:16px;color:#9ca3af;font-size:12.5px; }
.ig-divider::before,.ig-divider::after { content:'';flex:1;height:1px;background:#e5e7eb; }

/* Alert */
.ig-alert-danger { padding:10px 14px;border-radius:8px;font-size: var(--fs-sm);background:#fef2f2;border:1px solid #fecaca;color:#dc2626;margin-bottom:14px; }

/* Form fields */
.ig-fg { margin-bottom:14px; }
.ig-label { display:block;font-size: var(--fs-xs);font-weight:600;color:#374151;margin-bottom:5px; }
.ig-label span { color:#ef4444; }
.ig-input {
    width:100%;padding:10px 13px;border:1.5px solid #e5e7eb;border-radius:9px;
    font-size: var(--fs-sm);color:#111827;background:#fafafa;outline:none;
    transition:border-color .2s,box-shadow .2s,background .2s;box-sizing:border-box;
}
.ig-input:focus { border-color:#A41034 !important;box-shadow:0 0 0 3px rgba(164,16,52,.10) !important;background:#fff; }
.ig-input.is-invalid { border-color:#ef4444 !important;background:#fff5f5; }
.ig-ferr { display:block;font-size: var(--fs-xs);color:#ef4444;margin-top:4px;font-weight:500;min-height:14px; }

/* Submit */
.ig-submit {
    width:100%;padding:12px;
    background:#A41034;
    color:#fff;border:none;border-radius:10px;font-size: var(--fs-sm);font-weight:700;cursor:pointer;
    transition:opacity .2s,transform .2s,box-shadow .2s;
    box-shadow:0 6px 20px rgba(164,16,52,.35);margin-bottom:16px;letter-spacing:.3px;
}
.ig-submit:hover { opacity:.88;transform:translateY(-1px);box-shadow:0 10px 28px rgba(164,16,52,.45); }

/* Alt links */
.ig-reg-alt { text-align:center;font-size:12.5px;color:#6b7280;margin-bottom:7px; }
.ig-reg-alt a { color:#A41034;font-weight:600;text-decoration:none; }
.ig-reg-alt a:hover { text-decoration:underline; }

/* ══════════════════════════════════════════
   RIGHT PANEL — identical to register
══════════════════════════════════════════ */
.ig-reg-right { flex:1;position:relative;background:#1C1514;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:56px 44px; }
.ig-rr-blob { position:absolute;border-radius:50%;filter:blur(80px);opacity:.52;animation:rrBlob 10s ease-in-out infinite alternate; }
.ig-rr-blob.p { width:480px;height:480px;background:radial-gradient(circle,#A41034,transparent 70%);top:-120px;left:-80px; }
.ig-rr-blob.b { width:380px;height:380px;background:radial-gradient(circle,#2563eb,transparent 70%);bottom:-80px;right:-60px;animation-duration:14s;animation-delay:-5s; }
.ig-rr-blob.k { width:300px;height:300px;background:radial-gradient(circle,#db2777,transparent 70%);top:45%;left:38%;animation-duration:12s;animation-delay:-3s; }
@keyframes rrBlob{0%{transform:translate(0,0) scale(1);}50%{transform:translate(18px,-14px) scale(1.05);}100%{transform:translate(-10px,18px) scale(.97);}}
.ig-rr-grid { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px;pointer-events:none; }
.ig-rr-shine { position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.5),transparent); }
.ig-rr-content { position:relative;z-index:1;text-align:center;max-width:420px;width:100%; }
.ig-rr-wordmark {
    font-size:2.6rem;font-weight:900;letter-spacing:-2px;
    background:#A41034;
    background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:gShift 5s linear infinite;display:block;margin-bottom:18px;
}
@keyframes gShift{0%{background-position:0 center;}100%{background-position:200% center;}}
.ig-rr-progress { height:2px;background:#fff;border-radius:2px;overflow:hidden;margin-bottom:20px; }
.ig-rr-progress-fill { height:100%;background:#A41034;width:0;transition:width 30s linear; }
.ig-rr-slider { position:relative;min-height:320px; }
.ig-rr-slide { position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease;pointer-events:none; }
.ig-rr-slide.active { opacity:1;transform:translateY(0);pointer-events:auto;position:relative; }
.ig-rr-slide h2 { font-size:1.65rem;font-weight:800;color:#fff;line-height: var(--lh-tight);margin-bottom:10px; }
.ig-rr-slide p  { font-size: var(--fs-sm);color:rgba(255,255,255,.58);line-height:1.75;margin-bottom:22px; }
.ig-rr-feat { list-style:none;padding:0;margin:0 0 22px;text-align:left; }
.ig-rr-feat li { display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:11px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);margin-bottom:8px;color:rgba(255,255,255,.85);font-size: var(--fs-sm);font-weight:500;transition:background .2s; }
.ig-rr-feat li:hover { background: rgba(164, 16, 52, 0.15); }
.ig-rr-feat li .fi { width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size: var(--fs-base);flex-shrink:0; }
.ig-rr-feat li:nth-child(1) .fi{background:rgba(164,16,52,.25);color:#FFFFFF;}
.ig-rr-feat li:nth-child(2) .fi{background:rgba(37,99,235,.25);color:#93c5fd;}
.ig-rr-feat li:nth-child(3) .fi{background:rgba(8,145,178,.25);color:#67e8f9;}
.ig-rr-feat li:nth-child(4) .fi{background:rgba(16,185,129,.25);color:#6ee7b7;}
.ig-rr-stats { display:flex;align-items:center;justify-content:center;flex-wrap:wrap; }
.ig-rr-stat  { display:flex;flex-direction:column;align-items:center;padding:0 16px; }
.ig-rr-stat strong { font-size:1.45rem;font-weight:900;line-height:1;display:block;background:#A41034;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.ig-rr-stat span { font-size:9px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.38);margin-top:4px; }
.ig-rr-vdiv { width:1px;height:28px;background:rgba(255,255,255,.12); }
.ig-rr-quote { background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:20px;text-align:left;margin-bottom:14px; }
.ig-rr-quote-text { font-size: var(--fs-sm);color:rgba(255,255,255,.78);line-height:1.75;margin-bottom:14px;font-style:italic; }
.ig-rr-quote-author { display:flex;align-items:center;gap:11px; }
.ig-rr-avatar { width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size: var(--fs-base);font-weight:800;color:#fff;flex-shrink:0; }
.ig-rr-quote-name { font-size:12.5px;font-weight:700;color:#fff;display:block; }
.ig-rr-quote-role { font-size:10.5px;color:rgba(255,255,255,.42);display:block; }
.ig-rr-dots { display:flex;gap:6px;justify-content:center;margin-top:18px; }
.ig-rr-dot-btn { width:6px;height:6px;border-radius:50%;background:#A41034;border:none;cursor:pointer;padding:0;transition:all .3s; }
.ig-rr-dot-btn.active { width:20px;border-radius:4px;background:#A41034; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1199px){ .ig-reg-wrap{width:88%;} }
@media(max-width:991px){
    .ig-reg-wrap{width:92%;flex-direction:column;border-radius:18px;}
    .ig-reg-left{flex:none;max-width:100%;padding:36px 28px;}
    .ig-reg-right{display:none;}
}
@media(max-width:575px){
    .ig-reg-wrap{width:96%;border-radius:14px;}
    .ig-reg-left{padding:28px 18px;}
}

/* ── two_factor_login_digit_code ── */

/* ── Page background (identical to login/register) ── */
.ig-reg-page {
    min-height: calc(100vh - 82px);
    background: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    padding: 52px 0; position: relative; overflow: hidden;
}
.ig-reg-orb { position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none; }
.ig-reg-orb-1 { width:700px;height:700px;background:radial-gradient(circle,rgba(164,16,52,.18),transparent 65%);top:-250px;left:-200px; }
.ig-reg-orb-2 { width:550px;height:550px;background:radial-gradient(circle,rgba(37,99,235,.15),transparent 65%);bottom:-200px;right:-150px; }
.ig-reg-orb-3 { width:400px;height:400px;background:radial-gradient(circle,rgba(219,39,119,.10),transparent 65%);top:40%;left:55%; }
.ig-reg-dots-bg { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;pointer-events:none; }

/* ── Card shell ── */
.ig-reg-wrap {
    display: flex; width: 100%;   min-height: 580px;
    border-radius: 24px; overflow: hidden; position: relative; z-index: 2;
    box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 32px 80px rgba(0,0,0,.55), 0 8px 24px rgba(164,16,52,.15);
}
@media(max-width:1100px){ .ig-reg-wrap{ width:90%; } }
@media(max-width:900px) { .ig-reg-wrap{ width:96%; flex-direction:column; border-radius:18px; } }

/* ── LEFT: white form panel ── */
.ig-reg-left {
    flex: 0 0 50%; max-width: 50%;
    background: #fff; display: flex; flex-direction: column;
    justify-content: center; padding: 52px 56px; overflow-y: auto;
}
@media(max-width:900px){ .ig-reg-left{ flex:none;max-width:100%;padding:36px 28px; } }

/* Logo */
.ig-reg-logo { display:flex;align-items:center;gap:9px;text-decoration:none;margin-bottom:32px; }
.ig-reg-logo img { max-height:30px; }
.ig-reg-logo-text {
    font-size: var(--fs-lg);font-weight:800;letter-spacing:-.5px;
    background:#A41034;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Security badge */
.tfa-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg,rgba(164,16,52,.1),rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.2); border-radius: 100px;
    padding: 6px 16px; font-size: 11.5px; font-weight: 600; color: #A41034;
    margin-bottom: 20px; width: fit-content;
}
.tfa-badge i { color: #A41034; }

/* Shield icon */
.tfa-shield {
    width: 68px; height: 68px; border-radius: 20px;
    background: #A41034;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #fff;
    box-shadow: 0 8px 24px rgba(164,16,52,.35);
    margin-bottom: 22px;
}

.tfa-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.75rem; font-weight: 800; color: #0f0c29;
    line-height: 1.15; margin: 0 0 10px;
}
.tfa-sub { font-size: var(--fs-sm); color: #6b7280; margin: 0 0 8px; line-height: var(--lh-normal); }
.tfa-email {
    display: inline-flex; align-items: center; gap: 6px;
    background: #FDF5F6; border: 1px solid #F6D9DF;
    color: #7A0D27; font-size: var(--fs-sm); font-weight: 600;
    padding: 5px 12px; border-radius: 8px;
    margin-bottom: 28px;
}
.tfa-email i { font-size: var(--fs-xs); }

/* Errors */
.tfa-error {
    display: flex; align-items: center; gap: 8px;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
    padding: 10px 14px; color: #dc2626; font-size: var(--fs-sm); margin-bottom: 18px;
}

/* ── OTP digit boxes ── */
.tfa-otp-label {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #374151; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: space-between;
}
.tfa-otp-wrap {
    display: flex; gap: 10px; margin-bottom: 10px;
    justify-content: flex-start;
}
.tfa-digit {
    width: 52px; height: 58px; flex: 0 0 52px;
    border-radius: 12px;
    border: 2px solid #e5e7eb; background: #fafafa;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.55rem; font-weight: 800; color: #0f0c29;
    text-align: center; outline: none; caret-color: #A41034;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.tfa-digit:focus {
    border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.12);
    background: #fff;
}
.tfa-digit.filled { border-color: rgba(164,16,52,.4); background: #faf5ff; }
.tfa-digit.error-digit { border-color: #ef4444; background: #fff5f5; }

.tfa-digit-error {
    font-size: var(--fs-xs); color: #ef4444; font-weight: 500;
    min-height: 16px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 4px;
}

/* ── Role selection ── */
.tfa-role-label {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #374151; margin-bottom: 10px;
}
.tfa-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.tfa-role-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 16px; border-radius: 11px;
    font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
    border: 2px solid transparent; transition: all .25s;
}
.tfa-role-btn--student {
    background: #A41034;
    color: #fff; box-shadow: 0 5px 18px rgba(164,16,52,.35);
}
.tfa-role-btn--student:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(164,16,52,.45); }
.tfa-role-btn--instructor {
    background: #fff; color: #374151;
    border-color: #e5e7eb;
}
.tfa-role-btn--instructor:hover { border-color: #A41034; color: #A41034; background: rgba(164,16,52,.04); }

/* Footer links */
.tfa-links { display: flex; flex-direction: column; gap: 8px; }
.tfa-link-row { font-size: 12.5px; color: #9ca3af; text-align: center; }
.tfa-link-row a { color: #A41034; font-weight: 600; text-decoration: none; }
.tfa-link-row a:hover { text-decoration: underline; }

/* Timer */
.tfa-timer { font-size: var(--fs-xs); color: #9ca3af; }
.tfa-timer span { color: #A41034; font-weight: 700; }

/* ── RIGHT: dark animated branding (same as login) ── */
.ig-reg-right {
    flex: 1; position: relative; background: #1C1514; overflow: hidden;
    display: flex; align-items: center; justify-content: center; padding: 56px 44px;
}
@media(max-width:900px){ .ig-reg-right{ display:none; } }

.ig-rr-blob { position:absolute;border-radius:50%;filter:blur(80px);opacity:.52;animation:rrBlob 10s ease-in-out infinite alternate; }
.ig-rr-blob.p { width:480px;height:480px;background:radial-gradient(circle,#A41034,transparent 70%);top:-120px;left:-80px; }
.ig-rr-blob.b { width:380px;height:380px;background:radial-gradient(circle,#2563eb,transparent 70%);bottom:-80px;right:-60px;animation-duration:14s;animation-delay:-5s; }
.ig-rr-blob.k { width:280px;height:280px;background:radial-gradient(circle,#db2777,transparent 70%);top:45%;left:38%;animation-duration:12s;animation-delay:-3s; }
@keyframes rrBlob{ 0%{transform:translate(0,0) scale(1);}50%{transform:translate(18px,-14px) scale(1.05);}100%{transform:translate(-10px,18px) scale(.97);} }
.ig-rr-grid { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px;pointer-events:none; }
.ig-rr-shine { position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.5),transparent); }

.ig-rr-content { position:relative;z-index:1;text-align:center;max-width:380px;width:100%; }
.ig-rr-wordmark {
    font-family:"Plus Jakarta Sans", sans-serif;
    font-size:2.6rem;font-weight:900;letter-spacing:-2px;
    background:#A41034;
    background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:gShift 5s linear infinite;display:block;margin-bottom:6px;
}
@keyframes gShift{0%{background-position:0 center;}100%{background-position:200% center;}}
.ig-rr-sub { font-size: var(--fs-sm);color:rgba(255,255,255,.42);margin-bottom:32px;letter-spacing:.3px; }

/* Security features list */
.tfa-security-list { list-style:none;padding:0;margin:0;text-align:left; }
.tfa-security-list li {
    display:flex;align-items:center;gap:12px;
    padding:12px 14px;border-radius:12px;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);
    margin-bottom:10px;font-size: var(--fs-sm);color:rgba(255,255,255,.82);font-weight:500;
    transition:background .2s;
}
.tfa-security-list li:hover { background:rgba(164,16,52,.18); }
.tfa-sec-icon { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size: var(--fs-base);flex-shrink:0; }
.tfa-security-list li:nth-child(1) .tfa-sec-icon { background:rgba(164,16,52,.25);color:#FFFFFF; }
.tfa-security-list li:nth-child(2) .tfa-sec-icon { background:rgba(16,185,129,.25);color:#6ee7b7; }
.tfa-security-list li:nth-child(3) .tfa-sec-icon { background:rgba(6,182,212,.25);color:#67e8f9; }
.tfa-sec-text strong { color:#fff;display:block;margin-bottom:2px; }
.tfa-sec-text span { font-size:11.5px;color:rgba(255,255,255,.42); }

/* ── master ── */

/* ── Instructor page background ── */
.instructor-pg { background: #f5f4fa !important; min-height: 100vh; }

/* ══ INSTRUCTOR DASHBOARD PROFILE HEADER ══ */

/* 1. Cover photo banner */
.idb-cover {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center top;
    background-color: #1a1040;
    position: relative;
    overflow: hidden;
}
.idb-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(10,6,30,.5) 100%);
}

/* Gold top accent on cover */
.idb-cover::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #f59e0b 40%, #fbbf24 60%, transparent);
    z-index: 2;
}

/* Edit cover button */
.idb-cover-edit {
    position: absolute;
    bottom: 14px;
    right: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 9px;
    background: rgba(245,158,11,.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(245,158,11,.4);
    color: #fcd34d;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s;
    font-family:"Plus Jakarta Sans", sans-serif;
}
.idb-cover-edit:hover {
    background: rgba(245,158,11,.32);
    color: #fef08a;
    text-decoration: none;
}

/* 2. Profile strip */
.idb-profile-strip {
    background: #fff;
    border-bottom: 1px solid #eaecf4;
    padding: 0 0 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}
.idb-profile-left {
    display: flex;
    align-items: flex-end;
    gap: 18px;
}

/* 3. Large avatar — gold ring */
.idb-avatar-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    margin-top: -65px;
    flex-shrink: 0;
}
.idb-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(167,139,250,.55);
    box-shadow: 0 0 0 5px rgba(164,16,52,.2), 0 4px 20px rgba(0,0,0,.3);
    display: block;
    transition: box-shadow .2s, border-color .2s;
}
.idb-avatar:hover {
    border-color: rgba(167,139,250,.9);
    box-shadow: 0 0 0 5px rgba(164,16,52,.38), 0 6px 24px rgba(0,0,0,.35);
}
.idb-avatar-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff;
    border: 2px solid #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    box-shadow: 0 2px 8px rgba(245,158,11,.5);
    transition: opacity .2s;
}
.idb-avatar-btn:hover { opacity: .88; }

/* 4. Name & role */
.idb-profile-meta { padding-bottom: 8px; }
.idb-profile-name {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #1a1040;
    margin: 0 0 4px;
    line-height: var(--lh-tight);
}
.idb-profile-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 12px;
    border-radius: 100px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.3);
    color: #b45309;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* 5. Action buttons */
.idb-profile-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
}
.idb-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
    font-family:"Plus Jakarta Sans", sans-serif;
}
.idb-btn--gold {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(245,158,11,.4);
}
.idb-btn--gold:hover {
    background: linear-gradient(135deg, #b45309, #d97706);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245,158,11,.5);
    color: #fff !important;
}
.idb-btn--outline {
    background: transparent;
    color: #6b7280 !important;
    border: 1.5px solid #e5e7eb;
}
.idb-btn--outline:hover {
    background: #fffbf0;
    color: #b45309 !important;
    border-color: rgba(245,158,11,.4);
}

@media (max-width: 767px) {
    .idb-cover { height: 160px; }
    .idb-avatar-wrap { width: 100px; height: 100px; margin-top: -50px; }
    .idb-avatar { width: 100px; height: 100px; }
    .idb-profile-strip { flex-direction: column; align-items: flex-start; }
    .idb-profile-actions { flex-wrap: wrap; }
}

/* ── sidebar ── */

/* ══════════════════════════════════════
   INSTRUCTOR SIDEBAR — Navy + Gold
══════════════════════════════════════ */
.id-sidebar {
    background: #1C1514;
    border-radius: 18px;
    border: 1px solid rgba(37,99,235,.18);
    overflow: hidden;
    position: sticky;
    top: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(245,158,11,.1);
    scrollbar-width: thin;
    scrollbar-color: rgba(37,99,235,.3) transparent;
    font-family:"Plus Jakarta Sans", sans-serif;
    display: flex;
    flex-direction: column;
}
.id-sidebar::-webkit-scrollbar { width: 3px; }
.id-sidebar::-webkit-scrollbar-thumb { background: rgba(37,99,235,.35); border-radius:4px; }

/* ── Cover photo banner ── */
.id-sb-cover {
    position: relative; width: 100%; height: 76px;
    background-size: cover; background-position: center;
    background-color: #1a1040; overflow: hidden; flex-shrink: 0;
}
.id-sb-cover::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,6,30,.2) 0%, rgba(10,6,30,.65) 100%);
}
.id-sb-cover::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #A41034 40%, #FFFFFF 60%, transparent);
    z-index: 2;
}
.id-sb-cover-edit {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    width: 28px; height: 28px; border-radius: 7px;
    background: rgba(164,16,52,.25); backdrop-filter: blur(6px);
    border: 1px solid rgba(167,139,250,.4);
    color: #FFFFFF; font-size: .7rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none; transition: background .2s;
}
.id-sb-cover-edit:hover { background: rgba(164,16,52,.45); color: #fff; }

/* ── Profile block ── */
.id-sb-profile {
    padding: 0 18px 16px;
    border-bottom: 1px solid rgba(164,16,52,.15);
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 8px; position: relative;
}
.id-sb-avatar-wrap { position: relative; width: 68px; height: 68px; margin-top: -34px; flex-shrink: 0; }
.id-sb-avatar {
    width: 68px; height: 68px; border-radius: 50%; object-fit: cover;
    border: 2.5px solid rgba(167,139,250,.5);
    box-shadow: 0 0 0 4px rgba(164,16,52,.15), 0 4px 14px rgba(0,0,0,.25);
    display: block;
    transition: box-shadow .2s, border-color .2s;
}
.id-sb-avatar:hover {
    border-color: rgba(167,139,250,.8);
    box-shadow: 0 0 0 4px rgba(164,16,52,.3), 0 6px 18px rgba(0,0,0,.3);
}
.id-sb-avatar-badge {
    position: absolute; bottom: 1px; right: 1px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #10b981; border: 2px solid #1a1040;
}
.id-sb-avatar-cam {
    position: absolute; bottom: 0; right: -2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(164,16,52,.85); color: #fff; border: 2px solid #1a1040;
    display: flex; align-items: center; justify-content: center;
    font-size: .55rem; cursor: pointer;
    box-shadow: 0 2px 6px rgba(164,16,52,.4); transition: background .2s;
    backdrop-filter: blur(4px);
}
.id-sb-avatar-cam:hover { background: #A41034; }
.id-sb-name {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .95rem; font-weight: 800; color: #fff; margin: 0; line-height: var(--lh-tight);
}
.id-sb-meta { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.id-sb-role {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 100px;
    background: rgba(164,16,52,.18); border: 1px solid rgba(167,139,250,.35);
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #FFFFFF;
}
.id-sb-rating {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: var(--fs-xs); font-weight: 700; color: #fbbf24;
}

/* ── CTA button (Gold) ── */
.id-sb-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 14px 14px 0;
    padding: 10px 16px; border-radius: 10px;
    background: linear-gradient(135deg, #A41034, #A41034);
    color: #fff; font-size: .82rem; font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(164,16,52,.4);
    transition: opacity .2s, transform .2s;
    letter-spacing: .02em;
}
.id-sb-cta:hover { opacity: .9; transform: translateY(-1px); color: #fff; text-decoration: none; }

/* ── Student switch ── */
.id-sb-switch {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 8px 14px 0;
    padding: 8px 14px; border-radius: 9px;
    background: rgba(37,99,235,.1); border: 1px solid rgba(37,99,235,.22);
    color: rgba(147,197,253,.7); font-size: .76rem; font-weight: 600;
    text-decoration: none; transition: all .2s;
}
.id-sb-switch:hover { background: rgba(37,99,235,.2); color: #bfdbfe; text-decoration: none; }

/* ── Navigation ── */
.id-sb-nav { flex: 1; padding: 8px 10px 20px; }

.id-sb-section {
    font-size: .6rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(245,158,11,.4);
    padding: 14px 8px 5px;
    display: flex; align-items: center; gap: 8px;
}
.id-sb-section::after { content:''; flex:1; height:1px; background: rgba(245,158,11,.12); }

.id-sb-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }

.id-sb-link {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 10px;
    font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.5);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all .2s;
}
.id-sb-link:hover {
    background: linear-gradient(135deg, #A41034 0%, #3d0613 50%, #1a1a1a 100%); color: rgba(255,255,255,.9);
    text-decoration: none; padding-left: 14px;
}
.id-sb-link--active {
    background: #A41034 !important;
    color: #e9d5ff !important; font-weight: 700;
    border-left-color: #FFFFFF;
    padding-left: 13px !important;
}
.id-sb-link--active:hover { padding-left: 13px !important; }

/* ── Icon bubbles ── */
.id-sb-icon {
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size:1rem; flex-shrink: 0; transition: transform .2s;
}
.id-sb-link:hover .id-sb-icon { transform: scale(1.1); }
.id-sb-link--active .id-sb-icon { background: rgba(255,255,255,.15) !important; color: #fff !important; }

/* Navy + Gold icon palette */
.ic-dash      { background: rgba(37,99,235,.25);  color: #93c5fd; }
.ic-courses   { background: rgba(245,158,11,.2);  color: #fcd34d; }
.ic-qna       { background: rgba(6,182,212,.2);   color: #67e8f9; }
.ic-quiz      { background: rgba(245,158,11,.2);  color: #fcd34d; }
.ic-announce  { background: rgba(244,63,94,.2);   color: #fda4af; }
.ic-reviews   { background: rgba(245,158,11,.2);  color: #fcd34d; }
.ic-sells     { background: rgba(37,99,235,.22);  color: #93c5fd; }
.ic-payout    { background: rgba(16,185,129,.2);  color: #6ee7b7; }
.ic-zoom      { background: rgba(6,182,212,.2);   color: #67e8f9; }
.ic-jitsi     { background: rgba(37,99,235,.2);   color: #93c5fd; }
.ic-setting   { background: rgba(245,158,11,.15); color: #fcd34d; }
.ic-logout    { background: rgba(244,63,94,.18);  color: #fda4af; }

/* Logout */
.id-sb-logout {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 10px;
    font-size: .84rem; font-weight: 500; color: rgba(244,63,94,.65);
    text-decoration: none; cursor: pointer;
    border-left: 3px solid transparent;
    transition: all .2s;
}
.id-sb-logout:hover { background: rgba(244,63,94,.1); color: #fda4af; text-decoration: none; }

.id-sb-badge { margin-left:auto; background:#A41034; color:#fff; font-size:1rem; font-weight:700; line-height:1; padding:2px 6px; border-radius:20px; }

.id-sb-divider { height:1px; background: linear-gradient(90deg, transparent, rgba(37,99,235,.2), transparent); margin:4px 10px; }

/* ── Footer ── */
.id-sb-foot {
    padding: 12px 16px;
    border-top: 1px solid rgba(37,99,235,.15);
    font-size: 10px; color: rgba(255,255,255,.2); text-align: center;
}
.id-sb-foot a { color: rgba(245,158,11,.5); text-decoration: none; }

/* Responsive */
@media(max-width:991px){
    .id-sidebar { position:static; margin-bottom:24px; border-radius:14px; }
    .id-sb-nav ul { flex-direction:row; flex-wrap:wrap; gap:4px; }
    .id-sb-link { padding:7px 10px; font-size:.8rem; }
    .id-sb-section { display:none; }
    .id-sb-divider { display:none; }
}

/* ── sidebar ── */

/* ══════════════════════════════════════
   STUDENT SIDEBAR — Purple theme
══════════════════════════════════════ */
.student-sidebar {
    margin-top: 0;
    background: #1C1514;
    border-radius: 16px;
    overflow: hidden;
    position: sticky;
    top: calc(var(--header-h, 70px) + 16px);
    box-shadow:
        0 0 0 1px rgba(164,16,52,.18),
        0 8px 32px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(167,139,250,.08);
    font-family:"Plus Jakarta Sans", sans-serif;
}

/* ── Cover photo banner in sidebar ── */
.ss-cover {
    position: relative;
    width: 100%;
    height: 90px;
    background-size: cover;
    background-position: center;
    background-color: #6B0E29;
    overflow: hidden;
    flex-shrink: 0;
}
.ss-cover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,6,30,.2) 0%, rgba(10,6,30,.6) 100%);
}
.ss-cover-edit {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 28px; height: 28px; border-radius: 7px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff; font-size: .7rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none;
    transition: background .2s;
}
.ss-cover-edit:hover { background: rgba(255,255,255,.32); color: #fff; }

/* ── Profile block ── */
.ss-profile {
    padding: 0 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
}
.ss-avatar-wrap {
    position: relative; width: 80px; height: 80px;
    margin-top: -40px; flex-shrink: 0;
}
.ss-avatar {
    width: 80px; height: 80px; border-radius: 50%;
    object-fit: cover;
    border: 3px solid #1a1040;
   box-shadow: 0 0 0 3px rgba(227, 227, 225, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
    display: block;
}
.ss-avatar-dot {
    position: absolute; bottom: 2px; right: 2px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #10b981; border: 2px solid #1a1040;
}
.ss-avatar-cam {
    position: absolute; bottom: 0; right: 0;
    width: 26px; height: 26px; border-radius: 50%;
    background: #A41034; color: #fff;
    border: 2px solid #1a1040;
    display: flex; align-items: center; justify-content: center;
    font-size: .62rem; cursor: pointer;
    box-shadow: 0 2px 6px rgba(164,16,52,.5);
    transition: background .2s;
}
.ss-avatar-cam:hover { background: #A41034; }
.ss-name {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .95rem; font-weight: 800; color: #fff;
    line-height: var(--lh-tight); margin: 0;
}
.ss-email {
    font-size: .72rem; color: rgba(255,255,255,.38);
    margin: 0; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 100%;
}

/* ── If instructor: switch button ── */
.ss-switch {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 12px 16px 0;
    padding: 8px 14px; border-radius: 9px;
    background: #A41034; border: 1px solid #A41034;
    color: #fff; font-size: .76rem; font-weight: 600;
    text-decoration: none; transition: all .2s;
}
.ss-switch:hover { background: #A41034; color: #fff; text-decoration: none; }

/* ── Nav body ── */
.ss-nav { padding: 8px 10px 16px; }

.ss-section {
    font-size: .6rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.22);
    padding: 14px 8px 5px;
    display: flex; align-items: center; gap: 8px;
}
.ss-section::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.07); }

.ss-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }

.ss-nav ul li a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 10px;
    font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.55);
    text-decoration: none; transition: all .2s;
    border-left: 3px solid transparent;
}
.ss-nav ul li a:hover {
   background: linear-gradient(135deg, #A41034 0%, #3d0613 50%, #1a1a1a 100%);
    color: rgba(255, 255, 255, 0.9); 
    text-decoration: none;
    padding-left: 14px;
}
.ss-nav ul li.active a {
    background: #A41034; color: #e9d5ff; font-weight: 700;
    border-left-color: #FFFFFF;
    padding-left: 13px;
}

/* ── Colored icon bubbles ── */
.ss-icon {
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size:1rem; flex-shrink: 0;
    transition: transform .2s;
}
.ss-nav ul li a:hover .ss-icon { transform: scale(1.1); }

/* Per-item icon colors */
.ic-dashboard  { background: rgba(164,16,52,.25); color: #FFFFFF; }
.ic-courses    { background: rgba(164,16,52,.22); color: #FFFFFF; }
.ic-klips      { background: rgba(6,182,212,.22);  color: #67e8f9; }
.ic-shorts     { background: rgba(244,63,94,.22);  color: #fda4af; }
.ic-certs      { background: rgba(16,185,129,.22); color: #6ee7b7; }
.ic-quiz       { background: rgba(245,158,11,.22); color: #fcd34d; }
.ic-wishlist   { background: rgba(244,63,94,.22);  color: #fda4af; }
.ic-favourites { background: rgba(245,158,11,.22); color: #fcd34d; }
.ic-reviews    { background: rgba(249,115,22,.22); color: #fdba74; }
.ic-orders     { background: rgba(37,99,235,.22);  color: #93c5fd; }
.ic-settings   { background: rgba(167,139,250,.18);color: #FFFFFF; }
.ic-logout     { background: rgba(244,63,94,.18);  color: #fda4af; }

/* Active icon: match border color */
.ss-nav ul li.active a .ss-icon {
    background: rgba(255,255,255,.15); color: #fff;
}

/* Logout special */
.ss-nav ul li.ss-logout a { color: rgba(244,63,94,.75); }
.ss-nav ul li.ss-logout a:hover { background: rgba(244,63,94,.12); color: #fda4af; }

.ss-badge { margin-left:auto; background:#A41034; color:#fff; font-size:1rem; font-weight:700; line-height:1; padding:2px 6px; border-radius:20px; }

.ss-divider { height:1px; background:rgba(255,255,255,.07); margin:4px 10px; }

/* ── Mobile ── */
@media(max-width:991px){
    .student-sidebar { position:static; margin-bottom:24px; border-radius:14px; }
    .ss-nav ul { flex-direction:row; flex-wrap:wrap; gap:4px; }
    .ss-nav ul li a { padding:7px 10px; font-size:.8rem; }
    .ss-section { display:none; }
    .ss-divider { display:none; }
}
@media(max-width:575px){
    .ss-profile { padding:14px; }
    .ss-icon { width:26px; height:26px; font-size:.7rem; }
}

/* ── index ── */
/* ── Google Fonts ── */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
    --bg:         transparent;
    --card:       #ffffff;
    --card-alt:   #f8f9fc;
    --border:     #e4e7f0;
    --purple:     #A41034;
    --purple-l:   #FFFFFF;
    --cyan:       #06b6d4;
    --gold:       #f59e0b;
    --rose:       #f43f5e;
    --emerald:    #10b981;
    --orange:     #f97316;
    --text:       #111827;
    --text-sub:   #6b7280;
    --text-muted: #9ca3af;
    --radius:     16px;
    --radius-sm:  10px;
}

/* ── Base ─────────────────────────────────────────────────── */
.id { font-family:"Plus Jakarta Sans", sans-serif; padding-bottom: 60px; }
.id * { box-sizing: border-box; }

/* ── HERO ────────────────────────────────────────────────── */
.id-hero {
    background: #A41034;
    border-radius: var(--radius);
    border: none;
    padding: 36px 40px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 12px 48px rgba(164,16,52,.22), 0 4px 16px rgba(0,0,0,.12);
}
.id-hero::before,
.id-hero::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.id-hero::before {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(164,16,52,.45) 0%, transparent 65%);
    top: -140px; right: 60px;
}
.id-hero::after {
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(6,182,212,.28) 0%, transparent 65%);
    bottom: -90px; left: 180px;
}
.id-hero__grid {
    position: absolute; inset: 0;
   
    background-size: 40px 40px; pointer-events: none;
}
.id-hero__left { position: relative; z-index: 1; }
.id-hero__greeting {
    font-size: .7rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #FFFFFF; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.id-hero__greeting::before {
    content: ''; width: 18px; height: 2px;
    background: #A41034; border-radius: 2px; display: inline-block;
}
.id-hero__name {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2.4rem; font-weight: 800;
    color: #fff; line-height: 1.15; margin-bottom: 10px; letter-spacing: -.02em;
}
 
.id-hero__sub { font-size: .9rem; color: rgba(255,255,255,.72); max-width: 400px; line-height: var(--lh-normal); }
.id-hero__right {
    position: relative; z-index: 1; flex-shrink: 0;
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end;
}
.id-hero__badge {
    background: #1C1514;
    border: 1px solid #1C1514;
    backdrop-filter: blur(16px); border-radius: var(--radius-sm);
    padding: 18px 24px; text-align: center; min-width: 120px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.id-hero__badge-val {
    display: block; font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 5px;
}
.id-hero__badge-lbl {
    font-size: .68rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: #FFFFFF;
}

/* ── STAT CARDS ──────────────────────────────────────────── */
.id-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width:991px) { .id-stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width:575px) { .id-stats { grid-template-columns: 1fr; } }

.id-stat {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    border-left: 5px solid;
    padding: 22px 22px 22px 20px;
    position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: 16px;
    transition: transform .25s, box-shadow .25s;
    cursor: default;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 6px 24px rgba(0,0,0,.22);
}
.id-stat:hover { transform: translateY(-3px); }

.id-stat--courses  { border-left-color: #A41034; }
.id-stat--klips    { border-left-color: #06b6d4; }
.id-stat--earning  { border-left-color: #10b981; }
.id-stat--year     { border-left-color: #f59e0b; }
.id-stat--wishlist { border-left-color: #f43f5e; }
.id-stat--reviews  { border-left-color: #f97316; }

.id-stat--courses:hover  { box-shadow: 0 8px 28px rgba(164,16,52,.14); }
.id-stat--klips:hover    { box-shadow: 0 8px 28px rgba(6,182,212,.14); }
.id-stat--earning:hover  { box-shadow: 0 8px 28px rgba(16,185,129,.14); }
.id-stat--year:hover     { box-shadow: 0 8px 28px rgba(245,158,11,.14); }
.id-stat--wishlist:hover { box-shadow: 0 8px 28px rgba(244,63,94,.14); }
.id-stat--reviews:hover  { box-shadow: 0 8px 28px rgba(249,115,22,.14); }

.id-stat__icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
}
.id-stat--courses  .id-stat__icon { background: rgba(164,16,52,.1); color: #A41034; }
.id-stat--klips    .id-stat__icon { background: rgba(6,182,212,.1);  color: #06b6d4; }
.id-stat--earning  .id-stat__icon { background: rgba(16,185,129,.1); color: #10b981; }
.id-stat--year     .id-stat__icon { background: rgba(245,158,11,.1); color: #d97706; }
.id-stat--wishlist .id-stat__icon { background: rgba(244,63,94,.1);  color: #f43f5e; }
.id-stat--reviews  .id-stat__icon { background: rgba(249,115,22,.1); color: #f97316; }

.id-stat__body { flex: 1; min-width: 0; }
.id-stat__val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2rem; font-weight: 800;
    color: var(--text); display: block; line-height: 1; margin-bottom: 5px;
}
.id-stat__lbl {
    font-size: .72rem; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-muted);
}

/* ── SECTION LABEL ────────────────────────────────────────── */
.id-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
}
.id-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

/* ── QUICK LINKS ──────────────────────────────────────────── */
.id-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
@media (max-width:767px) { .id-links { grid-template-columns: repeat(2,1fr); } }

.id-link {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 16px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 13px;
    text-align: center; text-decoration: none;
    position: relative; overflow: hidden;
    transition: all .25s;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 6px 24px rgba(0,0,0,.22);
}
.id-link::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    border-radius: 0 0 var(--radius) var(--radius);
    transform: scaleX(0);
    transition: transform .28s;
}
.id-link:hover { transform: translateY(-3px); border-color: transparent; }
.id-link:hover::after { transform: scaleX(1); }

.id-link--courses:hover  { box-shadow: 0 10px 30px rgba(164,16,52,.13); }
.id-link--klips:hover    { box-shadow: 0 10px 30px rgba(6,182,212,.13); }
.id-link--earnings:hover { box-shadow: 0 10px 30px rgba(16,185,129,.13); }
.id-link--quiz:hover     { box-shadow: 0 10px 30px rgba(245,158,11,.13); }
.id-link--sells:hover    { box-shadow: 0 10px 30px rgba(249,115,22,.13); }
.id-link--payout:hover   { box-shadow: 0 10px 30px rgba(244,63,94,.13); }
.id-link--reviews:hover  { box-shadow: 0 10px 30px rgba(245,158,11,.13); }
.id-link--profile:hover  { box-shadow: 0 10px 30px rgba(164,16,52,.13); }

.id-link--courses::after  { background: #A41034; }
.id-link--klips::after    { background: #06b6d4; }
.id-link--earnings::after { background: #10b981; }
.id-link--quiz::after     { background: #f59e0b; }
.id-link--sells::after    { background: #f97316; }
.id-link--payout::after   { background: #f43f5e; }
.id-link--reviews::after  { background: #f59e0b; }
.id-link--profile::after  { background: #A41034; }

.id-link__icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; position: relative; z-index: 1;
    transition: transform .25s;
}
.id-link:hover .id-link__icon { transform: scale(1.1); }

.id-link--courses  .id-link__icon { background: rgba(164,16,52,.1); color: #A41034; }
.id-link--klips    .id-link__icon { background: rgba(6,182,212,.1);  color: #06b6d4; }
.id-link--earnings .id-link__icon { background: rgba(16,185,129,.1); color: #10b981; }
.id-link--quiz     .id-link__icon { background: rgba(245,158,11,.1); color: #d97706; }
.id-link--sells    .id-link__icon { background: rgba(249,115,22,.1); color: #f97316; }
.id-link--payout   .id-link__icon { background: rgba(244,63,94,.1);  color: #f43f5e; }
.id-link--reviews  .id-link__icon { background: rgba(245,158,11,.1); color: #d97706; }
.id-link--profile  .id-link__icon { background: rgba(164,16,52,.08);color: #A41034; }

.id-link__lbl {
    font-size: .8rem; font-weight: 600; color: var(--text-sub);
    line-height: var(--lh-snug); position: relative; z-index: 1;
    transition: color .25s;
}
.id-link:hover .id-link__lbl { color: var(--text); }

/* ── TABLE CARD ──────────────────────────────────────────── */
.id-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 6px 24px rgba(0,0,0,.22);
}
.id-card__head {
    padding: 18px 28px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--card-alt);
}
.id-card__head-left { display: flex; align-items: center; gap: 10px; }
.id-card__head-icon { color: var(--purple); font-size: .9rem; display: flex; align-items: center; }
.id-card__head-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 700; color: var(--text); margin: 0;
}
.id-card__head-sub { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.id-card__link {
    font-size: .78rem; font-weight: 600; color: var(--purple);
    text-decoration: none; display: flex; align-items: center; gap: 4px;
    transition: opacity .2s;
}
.id-card__link:hover { opacity: .75; }

.id-table { width: 100%; border-collapse: collapse; }
.id-table thead th {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--text-muted);
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--card-alt);
    white-space: nowrap;
}
.id-table tbody td {
    padding: 14px 24px; font-size: .85rem; color: var(--text-sub);
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle; transition: background .15s;
}
.id-table tbody tr:last-child td { border-bottom: none; }
.id-table tbody tr:hover td { background: #FDF5F6; color: var(--text); }

.id-invoice { font-weight: 700; color: var(--purple); font-size: .85rem; }
.id-course-name { font-size: .85rem; font-weight: 600; color: var(--text); }
.id-amount  { font-weight: 700; color: var(--text); }
.id-currency { font-size: .72rem; color: var(--text-muted); margin-left: 3px; }

.id-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; font-weight: 700; padding: 4px 10px;
    border-radius: 20px; line-height: var(--lh-normal); white-space: nowrap;
    letter-spacing: .03em;
}
.id-badge--success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.id-badge--warn    { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.id-badge--danger  { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }
.id-badge--info    { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }

.id-view-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size:1rem; font-weight: 600; color: var(--purple);
    text-decoration: none; padding: 5px 12px;
    border: 1px solid rgba(164,16,52,.25);
    border-radius: 8px; background: rgba(164,16,52,.04);
    transition: all .2s;
}
.id-view-btn:hover { background: rgba(164,16,52,.1); border-color: var(--purple); }

.id-empty { padding: 50px 24px; text-align: center; }
.id-empty__icon {
    width: 60px; height: 60px; border-radius: 16px;
    background: rgba(164,16,52,.08); color: var(--purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin: 0 auto 16px;
}
.id-empty__text { color: var(--text-muted); font-size: .875rem; }

/* ── index ── */
/* ── Google Fonts ── */

/* ── Section override ── */
 
.dashboard__top-wrap .instructor__cover-bg {
    border-radius: 18px; overflow: hidden;
    margin-bottom: 24px;
}

/* ── Tokens ──────────────────────────────────────────────── */
:root {
    --bg:         transparent;
    --card:       #ffffff;
    --card-alt:   #f8f9fc;
    --border:     #e4e7f0;
    --purple:     #A41034;
    --purple-l:   #FFFFFF;
    --cyan:       #06b6d4;
    --gold:       #f59e0b;
    --rose:       #f43f5e;
    --emerald:    #10b981;
    --orange:     #f97316;
    --text:       #111827;
    --text-sub:   #6b7280;
    --text-muted: #9ca3af;
    --radius:     16px;
    --radius-sm:  10px;
}

/* ── Base ─────────────────────────────────────────────────── */
.sd { font-family:"Plus Jakarta Sans", sans-serif; padding-bottom: 60px; margin-top: 10px;}
.sd * { box-sizing: border-box; }

/* ── Alerts ───────────────────────────────────────────────── */
.sd-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px; border-radius: 12px; margin-bottom: 20px;
    font-size: .85rem; line-height: 1.55; border-left: 4px solid;
}
.sd-alert--warn  { background: #fffbeb; border-color: var(--gold);  color: #92400e; }
.sd-alert--error { background: #fff1f2; border-color: var(--rose);  color: #9f1239; }

/* ── HERO — keep dark, floats on white page ───────────────── */
.sd-hero {
    background: #A41034;
    border-radius: var(--radius);
    border: none;
    padding: 36px 40px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 12px 48px #A41034, 0 4px 16px #A41034;
}
.sd-hero::before,
.sd-hero::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.sd-hero::before {
    width: 400px; height: 400px;
    background: #A41034;
    top: -140px; right: 60px;
}
.sd-hero::after {
    width: 260px; height: 260px;
    background: #A41034;
    bottom: -90px; left: 180px;
}
.sd-hero__grid {
    position: absolute; inset: 0;
    background-image:
        #A41034,
        #A41034;
    background-size: 40px 40px; pointer-events: none;
}
.sd-hero__left { position: relative; z-index: 1; }
.sd-hero__greeting {
    font-size: .7rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #FFFFFF; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.sd-hero__greeting::before {
    content: ''; width: 18px; height: 2px;
    background: #A41034; border-radius: 2px; display: inline-block;
}
.sd-hero__name {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2.4rem; font-weight: 800;
    color: #fff; line-height: 1.15; margin-bottom: 10px; letter-spacing: -.02em;
}
.sd-hero__name span {
    background: #A41034;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sd-hero__sub { font-size: .9rem; color: #A41034; max-width: 400px; line-height: var(--lh-normal); }
.sd-hero__right {
    position: relative; z-index: 1; flex-shrink: 0;
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end;
}
.sd-hero__badge {
    background: #A41034;
    border: 1px solid #A41034;
    backdrop-filter: blur(16px); border-radius: var(--radius-sm);
    padding: 18px 24px; text-align: center; min-width: 120px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.sd-hero__badge-val {
    display: block; font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 5px;
}
.sd-hero__badge-lbl {
    font-size: .68rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: #FFFFFF;
}

/* ── STAT CARDS — white with colored left stripe ──────────── */
.sd-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width:991px) { .sd-stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width:575px) { .sd-stats { grid-template-columns: 1fr; } }

.sd-stat {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    border-left: 5px solid;
    padding: 22px 22px 22px 20px;
    position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: 16px;
    transition: transform .25s, box-shadow .25s;
    cursor: default;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 6px 24px rgba(0,0,0,.22);
}
.sd-stat:hover { transform: translateY(-3px); }

.sd-stat--courses { border-left-color: #A41034; }
.sd-stat--klips   { border-left-color: #06b6d4; }
.sd-stat--quiz    { border-left-color: #f59e0b; }
.sd-stat--reviews { border-left-color: #f43f5e; }
.sd-stat--credit  { border-left-color: #10b981; }
.sd-stat--streak  { border-left-color: #f97316; }

.sd-stat--courses:hover { box-shadow: 0 8px 28px rgba(164,16,52,.14); }
.sd-stat--klips:hover   { box-shadow: 0 8px 28px rgba(6,182,212,.14); }
.sd-stat--quiz:hover    { box-shadow: 0 8px 28px rgba(245,158,11,.14); }
.sd-stat--reviews:hover { box-shadow: 0 8px 28px rgba(244,63,94,.14); }
.sd-stat--credit:hover  { box-shadow: 0 8px 28px rgba(16,185,129,.14); }
.sd-stat--streak:hover  { box-shadow: 0 8px 28px rgba(249,115,22,.14); }

/* no ::before needed — border-left is the stripe */
.sd-stat::before { display: none; }

.sd-stat__glow { display: none; }

.sd-stat__icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
}
.sd-stat--courses  .sd-stat__icon { background: rgba(164,16,52,.1); color: #A41034; }
.sd-stat--klips    .sd-stat__icon { background: rgba(6,182,212,.1);  color: #06b6d4; }
.sd-stat--quiz     .sd-stat__icon { background: rgba(245,158,11,.1); color: #d97706; }
.sd-stat--reviews  .sd-stat__icon { background: rgba(244,63,94,.1);  color: #f43f5e; }
.sd-stat--credit   .sd-stat__icon { background: rgba(16,185,129,.1); color: #10b981; }
.sd-stat--streak   .sd-stat__icon { background: rgba(249,115,22,.1); color: #f97316; }

.sd-stat__body { flex: 1; min-width: 0; }
.sd-stat__val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2rem; font-weight: 800;
    color: var(--text); display: block; line-height: 1; margin-bottom: 5px;
}
.sd-stat__lbl {
    font-size: .72rem; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-muted);
}

/* ── SECTION LABEL ────────────────────────────────────────── */
.sd-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
}
.sd-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

/* ── QUICK LINKS ──────────────────────────────────────────── */
.sd-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
@media (max-width:767px) { .sd-links { grid-template-columns: repeat(2,1fr); } }

.sd-link {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 16px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 13px;
    text-align: center; text-decoration: none;
    position: relative; overflow: hidden;
    transition: all .25s;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 6px 24px rgba(0,0,0,.22);
}
/* colored bottom bar that slides up on hover */
.sd-link::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    border-radius: 0 0 var(--radius) var(--radius);
    transform: scaleX(0);
    transition: transform .28s;
}
.sd-link:hover { transform: translateY(-3px); border-color: transparent; }
.sd-link:hover::after { transform: scaleX(1); }

.sd-link--enrolled:hover { box-shadow: 0 10px 30px rgba(164,16,52,.13); }
.sd-link--klips:hover    { box-shadow: 0 10px 30px rgba(6,182,212,.13); }
.sd-link--wishlist:hover { box-shadow: 0 10px 30px rgba(244,63,94,.13); }
.sd-link--quiz:hover     { box-shadow: 0 10px 30px rgba(245,158,11,.13); }
.sd-link--certs:hover    { box-shadow: 0 10px 30px rgba(16,185,129,.13); }
.sd-link--orders:hover   { box-shadow: 0 10px 30px rgba(249,115,22,.13); }
.sd-link--profile:hover  { box-shadow: 0 10px 30px rgba(164,16,52,.13); }
.sd-link--shorts:hover   { box-shadow: 0 10px 30px rgba(6,182,212,.13); }

.sd-link--enrolled::after  { background: #A41034; }
.sd-link--klips::after     { background: #06b6d4; }
.sd-link--wishlist::after  { background: #f43f5e; }
.sd-link--quiz::after      { background: #f59e0b; }
.sd-link--certs::after     { background: #10b981; }
.sd-link--orders::after    { background: #f97316; }
.sd-link--profile::after   { background: #A41034; }
.sd-link--shorts::after    { background: #06b6d4; }

.sd-link__icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; position: relative; z-index: 1;
    transition: transform .25s;
}
.sd-link:hover .sd-link__icon { transform: scale(1.1); }

.sd-link--enrolled  .sd-link__icon { background: rgba(164,16,52,.1); color: #A41034; }
.sd-link--klips     .sd-link__icon { background: rgba(6,182,212,.1);  color: #06b6d4; }
.sd-link--wishlist  .sd-link__icon { background: rgba(244,63,94,.1);  color: #f43f5e; }
.sd-link--quiz      .sd-link__icon { background: rgba(245,158,11,.1); color: #d97706; }
.sd-link--certs     .sd-link__icon { background: rgba(16,185,129,.1); color: #10b981; }
.sd-link--orders    .sd-link__icon { background: rgba(249,115,22,.1); color: #f97316; }
.sd-link--profile   .sd-link__icon { background: rgba(164,16,52,.08);color: #A41034; }
.sd-link--shorts    .sd-link__icon { background: rgba(6,182,212,.08); color: #06b6d4; }

.sd-link__lbl {
    font-size: .8rem; font-weight: 600; color: var(--text-sub);
    line-height: var(--lh-snug); position: relative; z-index: 1;
    transition: color .25s;
}
.sd-link:hover .sd-link__lbl { color: var(--text); }

/* ── ORDERS CARD ──────────────────────────────────────────── */
.sd-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 6px 24px rgba(0,0,0,.22);
}
.sd-card__head {
    padding: 18px 28px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--card-alt);
}
.sd-card__title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 700; color: var(--text);
    display: flex; align-items: center; gap: 10px;
}
.sd-card__title i { color: var(--purple); font-size: .9rem; }
.sd-card__link {
    font-size: .78rem; font-weight: 600; color: var(--purple);
    text-decoration: none; display: flex; align-items: center; gap: 4px;
    transition: opacity .2s;
}
.sd-card__link:hover { opacity: .75; }

.sd-table { width: 100%; border-collapse: collapse; }
.sd-table thead th {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--text-muted);
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--card-alt);
    white-space: nowrap;
}
.sd-table tbody td {
    padding: 14px 24px; font-size: .85rem; color: var(--text-sub);
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle; transition: background .15s;
}
.sd-table tbody tr:last-child td { border-bottom: none; }
.sd-table tbody tr:hover td { background: #FDF5F6; color: var(--text); }

.sd-invoice { font-weight: 700; color: var(--purple); font-size: .85rem; }
.sd-amount  { font-weight: 700; color: var(--text); }
.sd-currency { font-size: .72rem; color: var(--text-muted); margin-left: 3px; }
.sd-gateway  { text-transform: capitalize; color: var(--text-sub); }

.sd-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; font-weight: 700; padding: 4px 10px;
    border-radius: 20px; line-height: var(--lh-normal); white-space: nowrap;
    letter-spacing: .03em;
}
.sd-badge--success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.sd-badge--warn    { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.sd-badge--danger  { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }
.sd-badge--info    { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }

.sd-view-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size:1rem; font-weight: 600; color: var(--purple);
    text-decoration: none; padding: 5px 12px;
    border: 1px solid rgba(164,16,52,.25);
    border-radius: 8px; background: rgba(164,16,52,.04);
    transition: all .2s;
}
.sd-view-btn:hover { background: rgba(164,16,52,.1); border-color: var(--purple); }

.sd-empty { padding: 50px 24px; text-align: center; }
.sd-empty__icon {
    width: 60px; height: 60px; border-radius: 16px;
    background: rgba(164,16,52,.08); color: var(--purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin: 0 auto 16px;
}
.sd-empty__text { color: var(--text-muted); font-size: .875rem; }

/* ── index ── */

/* ═══════════════════════════════════════════
   INSTRUCTOR SETTINGS — light white card
   (same structure as student, navy+gold theme)
════════════════════════════════════════════ */
.settings-page-wrapper { padding: 0; font-family:"Plus Jakarta Sans", sans-serif; }

/* ── Page header ── */
.settings-page-header {
    background: linear-gradient(135deg, #111827 0%, #1e3a8a 50%, #2563eb 100%);
    border-radius: 16px; padding: 28px 32px; margin-bottom: 28px;
    display: flex; align-items: center; gap: 16px;
    box-shadow: 0 8px 32px rgba(37,99,235,.35);
}
.settings-page-header .header-icon {
    width: 52px; height: 52px;
    background: rgba(255,255,255,.18);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xl); color: #fff; flex-shrink: 0;
}
.settings-page-header h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #fff; margin: 0; font-size: var(--fs-xl); font-weight: 800;
}
.settings-page-header p { color: rgba(255,255,255,.75); margin: 0; font-size: var(--fs-sm); }

/* ── Main card — white, same as student ── */
.settings-card {
   background-color: #FDFBF8 !important;
    background: #F5F1EA !important;
    box-shadow: 0 2px 20px rgba(10,6,24,.12);
    overflow: hidden; display: flex; min-height: 600px;
}

/* ── Sidebar nav — light bg, navy/gold active ── */
.settings-sidebar {
    width: 240px; flex-shrink: 0;
   background-color: #FDFBF8 !important;
    background: #F5F1EA !important;
     border-right: 1px solid #ede9f5;
    padding: 24px 16px; display: flex; flex-direction: column; gap: 4px;
}
.settings-sidebar .nav-item { width: 100%; }
.settings-sidebar .nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 10px;
    color: #6d6c80; font-weight: 500; font-size: var(--fs-sm);
    border: none; background: transparent; width: 100%;
    text-align: left; transition: all .2s; position: relative;
}
.settings-sidebar .nav-link .nav-icon {
    width: 34px; height: 34px; border-radius: 8px;
    background: #ede9f5; display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); color: #1e1240; flex-shrink: 0; transition: all .2s;
}
.settings-sidebar .nav-link:hover { color: #1e1240; background: #ede9f5; }
.settings-sidebar .nav-link.active {
    color: #1e1240; font-weight: 600;
    background: linear-gradient(
    135deg,
    #f7e7eb 0%,
    #fdf7f8 100%
);
}
.settings-sidebar .nav-link.active .nav-icon {
    background: #111827; color: #A41034;
    box-shadow: 0 4px 12px rgba(30,18,64,.35);
}
.settings-sidebar .nav-link.active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 28px;
   background: linear-gradient(
    135deg,
    #f7e7eb 0%,
    #fdf7f8 100%
);
    border-radius: 0 2px 2px 0;
}

/* ── Content area ── */
.settings-content { flex: 1; padding: 32px; overflow: hidden; }

/* ── Section title ── */
.settings-section-title {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 28px; padding-bottom: 16px;
    border-bottom: 2px solid #f0ecff;
}
.settings-section-title .section-icon {
    width: 40px; height: 40px;
   background: #1C1514;
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    color: #fcd34d; font-size: var(--fs-md);
    box-shadow: 0 4px 12px rgba(30,18,64,.3);
}
.settings-section-title h5 { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: #1e1240; font-family: "Plus Jakarta Sans", sans-serif; }
.settings-section-title p  { margin: 0; font-size: var(--fs-xs); color: #6d6c80; }

/* ── Form fields ── */
.instructor__profile-form-wrap { padding: 0 !important; background: transparent !important; }
.instructor__profile-form       { padding: 0 !important; background: transparent !important; }

.instructor__profile-form .form-grp,
.settings-form .form-grp { margin-bottom: 20px; }

.instructor__profile-form .form-grp label,
.settings-form .form-grp label {
    display: block; font-size: var(--fs-sm); font-weight: 600;
    color: #1e1240; margin-bottom: 7px; letter-spacing: .01em;
}
.instructor__profile-form .form-grp label code,
.settings-form .form-grp label code { color: #d97706; background: none; padding: 0; }

.instructor__profile-form .form-grp input:not([type="file"]),
.instructor__profile-form .form-grp select,
.instructor__profile-form .form-grp textarea,
.settings-form .form-grp input:not([type="file"]),
.settings-form .form-grp select,
.settings-form .form-grp textarea {
    width: 100%; height: 46px; padding: 10px 16px;
    border: 1.5px solid #e2dff0; border-radius: 10px;
    font-size: var(--fs-sm); color: #1e1240; background: #faf9ff;
    transition: all .2s; outline: none; display: block;
}
.instructor__profile-form .form-grp input:focus,
.instructor__profile-form .form-grp select:focus,
.instructor__profile-form .form-grp textarea:focus,
.settings-form .form-grp input:focus,
.settings-form .form-grp select:focus,
.settings-form .form-grp textarea:focus {
    border-color: #f59e0b; background: #fff;
    box-shadow: 0 0 0 3px rgba(245,158,11,.12);
}
.instructor__profile-form .form-grp textarea,
.settings-form .form-grp textarea { height: 110px; resize: vertical; }
.instructor__profile-form .form-grp input[type="file"] {
    height: auto; padding: 8px 12px; background: #fff;
}

/* ── Submit buttons ── */
.instructor__profile-form .submit-btn,
.settings-form .submit-btn {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 28px; padding-top: 20px;
    border-top: 1px solid #f0ecff;
}
.instructor__profile-form .submit-btn .btn,
.settings-form .submit-btn .btn {
    background: #A41034 !important;
    color: #fff !important; border: none !important; padding: 11px 28px;
    border-radius: 10px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 14px rgba(30,18,64,.3) !important; transition: all .25s;
}
.instructor__profile-form .submit-btn .btn:hover,
.settings-form .submit-btn .btn:hover {
    background: #A41034 !important;
    box-shadow: 0 6px 20px rgba(37,99,235,.4) !important; transform: translateY(-1px);
}
.instructor__profile-form .submit-btn .btn-two,
.settings-form .submit-btn .btn-two {
    background: transparent !important; color: #e11b24 !important;
    border: 1.5px solid #e11b24 !important; box-shadow: none !important;
}
.instructor__profile-form .submit-btn .btn-two:hover,
.settings-form .submit-btn .btn-two:hover {
    background: #e11b24 !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(225,27,36,.3) !important;
}

/* ── Education/Experience tables ── */
.settings-content .dashboard__content-title {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 2px solid #f0ecff;
}
.settings-content .dashboard__content-title .title {
    font-size: 1rem; font-weight: 700; color: #1e1240; margin: 0;
}
.settings-content .dashboard__review-table table thead th {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #6d6c80;
    border-bottom: 2px solid #f3f4f6; background: #fafafa; padding: 10px 16px;
}
.settings-content .dashboard__review-table table tbody td {
    font-size: .875rem; color: #374151; padding: 12px 16px;
    border-bottom: 1px solid #f9fafb; vertical-align: middle;
}
.settings-content .dashboard__review-table table tbody tr:hover td { background: #faf7ff; }
.settings-content .dashboard__review-action { display: flex; align-items: center; gap: 8px; }
.settings-content .dashboard__review-action a {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; text-decoration: none; transition: all .2s;
}
.settings-content .dashboard__review-action a:first-child {
    background: rgba(37,99,235,.08); border: 1.5px solid rgba(37,99,235,.2); color: #2563eb;
}
.settings-content .dashboard__review-action a:first-child:hover {
    background: rgba(37,99,235,.16); border-color: #2563eb;
}
.settings-content .dashboard__review-action a:last-child {
    background: rgba(239,68,68,.07); border: 1.5px solid rgba(239,68,68,.2); color: #dc2626;
}
.settings-content .dashboard__review-action a:last-child:hover {
    background: rgba(239,68,68,.15); border-color: #dc2626;
}
.settings-content .instructor__profile-form-wrap { margin-bottom: 28px; }

/* Add Exp/Edu buttons */
.settings-content .btn-primary,
.settings-content .btn.btn-primary,
.settings-content .btn-hight-basic {
    background: #A41034 !important;
    border-color: #A41034 !important; color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(164,16,52,.28) !important;
    border-radius: 10px !important; font-weight: 600 !important;
    padding: 9px 20px !important; transition: all .2s !important;
}
.settings-content .btn-primary:hover,
.settings-content .btn.btn-primary:hover,
.settings-content .btn-hight-basic:hover {
    background: #A41034 !important;
    box-shadow: 0 6px 18px rgba(37,99,235,.4) !important;
    transform: translateY(-1px) !important;
}

/* ── Signature ── */
.instructor__profile-form img { border: 2px solid #e2dff0; border-radius: 8px; margin-top: 8px; }
.instructor__profile-form a.delete_signature {
    display: inline-block; margin-top: 6px; font-size: var(--fs-xs);
    color: #ef4444; text-decoration: underline; cursor: pointer;
}

/* ── Social icons ── */
.social-input-wrap { position: relative; }
.social-input-wrap .social-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); color: #fff; z-index: 1;
}
.social-input-wrap .social-icon.facebook { background: #1877f2; }
.social-input-wrap .social-icon.twitter  { background: #1da1f2; }
.social-input-wrap .social-icon.linkedin { background: #0a66c2; }
.social-input-wrap .social-icon.website  { background: #1e1240; }
.social-input-wrap .social-icon.github   { background: #24292e; }
.social-input-wrap input { padding-left: 46px !important; }

/* ── Modal — white ── */
.modal .modal-content { border-radius: 16px !important;   }
.modal .modal-header { border-bottom: 1px solid #f0ecff !important; }
.modal .modal-header .modal-title { font-weight: 700; color: #1e1240; font-size: 1.05rem; }
.modal .modal-footer { border-top: 1px solid #f0ecff !important; }
.modal .btn-close { box-shadow: none !important; transform: none !important; }
.modal .instructor__profile-form .form-grp input,
.modal .instructor__profile-form .form-grp textarea,
.modal .instructor__profile-form .form-grp select {
    border: 1.5px solid #e2dff0 !important; border-radius: 10px !important;
    padding: 10px 14px !important; font-size: var(--fs-sm) !important;
    background: #faf9ff !important; transition: all .2s !important; color: #1e1240 !important;
}
.modal .instructor__profile-form .form-grp input:focus,
.modal .instructor__profile-form .form-grp textarea:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important;
    background: #fff !important;
}
.modal .btn, .modal .btn-primary {
    background: #A41034 !important;
    border-color: #A41034 !important; color: #FFFFFF !important;
    border-radius: 10px !important; font-weight: 600 !important;
    padding: 9px 24px !important;
    box-shadow: 0 4px 12px rgba(164,16,52,.28) !important; transition: all .2s !important;
}
.modal .btn:hover, .modal .btn-primary:hover {
    background: #A41034 !important;
    box-shadow: 0 6px 18px rgba(37,99,235,.4) !important; transform: translateY(-1px) !important;
}
.modal .btn-close { background: none !important; box-shadow: none !important; transform: none !important; }

/* ── Responsive ── */
@media(max-width: 768px) {
    .settings-card { flex-direction: column; }
    .settings-sidebar {
        width: 100%; flex-direction: row; overflow-x: auto; padding: 12px;
        border-right: none; border-bottom: 1px solid #ede9f5;
        gap: 6px; scrollbar-width: none;
    }
    .settings-sidebar::-webkit-scrollbar { display: none; }
    .settings-sidebar .nav-item { flex-shrink: 0; }
    .settings-sidebar .nav-link { padding: 8px 14px; white-space: nowrap; border-radius: 8px; }
    .settings-sidebar .nav-link .nav-label { display: none; }
    .settings-content { padding: 20px; }
    .settings-page-header { padding: 20px; }
}
@media(max-width: 480px) {
    .settings-sidebar .nav-link .nav-label { display: block; font-size: var(--fs-xs); }
}

/* ── index ── */
/* ===== Settings Page Styles ===== */
.settings-page-wrapper {
    padding: 0;
}
.settings-page-header {
    background: #1C1514; 
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(94, 43, 255, 0.25);
}
.settings-page-header .header-icon {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.18);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    color: #fff;
    flex-shrink: 0;
}
.settings-page-header h4 {
    color: #fff;
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 700;
    font-family: var(--tg-heading-font-family);
}
.settings-page-header p {
    color: rgba(255,255,255,0.75);
    margin: 0;
    font-size: var(--fs-sm);
}

/* ===== Settings Card ===== */
.settings-card {
    background-color: #FDFBF8 !important;
    background: #F5F1EA !important;
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(94, 43, 255, 0.07);
    overflow: hidden;
    display: flex;
    min-height: 600px;
}

/* ===== Settings Sidebar Nav ===== */
.settings-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #faf9ff;
    border-right: 1px solid #ede9ff;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.settings-sidebar .nav-item {
    width: 100%;
}
.settings-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #6d6c80;
    font-weight: 500;
    font-size: var(--fs-sm);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: all 0.2s ease;
    position: relative;
}
.settings-sidebar .nav-link .nav-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f0ecff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    color: #A41034;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.settings-sidebar .nav-link:hover {
    color: #111827;
   background: linear-gradient(
    135deg,
    #f7e7eb 0%,
    #fdf7f8 100%
);
}
.settings-sidebar .nav-link.active {
    color: #111827;
   
    font-weight: 600;
}
.settings-sidebar .nav-link.active .nav-icon {
    background: #111827;
    color: #fff;
    box-shadow: 0 4px 12px rgba(94, 43, 255, 0.35);
}
.settings-sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 28px;
    background: linear-gradient(
    135deg,
    #f7e7eb 0%,
    #fdf7f8 100%
);
    border-radius: 0 2px 2px 0;
}

/* ===== Settings Content ===== */
.settings-content {
    flex: 1;
    padding: 32px;
    overflow: hidden;
}
.settings-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0ecff;
}
.settings-section-title .section-icon {
    width: 40px;
    height: 40px;
    background: #1C1514;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--fs-md);
    box-shadow: 0 4px 12px rgba(94, 43, 255, 0.3);
}
.settings-section-title h5 {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #2B0510;
    font-family: var(--tg-heading-font-family);
}
.settings-section-title p {
    margin: 0;
    font-size: var(--fs-xs);
    color: #6d6c80;
}

/* ===== Form Styling Overrides ===== */
.settings-form .form-grp {
    margin-bottom: 20px;
}
.settings-form .form-grp label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #2B0510;
    margin-bottom: 7px;
    letter-spacing: 0.01em;
}
.settings-form .form-grp label code {
    color: #111827;
    background: none;
    padding: 0;
    font-size: inherit;
}
.settings-form .form-grp input:not([type="file"]),
.settings-form .form-grp select,
.settings-form .form-grp textarea {
    width: 100%;
    height: 46px;
    padding: 10px 16px;
    border: 1.5px solid #e2e2f0;
    border-radius: 10px;
    font-size: var(--fs-sm);
    color: #2B0510;
     
    transition: all 0.2s ease;
    outline: none;
    font-family: var(--tg-body-font-family);
    -webkit-appearance: none;
    appearance: none;
}
.settings-form .form-grp input:focus,
.settings-form .form-grp select:focus,
.settings-form .form-grp textarea:focus {
    border-color: #111827;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(94, 43, 255, 0.1);
}
.settings-form .form-grp textarea {
    height: 110px;
    resize: vertical;
}
.settings-form .form-grp select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235E2BFF' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

/* Submit / action buttons */
.settings-form .submit-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #f0ecff;
}
.settings-form .submit-btn .btn {
    background: linear-gradient(135deg, #111827 0%, #1C1514 100%);
    color: #fff;
    border: none;
    padding: 11px 28px;
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(94, 43, 255, 0.35);
    font-family: var(--tg-body-font-family);
}
.settings-form .submit-btn .btn:hover {
    background: linear-gradient(135deg, #4a1fe6 0%, #6840f0 100%);
    box-shadow: 0 6px 20px rgba(94, 43, 255, 0.45);
    transform: translateY(-1px);
    color: #fff;
}
.settings-form .submit-btn .btn-two {
    background: transparent;
    color: #e11b24;
    border: 1.5px solid #e11b24;
    box-shadow: none;
}
.settings-form .submit-btn .btn-two:hover {
    background: #e11b24;
    color: #fff;
    box-shadow: 0 4px 12px rgba(225, 27, 36, 0.3);
}

/* Row spacing */
.settings-form .row > [class*="col-"] {
    margin-bottom: 0;
}

/* Social input groups */
.social-input-wrap {
    position: relative;
}
.social-input-wrap .social-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    color: #fff;
    z-index: 1;
}
.social-input-wrap .social-icon.facebook { background: #1877f2; }
.social-input-wrap .social-icon.twitter  { background: #1da1f2; }
.social-input-wrap .social-icon.linkedin { background: #0a66c2; }
.social-input-wrap .social-icon.website  { background: #111827; }
.social-input-wrap .social-icon.github   { background: #24292e; }
.social-input-wrap input {
    padding-left: 46px !important;
}

/* Password strength indicator (cosmetic) */
.password-tips {
   
    border: 1px solid #ede9ff;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}
.password-tips h6 {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #2B0510;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.password-tips ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.password-tips ul li {
    font-size: var(--fs-xs);
    color: #6d6c80;
    display: flex;
    align-items: center;
    gap: 7px;
}
.password-tips ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #111827;
    flex-shrink: 0;
}

/* Mobile / Responsive */
@media (max-width: 768px) {
    .settings-card {
        flex-direction: column;
    }
    .settings-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 12px;
        border-right: none;
        border-bottom: 1px solid #ede9ff;
        gap: 6px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .settings-sidebar::-webkit-scrollbar { display: none; }
    .settings-sidebar .nav-item { flex-shrink: 0; }
    .settings-sidebar .nav-link {
        padding: 8px 14px;
        white-space: nowrap;
        border-radius: 8px;
    }
    .settings-sidebar .nav-link .nav-label { display: none; }
    .settings-sidebar .nav-link.active::after { display: none; }
    .settings-content { padding: 20px; }
    .settings-page-header { padding: 20px; }
}
@media (max-width: 480px) {
    .settings-sidebar .nav-link .nav-label { display: block; font-size: var(--fs-xs); }
}

/* ── course ── */
/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.ig-cr-hero {
    position: relative;
    background: linear-gradient(145deg, #1a0508 0%, #1C1514 60%, #1a0508 100%);
    padding: 44px 0 36px;
    overflow: hidden;
}
.ig-cr-hero::after {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 28px 28px; pointer-events: none;
}
.ig-cr-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.ig-cr-orb-1 { width:460px; height:460px; background:radial-gradient(circle,rgba(164,16,52,.28),transparent 65%); top:-160px; left:-80px; }
.ig-cr-orb-2 { width:340px; height:340px; background:radial-gradient(circle,rgba(164,16,52,.14),transparent 65%); bottom:-120px; right:-60px; }
.ig-cr-shine { position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(164,16,52,.55) 35%,rgba(164,16,52,.25) 65%,transparent); }
.ig-cr-inner { position: relative; z-index: 2; }

.ig-cr-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(164,16,52,.18); border:1px solid rgba(164,16,52,.38); border-radius:100px; padding:5px 14px; font-size: var(--fs-xs); font-weight:600; color:#FFFFFF; letter-spacing:.4px; margin-bottom:14px; }
.ig-cr-title { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:900; color:#fff; line-height:1.15; margin-bottom:8px; letter-spacing:-1px; }
.ig-cr-title span { background:#FFFFFF; background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:crGrad 6s linear infinite; }
@keyframes crGrad { 0%{background-position:0 center;} 100%{background-position:200% center;} }
.ig-cr-sub { font-size: var(--fs-sm); color:rgba(255,255,255,.52); margin-bottom:22px; line-height: var(--lh-normal); max-width:520px; }
.ig-cr-stats { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.ig-cr-stat { display:flex; align-items:center; gap:8px; }
.ig-cr-stat-val { font-size:1.3rem; font-weight:800; background:linear-gradient(90deg,#FFFFFF,#A41034); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.ig-cr-stat-lbl { font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,.40); }
.ig-cr-stat-div { width:1px; height:28px; background:rgba(255,255,255,.12); }

/* ═══════════════════════════════════════════
   SEARCH BAR
═══════════════════════════════════════════ */
.ig-cr-search-bar { background:#fff; border-bottom:1px solid #e5e7eb; padding:14px 0; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.ig-cr-search-form { display:flex; align-items:center; gap:0; background:#fafaf9; border:1.5px solid #FFFFFF; border-radius:12px; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.ig-cr-search-form:focus-within { border-color:#A41034; box-shadow:0 0 0 3px rgba(164,16,52,.08); }
.ig-cr-search-icon { padding:0 14px; color:#9ca3af; font-size: var(--fs-base); flex-shrink:0; }
.ig-cr-search-input { flex:1; padding:11px 0; border:none; background:transparent; font-size: var(--fs-sm); color:#111827; outline:none; }
.ig-cr-search-input::placeholder { color:#9ca3af; }
.ig-cr-search-btn { padding:10px 20px; background:#A41034; color:#fff; border:none; font-size: var(--fs-sm); font-weight:600; cursor:pointer; transition:opacity .2s; white-space:nowrap; }
.ig-cr-search-btn:hover { opacity:.9; }

/* ═══════════════════════════════════════════
   PAGE BODY
═══════════════════════════════════════════ */
.ig-cr-body {  padding:32px 0 64px; }

/* ═══════════════════════════════════════════
   SIDEBAR FILTERS
═══════════════════════════════════════════ */
.ig-cr-sidebar { position: sticky; top: 80px; }
.ig-cr-filter-card {  border-radius:16px; box-shadow:0 2px 16px rgba(0,0,0,.06); overflow:hidden; }
.ig-cr-filter-header { padding:16px 20px; border-bottom:1px solid #f3f4f6; display:flex; align-items:center; justify-content:space-between; }
.ig-cr-filter-title { font-size: var(--fs-sm); font-weight:700; color:#1C1514; display:flex; align-items:center; gap:8px; }
.ig-cr-filter-title i { color:#A41034; font-size: var(--fs-sm); }
.ig-cr-clear-all { font-size: var(--fs-xs); color:#A41034; font-weight:600; cursor:pointer; text-decoration:none; background:none; border:none; padding:0; }
.ig-cr-clear-all:hover { text-decoration:underline; color:#A41034; }

.ig-cr-widget { padding:18px 20px; border-bottom:1px solid #f0eced; }
.ig-cr-widget:last-child { border-bottom:none; }
.ig-cr-widget-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ig-cr-widget-label { font-size: var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.9px; color:#6b7280; }
.ig-cr-clear-btn { font-size: var(--fs-xs); color:#A41034; cursor:pointer; font-weight:600; background:none; border:none; padding:0; display:none; }
.ig-cr-clear-btn:hover { text-decoration:underline; }

/* custom checkboxes & radios */
.ig-cr-check { display:flex; align-items:center; gap:10px; padding:4px 0; cursor:pointer; }
.ig-cr-check input[type=checkbox],
.ig-cr-check input[type=radio] { display:none; }
.ig-cr-check-box {
    width:17px; height:17px; border-radius:5px;
    border:1.5px solid #d1d5db; background:#fff;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all .15s;
}
.ig-cr-check input:checked ~ .ig-cr-check-box { background:#A41034; border-color:#A41034; }
.ig-cr-check input:checked ~ .ig-cr-check-box::after { content:'✓'; color:#fff; font-size:10px; font-weight:700; line-height:1; }

.ig-cr-radio-dot {
    width:17px; height:17px; border-radius:50%;
    border:1.5px solid #d1d5db; background:#fff;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all .15s;
}
.ig-cr-check input:checked ~ .ig-cr-radio-dot { border-color:#A41034; }
.ig-cr-check input:checked ~ .ig-cr-radio-dot::after { content:''; width:8px; height:8px; border-radius:50%; background:#A41034; display:block; }

.ig-cr-check-label { font-size: var(--fs-sm); color:#374151; line-height:1; transition:color .15s; }
.ig-cr-check:hover .ig-cr-check-label { color:#A41034; }
.ig-cr-check input:checked ~ .ig-cr-check-label { color:#A41034; font-weight:600; }

/* star rating filter */
.ig-cr-stars { display:flex; align-items:center; gap:3px; }
.ig-cr-stars i { color:#f59e0b; font-size: var(--fs-xs); }
.ig-cr-stars i.empty { color:#e5e7eb; }
.ig-cr-rating-text { font-size: var(--fs-xs); color:#6b7280; margin-left:4px; }

/* sub-category section */
.sub-category-holder .ig-cr-widget { border-top:1px solid #f0eced; }

/* ═══════════════════════════════════════════
   MAIN CONTENT AREA
═══════════════════════════════════════════ */
.ig-cr-topbar {
    background:#fff; border-radius:12px; padding:14px 20px;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:12px; margin-bottom:20px;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.ig-cr-count { font-size: var(--fs-sm); color:#6b7280; }
.ig-cr-count strong { color:#1C1514; font-weight:700; }
.ig-cr-sort { display:flex; align-items:center; gap:10px; }
.ig-cr-sort-label { font-size: var(--fs-sm); color:#6b7280; font-weight:500; white-space:nowrap; }
.ig-cr-sort select.orderby {
    padding:8px 14px; border:1.5px solid #e5e7eb; border-radius:9px;
    font-size: var(--fs-sm); color:#374151; background:#fff; outline:none;
    cursor:pointer; transition:border-color .2s;
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A41034' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center;
    padding-right:30px; min-width:170px;
}
.ig-cr-sort select.orderby:focus { border-color:#A41034; box-shadow:0 0 0 3px rgba(164,16,52,.08); }

/* preloader */
.preloader-two { display:flex; align-items:center; justify-content:center; padding:60px 0; }
.preloader-two .loader-icon-two img { width:48px; height:48px; animation:spin 1s linear infinite; }
@keyframes spin { 100%{ transform:rotate(360deg); } }

/* empty state */
.ig-cr-empty { text-align:center; padding:60px 20px; }
.ig-cr-empty-icon { width:72px; height:72px; border-radius:50%; background:rgba(164,16,52,.08); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size: var(--fs-3xl); color:#A41034; }
.ig-cr-empty h5 { font-size:1.1rem; font-weight:700; color:#1C1514; margin-bottom:6px; }
.ig-cr-empty p { font-size: var(--fs-sm); color:#6b7280; }

/* ═══════════════════════════════════════════
   COURSE CARD
═══════════════════════════════════════════ */
.ig-course-card {
    background:#fff; border-radius:16px; overflow:hidden;
    box-shadow:0 2px 14px rgba(0,0,0,.07); height:100%;
    display:flex; flex-direction:column;
    transition:transform .22s, box-shadow .22s;
    border:1px solid rgba(164,16,52,.06);
}
.ig-course-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.12); }

.ig-cc-thumb { position:relative; overflow:hidden; aspect-ratio:16/9; flex-shrink:0; }
.ig-cc-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.ig-course-card:hover .ig-cc-thumb img { transform:scale(1.04); }
.ig-cc-overlay {
    position:absolute; inset:0; background:rgba(10,6,40,.55);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .25s;
}
.ig-course-card:hover .ig-cc-overlay { opacity:1; }
.ig-cc-view-btn { display:flex; align-items:center; gap:8px; padding:10px 20px; background:#fff; color:#A41034; border-radius:100px; font-size: var(--fs-sm); font-weight:700; text-decoration:none; transition:background .2s; }
.ig-cc-view-btn:hover { background:#FBEEF0; color:#A41034; text-decoration:none; }

.ig-cc-badge-row { position:absolute; top:10px; left:10px; display:flex; gap:6px; }
.ig-cc-badge { padding:3px 9px; border-radius:6px; font-size:10.5px; font-weight:700; letter-spacing:.3px; }
.ig-cc-badge.free    { background:#dcfce7; color:#166534; }
.ig-cc-badge.paid    { background:#FBEEF0; color:#A41034; }
.ig-cc-badge.cert    { background:#fef3c7; color:#92400e; }
.ig-cc-badge.new     { background:linear-gradient(135deg,#A41034,#2563eb); color:#fff; }

.ig-cc-body { padding:16px 18px; flex:1; display:flex; flex-direction:column; }
.ig-cc-cat { font-size: var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.7px; color:#A41034; margin-bottom:6px; }
.ig-cc-title { font-size: var(--fs-sm); font-weight:700; color:#0f0c29; line-height: var(--lh-snug); margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ig-cc-title a { color:inherit; text-decoration:none; }
.ig-cc-title a:hover { color:#A41034; }

.ig-cc-meta { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.ig-cc-rating { display:flex; align-items:center; gap:4px; font-size: var(--fs-xs); font-weight:700; color:#f59e0b; }
.ig-cc-rating span { color:#6b7280; font-weight:400; }
.ig-cc-dur { display:flex; align-items:center; gap:4px; font-size: var(--fs-xs); color:#9ca3af; }
.ig-cc-dur i { font-size: var(--fs-xs); }
.ig-cc-level { display:flex; align-items:center; gap:4px; font-size: var(--fs-xs); color:#9ca3af; }
.ig-cc-level i { font-size:10px; color:#FFFFFF; }

.ig-cc-instructor { display:flex; align-items:center; gap:7px; margin-bottom:12px; }
.ig-cc-inst-avatar { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#A41034,#2563eb); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; flex-shrink:0; }
.ig-cc-inst-name { font-size:12.5px; color:#6b7280; }
.ig-cc-inst-name a { color:inherit; text-decoration:none; }
.ig-cc-inst-name a:hover { color:#A41034; }

.ig-cc-footer { margin-top:auto; padding-top:12px; border-top:1px solid #f3f4f6; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ig-cc-price-wrap { display:flex; align-items:baseline; gap:6px; }
.ig-cc-price { font-size:1.15rem; font-weight:800; color:#0f0c29; }
.ig-cc-price.free { color:#16a34a; }
.ig-cc-price-orig { font-size: var(--fs-xs); color:#9ca3af; text-decoration:line-through; }

.ig-cc-cart-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; background:linear-gradient(135deg,#A41034,#2563eb);
    color:#fff; border-radius:8px; font-size:12.5px; font-weight:600;
    cursor:pointer; border:none; text-decoration:none;
    transition:opacity .2s, transform .2s; white-space:nowrap;
}
.ig-cc-cart-btn:hover { opacity:.88; transform:translateY(-1px); color:#fff; text-decoration:none; }
.ig-cc-enrolled-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; background:#dcfce7; color:#166534;
    border-radius:8px; font-size:12.5px; font-weight:600;
    text-decoration:none; white-space:nowrap;
}
.ig-cc-enrolled-btn:hover { background:#bbf7d0; color:#166534; text-decoration:none; }
.ig-cc-booked-btn {
    padding:8px 14px; background:#f3f4f6; color:#9ca3af;
    border-radius:8px; font-size:12.5px; font-weight:600; white-space:nowrap;
}

/* ═══════════════════════════════════════════
   ENROLL COUNT + INSTRUCTOR IMG
═══════════════════════════════════════════ */
.ig-cc-enroll-count { font-size: var(--fs-xs); color:#9ca3af; display:flex; align-items:center; gap:5px; margin-bottom:8px; }
.ig-cc-enroll-count i { font-size: var(--fs-xs); color:#FFFFFF; }
.ig-cc-inst-img { width:24px; height:24px; border-radius:50%; object-fit:cover; flex-shrink:0; }

/* ═══════════════════════════════════════════
   SOCIAL SHARE ON CARD
═══════════════════════════════════════════ */
.ig-cc-share-wrap { position:absolute; top:10px; right:10px; z-index:5; }
.ig-cc-share-btn {
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.92); border:none;
    display:flex; align-items:center; justify-content:center;
    font-size: var(--fs-sm); color:#374151; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    transition:background .18s, color .18s;
    backdrop-filter:blur(6px);
}
.ig-cc-share-btn:hover { background:#fff; color:#A41034; }
.ig-cc-share-dropdown {
    position:absolute; top:38px; right:0;
    background:#fff; border-radius:12px;
    box-shadow:0 8px 28px rgba(0,0,0,.18);
    padding:8px;
    display:flex; flex-direction:column; gap:4px;
    opacity:0; visibility:hidden; transform:translateY(-6px) scale(.96);
    transition:all .18s; z-index:20; min-width:42px; align-items:center;
    border:1px solid #f0ebff;
}
.ig-cc-share-wrap:hover .ig-cc-share-dropdown,
.ig-cc-share-wrap.open .ig-cc-share-dropdown { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.ig-cc-share-link {
    width:32px; height:32px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size: var(--fs-sm); text-decoration:none; border:none;
    cursor:pointer; transition:all .15s;
}
.ig-share-fb { background:#e8f0fe; color:#1877f2; }  .ig-share-fb:hover  { background:#1877f2; color:#fff; }
.ig-share-tw { background:#e8f5fe; color:#000; }     .ig-share-tw:hover  { background:#000; color:#fff; }
.ig-share-li { background:#e8f0fe; color:#0a66c2; }  .ig-share-li:hover  { background:#0a66c2; color:#fff; }
.ig-share-wa { background:#e8fde8; color:#25d366; }  .ig-share-wa:hover  { background:#25d366; color:#fff; }
.ig-share-copy { background:#f9f9f9; color:#374151; } .ig-share-copy:hover { background:#A41034; color:#fff; }

/* ═══════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════ */
.pagination-wrap { margin-top:32px; }
.pagination { display:flex; align-items:center; justify-content:center; gap:6px; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.pagination .page-item .page-link {
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:9px;
    background:#fff; border:1.5px solid #e5e7eb;
    color:#374151; font-size: var(--fs-sm); font-weight:600;
    text-decoration:none; transition:all .15s;
}
.pagination .page-item.active .page-link { background:linear-gradient(135deg,#A41034,#2563eb); border-color:transparent; color:#fff; }
.pagination .page-item .page-link:hover:not(.active) { border-color:#A41034; color:#A41034; }
.pagination .page-item.disabled .page-link,.pagination .page-item.disabled span { background:#f9fafb; color:#d1d5db; cursor:not-allowed; }
.pagination .disabled span { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; border:1.5px solid #e5e7eb; font-size: var(--fs-sm); color:#d1d5db; }
.pagination .page-dots span { border:none; background:none; color:#9ca3af; }

@media(max-width:991px) {
    .ig-cr-sidebar { position:static; margin-bottom:20px; }
    .ig-cr-filter-card { max-height:none; }
}
@media(max-width:575px) {
    .ig-cr-hero { padding:32px 0 28px; }
    .ig-cr-topbar { flex-direction:column; align-items:flex-start; }
}

/* ── blog ── */
/* ================================================================
   BLOG LISTING PAGE  (bpl-*)
================================================================ */

/* ── Hero ──────────────────────────────────────────────────────── */
.bpl-hero {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 55%, #1a1040 100%);
    padding: 64px 0 56px;
    position: relative;
    overflow: hidden;
}
.bpl-hero::before {
    content: '';
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    top: -120px; left: -80px;
    background: radial-gradient(circle, rgba(164,16,52,.5) 0%, transparent 68%);
    pointer-events: none;
}
.bpl-hero::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    bottom: -80px; right: 5%;
    background: radial-gradient(circle, rgba(37,99,235,.4) 0%, transparent 68%);
    pointer-events: none;
}
.bpl-hero__inner { position: relative; z-index: 2; text-align: center; }

.bpl-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(255,255,255,.5);
    margin-bottom: 20px;
}
.bpl-breadcrumb a { color: #FFFFFF; text-decoration: none; transition: color .2s; }
.bpl-breadcrumb a:hover { color: #fff; }
.bpl-breadcrumb i { font-size: 9px; }

.bpl-hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.15;
}
.bpl-hero__title span {
    background: linear-gradient(90deg, #FFFFFF, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bpl-hero__sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,.55);
    max-width: 540px;
    margin: 0 auto 32px;
    line-height: var(--lh-normal);
}

/* Search bar */
.bpl-hero__search {
    max-width: 580px;
    margin: 0 auto 32px;
    display: flex;
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.18);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: border-color .2s, box-shadow .2s;
}
.bpl-hero__search:focus-within {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(164,16,52,.2);
}
.bpl-hero__search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 14px 20px;
    font-size: var(--fs-base);
    color: #fff;
    font-family: var(--tg-body-font-family);
}
.bpl-hero__search input::placeholder { color: rgba(255,255,255,.4); }
.bpl-hero__search button {
    flex-shrink: 0;
    background: var(--tg-theme-primary);
    border: none;
    color: #fff;
    padding: 0 24px;
    font-size: var(--fs-base);
    cursor: pointer;
    transition: background .2s;
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}
.bpl-hero__search button:hover { background: #A41034; }

/* Category filter pills */
.bpl-hero__cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.bpl-hero__cat {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1.5px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(4px);
}
.bpl-hero__cat:hover,
.bpl-hero__cat.active {
    background: var(--tg-theme-primary);
    border-color: var(--tg-theme-primary);
    color: #fff;
    text-decoration: none;
}

/* ── Page body ─────────────────────────────────────────────────── */
.bpl-body {
    background: #f4f5f7;
    padding: 44px 0 72px;
}

/* ── Active filter bar ─────────────────────────────────────────── */
.bpl-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #FBEEF0;
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 24px;
    font-size: var(--fs-sm);
    color: #6b7280;
    box-shadow: 0 2px 8px rgba(164,16,52,.06);
}
.bpl-filter-bar strong { color: #7A0D27; }
.bpl-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: #A41034;
    border: 1.5px solid #F6D9DF;
    border-radius: 20px;
    padding: 4px 12px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.bpl-filter-clear:hover { background: #A41034; color: #fff; border-color: transparent; text-decoration: none; }

/* ── Featured post ─────────────────────────────────────────────── */
.bpl-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    margin-bottom: 32px;
    text-decoration: none;
    transition: box-shadow .28s, transform .28s;
}
.bpl-featured:hover {
    box-shadow: 0 12px 40px rgba(164,16,52,.16);
    transform: translateY(-4px);
    text-decoration: none;
}
.bpl-featured__media {
    position: relative;
    overflow: hidden;
    min-height: 300px;
}
.bpl-featured__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.bpl-featured:hover .bpl-featured__media img { transform: scale(1.04); }
.bpl-featured__badge {
    position: absolute;
    top: 16px; left: 16px;
    background: linear-gradient(90deg, #A41034, #2563eb);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 5px 13px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.bpl-featured__cat-badge {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: background .2s;
}
.bpl-featured__body {
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
}
.bpl-featured__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    color: #9ca3af;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.bpl-featured__meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.bpl-featured__meta-item i { color: #A41034; font-size: var(--fs-xs); }
.bpl-featured__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
    line-height: var(--lh-snug);
    margin: 0 0 14px;
}
.bpl-featured__excerpt {
    font-size: var(--fs-sm);
    color: #6b7280;
    line-height: var(--lh-relaxed);
    margin: 0 0 22px;
    flex: 1;
}
.bpl-featured__author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.bpl-featured__author-img {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0ebff;
}
.bpl-featured__author-name { font-size: var(--fs-sm); font-weight: 600; color: #374151; }
.bpl-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tg-theme-primary);
    color: #fff;
    border-radius: 10px;
    padding: 11px 22px;
    font-size: var(--fs-sm);
    font-weight: 600;
    align-self: flex-start;
    transition: background .2s, transform .15s;
}
.bpl-featured:hover .bpl-featured__cta { background: #A41034; transform: translateX(3px); }

@media (max-width: 767px) {
    .bpl-featured { grid-template-columns: 1fr; }
    .bpl-featured__media { min-height: 220px; }
    .bpl-featured__body { padding: 22px 20px; }
    .bpl-featured__title { font-size: 1.2rem; }
}

/* ── Blog Grid ─────────────────────────────────────────────────── */
.bpl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 36px;
}
@media (max-width: 1199px) { .bpl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .bpl-grid { grid-template-columns: 1fr; } }

/* ── Blog Card ─────────────────────────────────────────────────── */
.bpl-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    transition: box-shadow .26s, transform .26s;
    text-decoration: none;
}
.bpl-card:hover {
    box-shadow: 0 12px 36px rgba(164,16,52,.13);
    transform: translateY(-5px);
    text-decoration: none;
}
.bpl-card__media {
    position: relative;
    height: 190px;
    overflow: hidden;
    flex-shrink: 0;
}
.bpl-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.bpl-card:hover .bpl-card__media img { transform: scale(1.07); }
.bpl-card__cat {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--tg-theme-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 11px;
    border-radius: 20px;
    text-decoration: none;
    transition: opacity .2s;
    z-index: 1;
}
.bpl-card__cat:hover { opacity: .85; }
.bpl-card__readtime {
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(5px);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bpl-card__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.bpl-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    color: #9ca3af;
    margin-bottom: 10px;
}
.bpl-card__meta i { color: #FFFFFF; }
.bpl-card__title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: #111827;
    line-height: 1.45;
    margin: 0 0 10px;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bpl-card:hover .bpl-card__title { color: #A41034; }
.bpl-card__excerpt {
    font-size: var(--fs-sm);
    color: #6b7280;
    line-height: var(--lh-normal);
    margin: 0 0 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bpl-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f3f4f6;
}
.bpl-card__author {
    display: flex;
    align-items: center;
    gap: 7px;
}
.bpl-card__author-img {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0ebff;
}
.bpl-card__author-name {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #4b5563;
}
.bpl-card__cta {
    font-size: 12.5px;
    font-weight: 700;
    color: #A41034;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap .2s;
}
.bpl-card:hover .bpl-card__cta { gap: 9px; }

/* ── Empty state ───────────────────────────────────────────────── */
.bpl-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 24px;
    color: #9ca3af;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.bpl-empty__icon {
    font-size: 3rem;
    color: #FFFFFF;
    margin-bottom: 16px;
    display: block;
}
.bpl-empty__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #374151;
    margin: 0 0 6px;
}
.bpl-empty__sub { font-size: var(--fs-sm); margin: 0 0 20px; }
.bpl-empty__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #A41034;
    color: #fff;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.bpl-empty__link:hover { background: #A41034; text-decoration: none; color: #fff; }

/* ── Sidebar ───────────────────────────────────────────────────── */
.bpl-sidebar {
    position: sticky;
    top: 94px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (max-width: 991px) { .bpl-sidebar { position: static; margin-top: 32px; } }

.bpl-widget {
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    border: 1px solid #FBEEF0;
}
.bpl-widget__title {
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #374151;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f3f4f6;
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
}
.bpl-widget__title::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 28px; height: 2px;
    background: var(--tg-theme-primary);
    border-radius: 2px;
}
.bpl-widget__title i { color: #A41034; font-size: var(--fs-xs); }

/* Category list */
.bpl-cats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.bpl-cats li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: var(--fs-sm);
    color: #4b5563;
    text-decoration: none;
    transition: background .18s, color .18s;
    font-weight: 500;
}
.bpl-cats li a i { font-size: 9px; color: #FFFFFF; flex-shrink: 0; transition: transform .2s, color .2s; }
.bpl-cats li a:hover,
.bpl-cats li a.active { background: #FDF5F6; color: #A41034; text-decoration: none; }
.bpl-cats li a:hover i,
.bpl-cats li a.active i { transform: translateX(3px); color: #A41034; }

/* Popular posts — numbered */
.bpl-popular-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 11px 0;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
}
.bpl-popular-item:first-of-type { padding-top: 0; }
.bpl-popular-item:last-child { border-bottom: none; padding-bottom: 0; }
.bpl-popular-item__num {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: #FDF5F6;
    color: #A41034;
    font-size: var(--fs-xs);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: background .2s, color .2s;
}
.bpl-popular-item:nth-child(1) .bpl-popular-item__num { background: #A41034; color: #fff; }
.bpl-popular-item:nth-child(2) .bpl-popular-item__num { background: #F6D9DF; }
.bpl-popular-item:nth-child(3) .bpl-popular-item__num { background: #FBEEF0; }
.bpl-popular-item__thumb {
    flex-shrink: 0;
    width: 60px; height: 50px;
    border-radius: 9px;
    overflow: hidden;
}
.bpl-popular-item__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.bpl-popular-item:hover .bpl-popular-item__thumb img { transform: scale(1.08); }
.bpl-popular-item__info { flex: 1; min-width: 0; }
.bpl-popular-item__date {
    font-size: var(--fs-xs);
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.bpl-popular-item__date i { color: #FFFFFF; }
.bpl-popular-item__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #1e1b4b;
    line-height: var(--lh-snug);
    margin: 0;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bpl-popular-item:hover .bpl-popular-item__title { color: #A41034; }
.bpl-popular-item:hover { text-decoration: none; }

/* Newsletter mini widget */
.bpl-nl-widget {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 4px 18px rgba(49,46,129,.25);
    text-align: center;
}
.bpl-nl-widget__icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(167,139,250,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: var(--fs-xl);
    color: #FFFFFF;
}
.bpl-nl-widget__title {
    font-size: var(--fs-base);
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
}
.bpl-nl-widget__sub {
    font-size: 12.5px;
    color: rgba(255,255,255,.55);
    line-height: 1.55;
    margin: 0 0 18px;
}
.bpl-nl-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.bpl-nl-form input {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    padding: 10px 14px;
    font-size: var(--fs-sm);
    color: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    font-family: var(--tg-body-font-family);
}
.bpl-nl-form input::placeholder { color: rgba(255,255,255,.4); }
.bpl-nl-form input:focus {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(167,139,250,.2);
}
.bpl-nl-form button {
    background: #A41034;
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 10px;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.bpl-nl-form button:hover { background: #A41034; }

/* ── contact ── */
/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.ig-ct-hero {
    position: relative;
    background: #A41034;
    padding: 60px 0 52px;
    overflow: hidden;
    }
.ig-ct-hero::after {
    content: ''; position: absolute; inset: 0;
    background-image: #A41034;
    background-size: 30px 30px; pointer-events: none;
}
.ig-ct-orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px); pointer-events: none;
}
.ig-ct-orb-1 { width:500px; height:500px; background:radial-gradient(circle,rgba(124,82,255,.22),transparent 65%); top:-180px; left:-100px; }
.ig-ct-orb-2 { width:380px; height:380px; background:radial-gradient(circle,rgba(37,99,235,.17),transparent 65%); bottom:-140px; right:-80px; }
.ig-ct-orb-3 { width:280px; height:280px; background:radial-gradient(circle,rgba(219,39,119,.12),transparent 65%); top:30%; right:15%; }
.ig-ct-shine { position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(124,82,255,.55) 35%,rgba(37,99,235,.55) 65%,transparent); }
.ig-ct-dots  { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1px); background-size:30px 30px; pointer-events:none; }

.ig-ct-hero-inner { position: relative; z-index: 2; }
.ig-ct-badge { display:inline-flex; align-items:center; gap:7px; background:#1C1514; border:1px solid rgba(124,82,255,.35); border-radius:100px; padding:5px 14px; font-size: var(--fs-xs); font-weight:600; color:#FFFFFF; letter-spacing:.4px; margin-bottom:16px; }
.ig-ct-title { font-size:clamp(2rem,4vw,2.8rem); font-weight:900; color:#fff; line-height:1.15; margin-bottom:10px; letter-spacing:-1px; }
.ig-ct-title span { background:#FFFFFF; background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:ctGrad 6s linear infinite; }
@keyframes ctGrad { 0%{background-position:0 center;} 100%{background-position:200% center;} }
.ig-ct-sub { font-size: var(--fs-base); color:rgba(255,255,255,.55); margin-bottom:28px; max-width:520px; line-height: var(--lh-relaxed); }
.ig-ct-breadcrumb { display:flex; align-items:center; gap:7px; font-size: var(--fs-sm); color:rgba(255,255,255,.40); flex-wrap:wrap; }
.ig-ct-breadcrumb a { color:rgba(255,255,255,.52); text-decoration:none; transition:color .2s; }
.ig-ct-breadcrumb a:hover { color:#FFFFFF; }
.ig-ct-breadcrumb i { font-size:8px; color:rgba(255,255,255,.22); }

/* Trust chips row */
.ig-ct-chips { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:24px; }
.ig-ct-chip { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); border-radius:100px; padding:7px 14px; font-size:12.5px; color:rgba(255,255,255,.70); }
.ig-ct-chip i { color:#FFFFFF; font-size: var(--fs-xs); }

/* ══════════════════════════════════════════════════
   MAIN BODY
══════════════════════════════════════════════════ */
.ig-ct-body { background: #f5f4fc; padding: 52px 0 64px; }

/* ── Left info panel ── */
.ig-ct-info {
    background: #A41034;
    border-radius: 20px; padding: 36px 32px;
    height: 100%;
    position: relative; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.20);
}
.ig-ct-info::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size: 26px 26px; pointer-events: none;
}
.ig-ct-info-orb { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; }
.ig-ct-info-orb-1 { width:280px; height:280px; background:radial-gradient(circle,rgba(124,82,255,.25),transparent 65%); top:-80px; left:-60px; }
.ig-ct-info-orb-2 { width:200px; height:200px; background:radial-gradient(circle,rgba(37,99,235,.20),transparent 65%); bottom:-50px; right:-40px; }

.ig-ct-info-inner { position: relative; z-index: 1; }
.ig-ct-info-title { font-size:1.4rem; font-weight:800; color:#fff; margin-bottom:8px; line-height: var(--lh-tight); }
.ig-ct-info-sub { font-size: var(--fs-sm); color:rgba(255,255,255,.48); line-height: var(--lh-relaxed); margin-bottom:30px; }

/* info cards */
.ig-ct-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px; padding: 18px 20px;
    margin-bottom: 14px;
    display: flex; align-items: flex-start; gap: 14px;
    transition: background .2s;
}
.ig-ct-card:hover { background: rgba(255,255,255,.10); }
.ig-ct-card-icon {
    width: 42px; height: 42px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-md); flex-shrink: 0;
}
.ig-ct-card-icon.purple { background: rgba(124,82,255,.25); color: #FFFFFF; }
.ig-ct-card-icon.blue   { background: rgba(37,99,235,.25);  color: #93c5fd; }
.ig-ct-card-icon.teal   { background: rgba(8,145,178,.25);  color: #67e8f9; }
.ig-ct-card-icon.pink   { background: rgba(219,39,119,.25); color: #f9a8d4; }
.ig-ct-card-label { font-size: var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.9px; color:rgba(255,255,255,.38); margin-bottom:3px; }
.ig-ct-card-val { font-size: var(--fs-sm); color:rgba(255,255,255,.85); font-weight:500; line-height: var(--lh-normal); }
.ig-ct-card-val a { color:rgba(255,255,255,.85); text-decoration:none; transition:color .2s; }
.ig-ct-card-val a:hover { color:#FFFFFF; }

/* social row */
.ig-ct-social-row { margin-top: 24px; }
.ig-ct-social-label { font-size: var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.35); margin-bottom:12px; }
.ig-ct-socials { display:flex; gap:10px; flex-wrap:wrap; }
.ig-ct-soc-btn {
    width:38px; height:38px; border-radius:10px;
    background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.55); font-size: var(--fs-base); text-decoration:none;
    transition:all .2s;
}
.ig-ct-soc-btn:hover { background:rgba(124,82,255,.25); border-color:rgba(124,82,255,.4); color:#FFFFFF; text-decoration:none; }

/* response badge */
.ig-ct-response {
    margin-top: 24px;
    background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.25);
    border-radius: 10px; padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
}
.ig-ct-response i { color: #34d399; font-size: var(--fs-base); }
.ig-ct-response-text strong { display:block; font-size: var(--fs-sm); color:#fff; font-weight:600; }
.ig-ct-response-text span { font-size: var(--fs-xs); color:rgba(255,255,255,.45); }

/* ── Right form card ── */
.ig-ct-form-card {
    background: #fff; border-radius: 20px;
    box-shadow: 0 4px 28px rgba(0,0,0,.08), 0 0 0 1px rgba(124,82,255,.05);
    padding: 40px 44px;
    height: 100%;
}
.ig-ct-form-title { font-size:1.5rem; font-weight:800; color:#0f0c29; margin-bottom:6px; }
.ig-ct-form-sub { font-size: var(--fs-sm); color:#6b7280; margin-bottom:28px; }

/* form fields */
.ig-fg { margin-bottom: 16px; position: relative; }
.ig-label { display:block; font-size:12.5px; font-weight:600; color:#374151; margin-bottom:6px; }
.ig-label span { color:#ef4444; }
.ig-input, .ig-textarea {
    width:100%; padding:12px 15px;
    border:1.5px solid #e5e7eb; border-radius:10px;
    font-size: var(--fs-sm); color:#111827; background:#fafafa;
    outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
    box-sizing:border-box; font-family:inherit;
}
.ig-input:focus, .ig-textarea:focus {
    border-color:#1C1514 !important;
    box-shadow:0 0 0 3px rgba(124,82,255,.10) !important;
    background:#fff;
}
.ig-input.is-invalid, .ig-textarea.is-invalid { border-color:#ef4444 !important; background:#fff8f8; }
.ig-textarea { min-height:140px; resize:vertical; line-height: var(--lh-normal); }
.ig-ferr { display:block; font-size:11.5px; color:#ef4444; margin-top:4px; font-weight:500; min-height:15px; }
.ig-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* character counter */
.ig-msg-footer { display:flex; justify-content:flex-end; margin-top:4px; }
.ig-char-count { font-size:11.5px; color:#9ca3af; }
.ig-char-count.warn { color:#f97316; }
.ig-char-count.over { color:#ef4444; }

/* submit button */
.ig-ct-submit {
    width:100%; padding:14px;
    background: #1C1514; 
    color:#fff; border:none; border-radius:11px;
    font-size: var(--fs-base); font-weight:700; cursor:pointer;
    transition:opacity .2s, transform .2s, box-shadow .2s;
    box-shadow:0 6px 22px rgba(124,82,255,.38);
    margin-top:4px; letter-spacing:.3px;
    display:flex; align-items:center; justify-content:center; gap:9px;
}
.ig-ct-submit:hover:not(:disabled) { opacity:.9; transform:translateY(-2px); box-shadow:0 10px 30px rgba(124,82,255,.5); }
.ig-ct-submit:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* success / error alert */
.ig-ct-alert {
    display:none; padding:14px 18px; border-radius:10px;
    font-size: var(--fs-sm); font-weight:500; margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
}
.ig-ct-alert.success { background:#f0fdf4; border:1px solid #86efac; color:#166534; }
.ig-ct-alert.error   { background:#fef2f2; border:1px solid #fca5a5; color:#991b1b; }
.ig-ct-alert i { font-size: var(--fs-md); flex-shrink:0; }

/* ══════════════════════════════════════════════════
   MAP SECTION
══════════════════════════════════════════════════ */
.ig-ct-map-wrap { padding: 0 0 64px; background: #f5f4fc; }
.ig-ct-map-box {
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
    position: relative;
}
.ig-ct-map-box iframe { display:block; width:100%; height:420px; border:none; }
.ig-ct-map-overlay {
    position: absolute; top: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(180deg, #f5f4fc 0%, transparent 100%);
    pointer-events: none;
}

/* ══════════════════════════════════════════════════
   FAQ STRIP
══════════════════════════════════════════════════ */
.ig-ct-faq { background: #fff; padding: 52px 0; border-top: 1px solid #e5e7eb; }
.ig-ct-faq-title { font-size:1.5rem; font-weight:800; color:#0f0c29; text-align:center; margin-bottom:6px; }
.ig-ct-faq-sub { text-align:center; font-size: var(--fs-sm); color:#6b7280; margin-bottom:36px; }
.ig-ct-faq-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ig-ct-faq-item {
    background:#faf5ff; border:1px solid rgba(124,82,255,.10);
    border-radius:14px; padding:22px 20px;
    transition:box-shadow .2s, transform .2s;
}
.ig-ct-faq-item:hover { box-shadow:0 8px 24px rgba(124,82,255,.12); transform:translateY(-2px); }
.ig-ct-faq-icon { width:40px; height:40px; border-radius:10px; background:rgba(124,82,255,.12); color:#1C1514; display:flex; align-items:center; justify-content:center; font-size: var(--fs-md); margin-bottom:14px; }
.ig-ct-faq-q { font-size: var(--fs-sm); font-weight:700; color:#1e1b4b; margin-bottom:7px; line-height: var(--lh-snug); }
.ig-ct-faq-a { font-size: var(--fs-sm); color:#6b7280; line-height: var(--lh-normal); }

@media(max-width:991px) {
    .ig-ct-form-card { padding:28px 22px; }
    .ig-ct-faq-grid { grid-template-columns:1fr; }
    .ig-row-2 { grid-template-columns:1fr; }
    .ig-ct-info { margin-bottom: 24px; }
}
@media(max-width:575px) {
    .ig-ct-hero { padding:40px 0 36px; }
    .ig-ct-form-card { padding:22px 16px; }
    .ig-ct-faq-grid { grid-template-columns:1fr; }
}

/* ── cart ── */

/* ══════════════════════════════════════════
   CART PAGE — Professional White Theme
══════════════════════════════════════════ */
.cart-pg {
    background: #f4f6fb;
    min-height: 100vh;
    padding: 0 0 80px;
    font-family:"Plus Jakarta Sans", sans-serif;
}

/* ── Hero banner ── */
.cart-hero {
    background: #fff;
    border-bottom: 1px solid #eaecf4;
    padding: 32px 0;
    margin-bottom: 40px;
}
.cart-hero__inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}
.cart-hero__left { display: flex; align-items: center; gap: 16px; }
.cart-hero__icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, #A41034, #A41034);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.2rem;
    box-shadow: 0 6px 18px rgba(164,16,52,.35);
}
.cart-hero__title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.6rem; font-weight: 800; color: #1a1040; margin: 0;
}
.cart-hero__sub { color: #6b7280; font-size: .875rem; margin: 2px 0 0; }
.cart-hero__badge {
    background: linear-gradient(135deg, #A41034, #A41034);
    color: #fff; font-size: .72rem; font-weight: 700;
    padding: 5px 14px; border-radius: 100px; letter-spacing: .04em;
    box-shadow: 0 4px 12px rgba(164,16,52,.3);
}

/* ── Alert ── */
.cart-alert {
    background: #fef2f2; border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    border-radius: 12px; padding: 14px 18px;
    color: #991b1b; font-size: .875rem; margin-bottom: 20px;
    display: flex; align-items: flex-start; gap: 12px;
}
.cart-alert i { color: #ef4444; margin-top: 2px; flex-shrink: 0; }

/* ── Cart items card ── */
.cart-items-card {
    background: #fff; border-radius: 18px;
    border: 1px solid #eaecf4;
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
    overflow: hidden; margin-bottom: 20px;
}
.cart-items-header {
    padding: 18px 24px; border-bottom: 1px solid #f0f1f8;
    display: flex; align-items: center; justify-content: space-between;
}
.cart-items-header h6 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800; font-size: .95rem; color: #1a1040; margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.cart-items-header h6 i { color: #A41034; font-size: .85rem; }
.cart-items-header span { font-size: .8rem; color: #9ca3af; font-weight: 500; }

/* ── Table ── */
.cart-tbl { width: 100%; border-collapse: collapse; }
.cart-tbl thead th {
    padding: 12px 20px;
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: #9ca3af; background: #fafbff;
    border-bottom: 1px solid #f0f1f8;
    white-space: nowrap;
}
.cart-tbl tbody tr {
    border-bottom: 1px solid #f5f6fa;
    transition: background .15s;
}
.cart-tbl tbody tr:last-child { border-bottom: none; }
.cart-tbl tbody tr:hover { background: #fafbff; }
.cart-tbl td { padding: 18px 20px; vertical-align: middle; }

/* thumbnail */
.ct-img {
    width: 96px; height: 64px; border-radius: 10px;
    object-fit: cover; display: block;
    border: 1px solid #eaecf4;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: transform .2s;
}
.ct-img:hover { transform: scale(1.04); }

/* course name */
.ct-name-wrap { max-width: 360px; }
.ct-name {
    font-weight: 700; font-size: .9rem; color: #111827;
    line-height: var(--lh-snug); margin-bottom: 6px;
}
.ct-name a { color: inherit; text-decoration: none; }
.ct-name a:hover { color: #A41034; }
.ct-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* badges */
.ct-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 100px;
    font-size: .68rem; font-weight: 700; letter-spacing: .03em;
}
.ct-tag--course  { background: #f3f0ff; color: #A41034; }
.ct-tag--klip    { background: #eff6ff; color: #2563eb; }
.ct-tag--warn    { background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; }

/* price */
.ct-price {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem; font-weight: 900; color: #111827;
    white-space: nowrap;
}

/* remove */
.ct-del {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: #fef2f2; border: 1px solid #fecaca;
    color: #dc2626; font-size: .8rem;
    text-decoration: none; transition: all .2s;
}
.ct-del:hover { background: #fee2e2; border-color: #f87171; color: #b91c1c; }

/* ── Coupon bar ── */
.cart-coupon-bar {
    padding: 16px 20px;
    background: #fafbff; border-top: 1px solid #f0f1f8;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cart-coupon-bar__label {
    font-size: .78rem; font-weight: 600; color: #6b7280;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.cart-coupon-bar__label i { color: #A41034; }
.cart-coupon-bar input {
    flex: 1; min-width: 140px; height: 40px;
    padding: 0 14px; border: 1.5px solid #e2dff0;
    border-radius: 9px; font-size: .875rem; color: #1a1040;
    background: #fff; outline: none; transition: all .2s;
    font-family:"Plus Jakarta Sans", sans-serif;
}
.cart-coupon-bar input::placeholder { color: #FFFFFF; }
.cart-coupon-bar input:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.1);
}
.cart-coupon-bar button {
    height: 40px; padding: 0 20px; border-radius: 9px;
    background: linear-gradient(135deg, #A41034, #A41034);
    color: #fff; font-weight: 700; font-size: .82rem; border: none;
    cursor: pointer; transition: all .2s; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(164,16,52,.3);
}
.cart-coupon-bar button:hover {
    background: linear-gradient(135deg, #A41034, #7A0D27);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(164,16,52,.4);
}

/* ── Recommended / promo strip ── */
.cart-promo {
    background: #1C1514;
    border: 1px solid #1C1514; border-radius: 12px;
    padding: 14px 18px; display: flex; align-items: center; gap: 14px;
    font-size: .82rem; color: #FFFFFF;
}
.cart-promo i { font-size: 1.1rem; color: #FFFFFF; flex-shrink: 0; }
.cart-promo strong { color: #FFFFFF; }

/* ══════════════════════════════════════════
   ORDER SUMMARY SIDEBAR
══════════════════════════════════════════ */
.order-summary {
    background: #fff; border-radius: 18px;
    border: 1px solid #eaecf4;
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
    overflow: hidden;
    position: sticky; top: 20px;
}

/* gradient top stripe */
.order-summary::before {
    content: ''; display: block;
    height: 3px;
    background: linear-gradient(90deg, #A41034 0%, #FFFFFF 50%, #A41034 100%);
}

.os-head {
    padding: 20px 22px 16px;
    border-bottom: 1px solid #f0f1f8;
}
.os-head h5 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800; font-size: 1rem; color: #1a1040; margin: 0 0 2px;
}
.os-head p { color: #9ca3af; font-size:1rem; margin: 0; }

.os-body { padding: 0 22px; }

.os-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 14px 0; border-bottom: 1px solid #f5f6fa;
    font-size: .88rem;
}
.os-row:last-of-type { border-bottom: none; }
.os-row__key { color: #6b7280; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.os-row__key i { font-size: .72rem; color: #FFFFFF; }
.os-row__val { font-weight: 700; color: #111827; text-align: right; }

/* discount row */
.os-coupon-detail {
    font-size: .72rem; color: #A41034; font-weight: 600;
    display: flex; align-items: center; gap: 4px; margin-top: 2px;
}
.os-coupon-detail a { color: #ef4444; text-decoration: none; margin-left: 4px; font-weight: 700; }
.os-coupon-detail a:hover { text-decoration: underline; }
.os-row__val--discount { color: #10b981 !important; }

/* divider */
.os-divider { height: 1px; background: #f0f1f8; margin: 0 0 0; }

/* total row */
.os-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 0 20px;
}
.os-total__key {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800; font-size: 1rem; color: #1a1040;
    display: flex; align-items: center; gap: 8px;
}
.os-total__val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.5rem; font-weight: 900; color: #A41034;
}

/* checkout btn */
.os-checkout-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 15px 20px; margin-bottom: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #A41034 0%, #A41034 100%);
    color: #fff !important; font-weight: 700; font-size: .95rem;
    text-decoration: none !important; border: none;
    box-shadow: 0 6px 20px rgba(164,16,52,.4);
    transition: all .25s cubic-bezier(.4,0,.2,1);
    letter-spacing: .01em;
}
.os-checkout-btn:hover {
    background: linear-gradient(135deg, #A41034, #7A0D27);
    box-shadow: 0 8px 28px rgba(164,16,52,.5);
    transform: translateY(-2px); color: #fff !important;
}
.os-checkout-btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(164,16,52,.3); }

.os-footer { padding: 0 22px 22px; }

.os-secure {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: .73rem; color: #9ca3af; margin-bottom: 14px;
}
.os-secure i { color: #10b981; }

.os-payment-icons {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.os-payment-icon {
    background: #f5f6fa; border: 1px solid #eaecf4;
    border-radius: 6px; padding: 5px 10px;
    font-size: .65rem; font-weight: 700; color: #6b7280;
    letter-spacing: .04em;
}

/* ══════════════════════════════════════════
   EMPTY CART
══════════════════════════════════════════ */
.cart-empty-wrap {
    display: flex; justify-content: center; align-items: center;
    min-height: 60vh; padding: 60px 20px;
}
.cart-empty {
    background: #fff; border-radius: 24px;
    border: 1px solid #eaecf4;
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.08);
    padding: 64px 48px; text-align: center; max-width: 500px; width: 100%;
}
.cart-empty__img-wrap {
    width: 120px; height: 120px; border-radius: 24px;
    background: #1C1514;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 6px 20px rgba(164,16,52,.15);
}
.cart-empty__img-wrap img { width: 80px; opacity: .85; }
.cart-empty__title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.45rem; font-weight: 800; color: #1a1040; margin-bottom: 8px;
}
.cart-empty__sub {
    color: #9ca3af; font-size: .875rem; line-height: var(--lh-normal);
    margin-bottom: 28px; max-width: 320px; margin-left: auto; margin-right: auto;
}
.cart-empty__btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 28px; border-radius: 12px;
    background: linear-gradient(135deg, #A41034, #A41034);
    color: #fff !important; font-weight: 700; font-size: .9rem;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(164,16,52,.4);
    transition: all .2s;
}
.cart-empty__btn:hover {
    background: linear-gradient(135deg, #A41034, #7A0D27);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(164,16,52,.5);
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .cart-tbl thead { display: none; }
    .cart-tbl tbody tr { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 0; }
    .cart-tbl td { padding: 0 20px; border: none; }
    .cart-hero__badge { display: none; }
}

/* ── dashboard ── */
/* ════════════════════════════════════════
   iGURUS ADMIN DASHBOARD
════════════════════════════════════════ */
.ig-dash { padding: 28px 8px 48px; background: transparent; min-height: 100vh; }

/* ── Page Header ── */
.ig-dash-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 28px;
}
.ig-dash-header__left h1 {
    font-size: 1.6rem; font-weight: 800; color: #e2d9ff; margin: 0 0 4px; letter-spacing: -.02em;
}
.ig-dash-header__left p { font-size: var(--fs-sm); color: #a89fc8; margin: 0; }
.ig-dash-header__actions { display: flex; gap: 10px; }
.ig-dash-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 9px; font-size: var(--fs-sm); font-weight: 600;
    text-decoration: none; border: none; cursor: pointer; transition: all .2s;
}
.ig-dash-btn--primary {
    background: #A41034;
    color: #fff; box-shadow: 0 4px 14px rgba(164,16,52,.3);
}
.ig-dash-btn--primary:hover { opacity: .88; transform: translateY(-1px); color: #fff; text-decoration: none; }
.ig-dash-btn--outline {
    background: #fff; color: #4b3faa;
    border: 1.5px solid #F6D9DF;
}
.ig-dash-btn--outline:hover { border-color: #A41034; background: #FDF5F6; color: #A41034; text-decoration: none; }

/* ── Alerts ── */
.ig-dash-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px; border-radius: 12px; margin-bottom: 18px;
    font-size: var(--fs-sm); font-weight: 500;
}
.ig-dash-alert--danger { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.ig-dash-alert--warning { background: #fffbeb; border: 1px solid #fde68a; color: #d97706; }
.ig-dash-alert i { margin-top: 1px; flex-shrink: 0; }
.ig-dash-alert-close { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; opacity: .6; font-size: var(--fs-md); }
.ig-dash-alert-close:hover { opacity: 1; }

/* ── Stat Cards ── */
.ig-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}
.ig-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px 22px 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    transition: transform .2s, box-shadow .2s;
}
.ig-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.10); }
.ig-stat-card__bg {
    position: absolute; top: -20px; right: -20px;
    width: 100px; height: 100px; border-radius: 50%;
    opacity: .07;
}
.ig-stat-card__icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-lg); margin-bottom: 16px; flex-shrink: 0;
}
.ig-stat-card__value {
    font-size: 1.7rem; font-weight: 800; color: #1e1b4b;
    line-height: 1; margin-bottom: 5px; letter-spacing: -.03em;
}
.ig-stat-card__label {
    font-size: var(--fs-xs); font-weight: 600; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .06em;
}
.ig-stat-card__accent {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; border-radius: 0 0 16px 16px;
}

/* Color tokens */
.ig-c-purple { color: #A41034; background: rgba(164,16,52,.12); }
.ig-c-blue   { color: #2563eb; background: rgba(37,99,235,.12); }
.ig-c-green  { color: #059669; background: rgba(5,150,105,.12); }
.ig-c-orange { color: #d97706; background: rgba(217,119,6,.12); }
.ig-c-pink   { color: #db2777; background: rgba(219,39,119,.12); }
.ig-c-teal   { color: #0891b2; background: rgba(8,145,178,.12); }
.ig-c-indigo { color: #4f46e5; background: rgba(79,70,229,.12); }
.ig-c-rose   { color: #e11d48; background: rgba(225,29,72,.12); }

.ig-bg-purple { background: #A41034; }
.ig-bg-blue   { background: #2563eb; }
.ig-bg-green  { background: #059669; }
.ig-bg-orange { background: #d97706; }
.ig-bg-pink   { background: #db2777; }
.ig-bg-teal   { background: #0891b2; }
.ig-bg-indigo { background: #4f46e5; }
.ig-bg-rose   { background: #e11d48; }

/* ── Chart Card ── */
.ig-chart-card {
    background: #fff; border-radius: 16px;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    margin-bottom: 24px; overflow: hidden;
}
.ig-chart-card__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid #f3f4f6;
    flex-wrap: wrap; gap: 12px;
}
.ig-chart-card__title {
    font-size: var(--fs-base); font-weight: 700; color: #1e1b4b; margin: 0;
    display: flex; align-items: center; gap: 9px;
}
.ig-chart-card__title i {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg,#A41034,#2563eb);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: var(--fs-sm);
}
.ig-chart-card__selects { display: flex; gap: 10px; }
.ig-chart-select {
    padding: 7px 12px; border: 1.5px solid #e5e7eb; border-radius: 8px;
    font-size: var(--fs-sm); color: #374151; background: #fff; outline: none;
    cursor: pointer; transition: border-color .2s;
}
.ig-chart-select:focus { border-color: #A41034; }
.ig-chart-card__body { padding: 24px; }
.ig-chart-area { position: relative; height: 300px; }

/* ── Recent Items ── */
.ig-recent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.ig-recent-card {
    background: #fff; border-radius: 16px;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    overflow: hidden;
}
.ig-recent-card__header {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px; border-bottom: 1px solid #f3f4f6;
}
.ig-recent-card__icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-base); flex-shrink: 0;
}
.ig-recent-card__title { font-size: var(--fs-sm); font-weight: 700; color: #1e1b4b; margin: 0 0 2px; }
.ig-recent-card__sub { font-size: var(--fs-xs); color: #9ca3af; margin: 0; }
.ig-recent-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 20px; border-bottom: 1px solid #f9fafb;
    text-decoration: none; transition: background .15s;
}
.ig-recent-item:last-child { border-bottom: none; }
.ig-recent-item:hover { background: #f9fafb; text-decoration: none; }
.ig-recent-item__avatar {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, #FBEEF0, #dbeafe);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); font-weight: 700; color: #A41034; flex-shrink: 0;
}
.ig-recent-item__body { flex: 1; min-width: 0; }
.ig-recent-item__title {
    font-size: var(--fs-sm); font-weight: 600; color: #1e1b4b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin: 0 0 3px; display: block;
}
.ig-recent-item__meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ig-recent-item__author { font-size: 11.5px; color: #9ca3af; }
.ig-recent-item__dot { width: 3px; height: 3px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; }
.ig-recent-item__time { font-size: var(--fs-xs); color: #FFFFFF; font-weight: 500; }
.ig-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600;
}
.ig-badge--green  { background: #d1fae5; color: #059669; }
.ig-badge--orange { background: #fef3c7; color: #d97706; }
.ig-badge--blue   { background: #dbeafe; color: #2563eb; }
.ig-recent-card__viewall {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 20px; font-size: 12.5px; font-weight: 600;
    color: #A41034; text-decoration: none; border-top: 1px solid #f3f4f6;
    transition: background .15s;
}
.ig-recent-card__viewall:hover { background: #FDF5F6; text-decoration: none; color: #A41034; }

/* ── Responsive ── */
@media (max-width: 1199px) {
    .ig-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .ig-recent-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .ig-dash { padding: 14px 0 32px; }
    .ig-stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ig-recent-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .ig-stat-grid { grid-template-columns: 1fr; }
}

/* ── login ── */
/* ════════════════════════════════════════
   ADMIN LOGIN — Full-Screen Split Layout
════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }


/* ── LEFT: Form panel ── */
.al-left {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 64px;
    background: #fff;
    position: relative;
    overflow-y: auto;
}

/* Corner decoration */
.al-left::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 280px; height: 280px;
    background: radial-gradient(circle at 0 0, rgba(164,16,52,.06), transparent 70%);
    pointer-events: none;
}
.al-left::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 200px; height: 200px;
    background: radial-gradient(circle at 100% 100%, rgba(37,99,235,.05), transparent 70%);
    pointer-events: none;
}

.al-form-inner { width: 100%; max-width: 400px; margin: 0 auto; position: relative; z-index: 1; }

/* Logo */
.al-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; text-decoration: none; }
.al-logo img { max-height: 32px; object-fit: contain; }
.al-logo-text {
    font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.5px;
    background: #A41034;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Badge */
.al-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.2);
    border-radius: 100px; padding: 5px 14px;
    font-size: 11.5px; font-weight: 600; color: #A41034;
    margin-bottom: 22px; width: fit-content;
}

/* Headings */
.al-title { font-size: 2rem; font-weight: 800; color: #0f0c29; line-height: 1.15; margin: 0 0 8px; }
.al-sub   { font-size: var(--fs-sm); color: #6b7280; margin: 0 0 32px; }

/* Error */
.al-error {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: 10px;
    background: #fef2f2; border: 1px solid #fecaca;
    color: #dc2626; font-size: var(--fs-sm); margin-bottom: 20px;
}
.al-error i { margin-top: 1px; flex-shrink: 0; }

/* Fields */
.al-fg { margin-bottom: 18px; }
.al-label { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 6px; letter-spacing: .02em; }
.al-field-wrap { position: relative; }
.al-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: var(--fs-sm); pointer-events: none; }
.al-input {
    width: 100%; padding: 12px 14px 12px 40px;
    border: 1.5px solid #e5e7eb; border-radius: 11px;
    font-size: var(--fs-sm); color: #111827; background: #fafafa; outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.al-input:focus { border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.1); background: #fff; }

/* Password row */
.al-pw-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.al-forgot { font-size: 12.5px; color: #A41034; font-weight: 600; text-decoration: none; }
.al-forgot:hover { text-decoration: underline; }
.al-eye { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #9ca3af; font-size: var(--fs-sm); }
.al-eye:hover { color: #A41034; }
.al-input.has-eye { padding-right: 44px; }

/* Submit */
.al-submit {
    width: 100%; padding: 14px;
    background: linear-gradient(135deg, #A41034 0%, #2563eb 100%);
    color: #fff; border: none; border-radius: 11px;
    font-size: var(--fs-base); font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 22px rgba(164,16,52,.32);
    transition: opacity .2s, transform .2s, box-shadow .2s;
    letter-spacing: .3px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 8px;
}
.al-submit:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(164,16,52,.4); }
.al-submit:active { transform: translateY(0); }

/* Footer */
.al-foot { text-align: center; font-size: 12.5px; color: #9ca3af; margin-top: 22px; }
.al-foot a { color: #A41034; font-weight: 600; text-decoration: none; }
.al-foot a:hover { text-decoration: underline; }

/* Divider */
.al-divider { height: 1px; background: linear-gradient(90deg, transparent, #e5e7eb, transparent); margin: 28px 0; }

/* ── RIGHT: Dark branding panel ── */
.al-right {
    flex: 1;
    position: relative;
    background: #07041a;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 44px;
}

/* Animated gradient blobs */
.al-blob {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: .55;
    animation: alBlob 12s ease-in-out infinite alternate;
}
.al-blob-1 { width: 500px; height: 500px; background: radial-gradient(circle, #A41034, transparent 70%); top: -140px; left: -80px; }
.al-blob-2 { width: 400px; height: 400px; background: radial-gradient(circle, #2563eb, transparent 70%); bottom: -80px; right: -60px; animation-duration: 15s; animation-delay: -5s; }
.al-blob-3 { width: 280px; height: 280px; background: radial-gradient(circle, #db2777, transparent 70%); top: 50%; left: 40%; animation-duration: 10s; animation-delay: -3s; }
@keyframes alBlob { 0%{transform:translate(0,0) scale(1);} 60%{transform:translate(20px,-16px) scale(1.05);} 100%{transform:translate(-12px,20px) scale(.97);} }

/* Dot grid */
.al-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 34px 34px; pointer-events: none; }

/* Top shine */
.al-shine { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 65%; height: 1px; background: linear-gradient(90deg, transparent, rgba(167,139,250,.55), transparent); }

.al-brand-inner { position: relative; z-index: 1; text-align: center; max-width: 400px; width: 100%; }

/* Wordmark */
.al-wordmark {
    font-size: 2.8rem; font-weight: 900; letter-spacing: -2px;
    background: linear-gradient(100deg, #FFFFFF 0%, #60a5fa 50%, #f472b6 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: alGrad 6s linear infinite; display: block; margin-bottom: 8px;
}
@keyframes alGrad { 0%{background-position:0 center;} 100%{background-position:200% center;} }

.al-brand-sub { font-size: var(--fs-sm); color: rgba(255,255,255,.42); margin-bottom: 36px; letter-spacing: .3px; }

/* Stats row */
.al-stats { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 36px; }
.al-stat { display: flex; flex-direction: column; align-items: center; padding: 0 18px; }
.al-stat strong {
    font-size: 1.35rem; font-weight: 900; line-height: 1;
    background: linear-gradient(90deg, #FFFFFF, #60a5fa);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    display: block; margin-bottom: 3px;
}
.al-stat span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.35); }
.al-vdiv { width: 1px; height: 26px; background: rgba(255,255,255,.12); }

/* Feature cards */
.al-features { list-style: none; padding: 0; margin: 0; text-align: left; }
.al-features li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 12px;
    background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08);
    margin-bottom: 10px; font-size: var(--fs-sm); color: rgba(255,255,255,.82); font-weight: 500;
    transition: background .2s;
}
.al-features li:hover { background: rgba(164,16,52,.18); }
.al-feat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); flex-shrink: 0; }
.al-features li:nth-child(1) .al-feat-icon { background: rgba(164,16,52,.25); color: #FFFFFF; }
.al-features li:nth-child(2) .al-feat-icon { background: rgba(37,99,235,.25); color: #93c5fd; }
.al-features li:nth-child(3) .al-feat-icon { background: rgba(8,145,178,.25); color: #67e8f9; }
.al-features li:nth-child(4) .al-feat-icon { background: rgba(16,185,129,.25); color: #6ee7b7; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .al-right { display: none; }
    .al-left  { flex: none; max-width: 100%; padding: 44px 28px; }
}
@media (max-width: 480px) {
    .al-left { padding: 36px 20px; }
    .al-title { font-size: 1.7rem; }
}

/* ── frontend/instructor-dashboard/course / create ── */

/* ── Global Context Theme Anchors ── */
:root {
    --brand-primary: #A41034;
    --brand-dark-base: #130330;
    --brand-faint-glow: rgba(164,16,52, 0.06);
    --brand-soft-line: rgba(164,16,52, 0.15);
    
    --accent-glow: #A41034;
    --accent-warn: #f59e0b;
    --accent-error: #ef4444;
    --accent-success: #10b981;
    
    --text-slate-dark: #1e1240;
    --text-slate-muted: #6b7280;
}

.cc { font-family:"Plus Jakarta Sans", sans-serif; }

/* ── Page Header Structure ── */
.cc-header { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.cc-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.75rem; font-weight: 800; color: var(--brand-primary); margin: 0;
    display: flex; align-items: center; gap: 12px;
}
.cc-title::before {
    content: ''; width: 5px; height: 26px; border-radius: 4px;
    background: linear-gradient(to bottom, var(--accent-warn), var(--brand-primary));
    display: inline-block; flex-shrink: 0;
}
.cc-subtitle { color: var(--text-slate-muted); font-size: .88rem; margin: 4px 0 0; font-weight: 500; }

/* ── Step Navigator Realignment ── */
.cc .dashboard__review-table { background: transparent !important; box-shadow: none !important; margin-bottom: 26px; }
.cc .dashboard__nav-wrap { background: transparent; }
.cc .nav-tabs {
    background: linear-gradient(135deg, var(--brand-dark-base) 0%, var(--brand-primary) 100%) !important;
    border: 1px solid rgba(164,16,52, .25) !important;
    border-radius: 14px !important; padding: 6px !important;
    gap: 4px; flex-wrap: nowrap;
    box-shadow: 0 8px 24px rgba(164,16,52, 0.25);
}
.cc .nav-tabs .nav-item { flex: 1; }
.cc .nav-tabs .nav-link {
    width: 100%; border: none !important; border-radius: 10px !important;
    color: rgba(255, 255, 255, .5) !important; font-weight: 600; font-size: .82rem;
    padding: 12px 14px !important; line-height: var(--lh-snug); text-align: center;
    transition: all .25s ease; white-space: nowrap; background: transparent !important;
}
.cc .nav-tabs .nav-link br { display: none; }
.cc .nav-tabs .nav-link i { display: none; }
.cc .nav-tabs .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, .08) !important;
    color: rgba(255, 255, 255, .9) !important;
}
.cc .nav-tabs .nav-link.active {
    background: #1C1514 !important;
    color: #fff !important; 
    font-weight: 700 !important;
}

/* ── Premium Clean Form Card ── */
.cc-card {
    background: #fff; border-radius: 18px;
    box-shadow: 0 4px 20px rgba(164,16,52, 0.08), 0 15px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--brand-soft-line);
    overflow: hidden;
}
.cc-card__head {
    padding: 24px 30px;
    border-bottom: 3px solid rgba(164,16,52, 0.15);
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(135deg, var(--brand-dark-base) 0%, var(--brand-primary) 100%);
}
.cc-card__head-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex; align-items: center; justify-content: center;
    color: #e2d7f5; font-size: var(--fs-lg); flex-shrink: 0;
}
.cc-card__head h5 {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.15rem;
    font-weight: 800; color: #fff; margin: 0; letter-spacing: 0.02em;
}
.cc-card__head p { color: rgba(255, 255, 255, 0.6); font-size: .8rem; margin: 4px 0 0; }

.cc-card__body { padding: 32px; }

/* ── Form Inputs Framework ── */
.cc-card .form-grp { margin-bottom: 24px; }
.cc-card .form-grp label {
    display: block !important; font-size: var(--fs-sm) !important; font-weight: 700 !important;
    color: #A41034 !important; margin-bottom: 9px !important; letter-spacing: .01em !important;
}
.cc-card .form-grp label code { color: #ef4444 !important; background: none !important; padding: 0 !important; font-size: var(--fs-sm) !important; font-weight: bold !important; }

.cc-card .form-grp input[type="text"],
.cc-card .form-grp input[type="email"],
.cc-card .form-grp input[type="number"],
.cc-card .form-grp select,
.cc-card .form-grp textarea {
    width: 100% !important; height: 48px !important; padding: 10px 16px !important;
    border: 1.5px solid #dcd7eb !important; border-radius: 10px !important;
    font-size: var(--fs-sm) !important; color: #1e1240 !important; background: #faf9ff !important;
    text-align: left !important; direction: ltr !important;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1) !important; outline: none !important; display: block !important; font-family: "Plus Jakarta Sans", sans-serif;
}
.cc-card .form-grp input:focus,
.cc-card .form-grp select:focus,
.cc-card .form-grp textarea:focus {
    border-color: #A41034 !important; background: #fff !important;
    box-shadow: 0 0 0 4px rgba(164,16,52, 0.12) !important;
}
.cc-card .form-grp textarea { height: 130px !important; resize: vertical !important; padding-top: 12px !important; text-align: left !important; direction: ltr !important; }
/* TinyMCE hides this textarea (inline display:none) once it builds the rich-text UI;
   the generic rule above forces display:block !important and fights that, so the
   raw empty textarea and the TinyMCE toolbar both render stacked on top of each other. */
.cc-card .form-grp textarea.text-editor-description { display: none !important; }
.cc-card .form-grp .wordcount { font-size: 11.5px; color: var(--text-slate-muted); margin-top: 6px; display: block; font-weight: 500; }

/* Informational Notes styling */
.cc-slug-note {
    font-size: 11.5px; color: var(--text-slate-muted); margin-top: 6.5px; display: flex; align-items: center; gap: 5px; font-weight: 500;
}
.cc-slug-note i { color: var(--accent-warn); font-size: var(--fs-xs); }

/* ── Dropzone Control UI ── */
.cc-card .my-thumbnail.dropzone {
    border: 2px dashed #E5E7EB !important; border-radius: 12px !important;
    background: #FAFAFA !important; min-height: 150px !important;
    display: flex; align-items: center; justify-content: center;
    transition: all .25s ease;
}
.cc-card .my-thumbnail.dropzone:hover {
    border-color: var(--brand-primary) !important; background: rgba(164, 16, 52, 0.02) !important;
}
.cc-card .my-thumbnail.dropzone .dz-message {
    color: var(--brand-primary); font-size: .9rem; text-align: center; padding: 20px; font-weight: 600;
}

/* ── Tags Input Override Engine ── */
.cc-card #tags_tagsinput {
    border: 1.5px solid #E5E7EB !important; border-radius: 10px !important;
    background: #FAFAFA !important; padding: 10px 14px !important;
    min-height: 150px !important; width: 100% !important;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; align-content: flex-start;
    transition: all .25s ease;
}
.cc-card #tags_tagsinput:focus-within {
    border-color: var(--brand-primary) !important; background: #fff !important;
    box-shadow: 0 0 0 4px rgba(164, 16, 52, 0.12) !important;
}
.cc-card #tags_tagsinput .tag {
    background: rgba(164, 16, 52, 0.09) !important; color: var(--brand-primary) !important;
    border-radius: 6px !important; padding: 4px 10px !important;
    font-size: var(--fs-xs) !important; font-weight: 700 !important;
    border: 1px solid rgba(164, 16, 52, 0.15) !important;
    display: inline-flex; align-items: center;
}
.cc-card #tags_tagsinput .tag a { color: var(--brand-primary) !important; margin-left: 6px !important; font-weight: 800; text-decoration: none; }
.cc-card #tags_tagsinput input {
    background: transparent !important; border: none !important;
    outline: none !important; color: #1e1240 !important;
    font-size: var(--fs-sm) !important; height: auto !important;
    padding: 2px 4px !important; min-width: 90px !important;
}

/* ── Primary Submit Footer Bar ── */
.cc-submit-row {
    display: flex; justify-content: flex-end;
    padding-top: 26px; border-top: 1px solid var(--brand-soft-line); margin-top: 12px;
}
.cc-card .btn-primary,
.cc-card .btn.btn-primary {
    background: #1C1514 !important;
    color: #fff !important; border: none !important;
    padding: 14px 36px !important; border-radius: 10px !important;
    font-size: var(--fs-sm) !important; font-weight: 700;
    box-shadow: 0 6px 20px rgba(164, 16, 52, 0.3) !important;
    transition: all .25s cubic-bezier(.4,0,.2,1) !important;
    display: inline-flex !important; align-items: center !important; gap: 10px !important;
    letter-spacing: .02em !important;
}
.cc-card .btn-primary:hover,
.cc-card .btn.btn-primary:hover {
    box-shadow: 0 10px 28px rgba(164, 16, 52, 0.45) !important;
    transform: translateY(-2px) !important;
    opacity: 0.95;
}
.cc-card .btn-primary:active,
.cc-card .btn.btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px rgba(164, 16, 52, 0.2) !important;
}

/* ── Validation Control System Engine ── */
.cc-v-error {
    border-color: var(--accent-error) !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .15) !important;
    background: #fff8f8 !important;
}
.cc-v-ok {
    border-color: var(--accent-success) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .1) !important;
}
.cc-err-msg {
    display: flex; align-items: center; gap: 6px;
    color: var(--accent-error); font-size: 12.5px; font-weight: 600; margin-top: 6px;
}
.cc-err-msg i { font-size: var(--fs-xs); }
.dz-v-error {
    border-color: var(--accent-error) !important;
    background: #fff8f8 !important;
}
.tox-v-error .tox-tinymce {
    border: 1.5px solid var(--accent-error) !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .15) !important;
    border-radius: 10px !important;
}

/* ── TinyMCE Form Wrapper ── */
.cc-card .tox-tinymce { border-radius: 10px !important; border: 1.5px solid #E5E7EB !important; transition: all 0.25s ease; }
.cc-card .tox-tinymce:focus-within { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 4px rgba(164, 16, 52, 0.12) !important; }

/* ── Structural Bootstrap Input Group ── */
.cc-card .input-group .input-group-text {
    background: #F3F4F6; border: 1.5px solid #E5E7EB;
    border-right: none; border-radius: 10px 0 0 10px; color: var(--brand-primary);
    font-weight: 600;
}
.cc-card .input-group .form-control {
    border-left: none; border-radius: 0 10px 10px 0;
    border: 1.5px solid #E5E7EB; background: #FAFAFA; color: var(--text-slate-dark);
}

/* ── Media Queries Responsive Layer ── */
@media(max-width:767px){
    .cc-card__body { padding: 22px; }
    .cc .nav-tabs { flex-wrap: wrap !important; }
    .cc .nav-tabs .nav-item { flex: none; width: 48%; }
}

/* ── frontend/instructor-dashboard/course / more-information ── */

/* ── Global Theme & Professional Form Reset ── */
:root {
    --brand-primary: #A41034;
    --brand-dark-base: #130330;
    --brand-faint-glow: rgba(164,16,52, 0.02);
    --brand-soft-line: rgba(164,16,52, 0.12);
    
    --accent-glow: #A41034;
    --accent-warn: #f59e0b;
    --accent-error: #ef4444;
    --accent-success: #10b981;
    
    --text-slate-dark: #0f172a;
    --text-slate-muted: #64748b;
}

.ci-page { font-family:"Plus Jakarta Sans", sans-serif; color: var(--text-slate-dark); }
.ci-page * { box-sizing: border-box; }

/* ── Step Navigation Lock & Override ── */
.ci-page .dashboard__review-table { background: transparent !important; box-shadow: none !important; margin-bottom: 16px; }
.ci-page .nav-tabs {
    background: linear-gradient(135deg, var(--brand-dark-base) 0%, var(--brand-primary) 100%) !important;
    border: 1px solid rgba(164,16,52, .2) !important;
    border-radius: 8px !important; padding: 4px !important; gap: 2px; flex-wrap: nowrap;
}
.ci-page .nav-tabs .nav-item { flex: 1; }
.ci-page .nav-tabs .nav-link {
    width: 100%; border: none !important; border-radius: 6px !important;
    color: rgba(255, 255, 255, .4) !important; font-weight: 600; font-size: .78rem;
    padding: 8px 12px !important; text-align: center; white-space: nowrap; background: transparent !important;
}
.ci-page .nav-tabs .nav-link.active {
    background: #1C1514 !important;
    color: #fff !important; font-weight: 700 !important; 
}

/* ── Unified Monolithic Form Card ── */
.ci-main-form-card {
    background: #fff;
    border: 1px solid var(--brand-soft-line);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(164,16,52, 0.05);
    overflow: hidden;
}
.ci-form-body { padding: 24px; }

/* Elegant Form Section Headings */
.ci-section-divider {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px; padding-bottom: 6px;
    border-bottom: 1px dashed var(--brand-soft-line);
}
.ci-section-divider:not(:first-child) { margin-top: 24px; }
.ci-section-icon { color: var(--brand-primary); font-size: 0.95rem; width: 20px; text-align: center; }
.ci-section-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.95rem; font-weight: 800; color: var(--brand-primary); margin: 0; }
.ci-section-subtitle { font-size: 0.72rem; color: var(--text-slate-muted); margin-left: auto; font-weight: 500; }

/* ── Inline Toggle Grid ── */
.ci-toggle-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    background: var(--brand-faint-glow); border: 1px solid var(--brand-soft-line);
    border-radius: 8px; padding: 12px 16px;
}
.ci-toggle-block { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ci-toggle-block:not(:last-child) { border-right: 1px solid var(--brand-soft-line); padding-right: 16px; }
.ci-toggle-info { flex: 1; }
.ci-toggle-label { font-size: .82rem; font-weight: 700; color: var(--text-slate-dark); margin-bottom: 1px; }
.ci-toggle-desc { font-size: .7rem; color: var(--text-slate-muted); line-height: var(--lh-snug); }

/* Custom Condensed Switch */
.ci-switch { position: relative; display: inline-block; width: 36px; height: 18px; flex-shrink: 0; margin-bottom: 0; }
.ci-switch input { opacity: 0; width: 0; height: 0; }
.ci-switch-slider { position: absolute; cursor: pointer; inset: 0; background: #cbd5e1; border-radius: 18px; transition: background .2s; }
.ci-switch-slider::before { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff; left: 3px; top: 3px; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.ci-switch input:checked + .ci-switch-slider { background: linear-gradient(135deg, #A41034, var(--brand-primary)); }
.ci-switch input:checked + .ci-switch-slider::before { transform: translateX(18px); }

/* ── Form Inputs ── */
.ci-label { display:block; font-size:.78rem; font-weight:700; color:var(--brand-primary); margin-bottom:6px; }
.ci-label code { color: var(--accent-error); background: transparent; padding: 0; font-size: var(--fs-xs); }

/* Checkbox/Radio List Matrices */
.ci-checkbox-box-wrapper {
    background: var(--brand-faint-glow); border: 1px solid var(--brand-soft-line);
    border-radius: 8px; padding: 12px; min-height: 95px;
}
.ci-checkbox-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 6px; }
.ci-checkbox-item { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; cursor: pointer; transition: all .2s; margin: 0; }
.ci-checkbox-item:hover { border-color: var(--brand-primary); background: rgba(164, 16, 52, 0.03); }
.ci-checkbox-item input[type="checkbox"],
.ci-checkbox-item input[type="radio"] { width: 13px; height: 13px; accent-color: var(--brand-primary); cursor: pointer; margin: 0; }
.ci-checkbox-item label { font-size:1rem; font-weight: 600; color: var(--text-slate-dark); cursor: pointer; margin: 0; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* Validation Overlays */
.ci-select2-wrap { margin-top: 12px; }
.ci-v-error { border-color: var(--accent-error) !important; background-color: #fff8f8 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important; }
.ci-v-box-error { border-color: var(--accent-error) !important; background-color: #fff8f8 !important; }
.ci-err-msg { display: flex; align-items: center; gap: 4px; color: var(--accent-error); font-size: var(--fs-xs); font-weight: 600; margin-top: 5px; }

/* ── Layout Footer Actions ── */
.ci-actions { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--brand-soft-line); margin-top: 24px; }
.ci-btn-save { display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px; border-radius: 6px; border: none; background: linear-gradient(135deg, #A41034, var(--brand-primary)); color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: 0 4px 12px rgba(164, 16, 52, .15); transition: all .2s; }
.ci-btn-save:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(164, 16, 52, .25); opacity: 0.95; }
.ci-btn-back { display: inline-flex; align-items: center; gap: 5px; padding: 9px 16px; border-radius: 6px; background: #f1f5f9; border: 1px solid #cbd5e1; color: #475569; font-size: .82rem; font-weight: 600; text-decoration: none; transition: all .2s; }
.ci-btn-back:hover { background: #e2e8f0; color: var(--text-slate-dark); text-decoration: none; }

/* Select2 Custom Brand Integration styling overrides */
.select2-container--default .select2-selection--multiple { border: 1px solid #cbd5e1 !important; border-radius: 6px !important; background: var(--brand-faint-glow) !important; min-height: 34px; }
.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--brand-primary) !important; background: #fff !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: rgba(164,16,52, 0.06) !important; border: 1px solid rgba(164,16,52, 0.12) !important; color: var(--brand-primary) !important; font-size: 11px !important; font-weight: 600 !important; margin-top: 4px !important; padding: 2px 6px !important; }

@media (max-width: 991px) {
    .ci-toggle-grid { grid-template-columns: 1fr; gap: 12px; }
    .ci-toggle-block:not(:last-child) { border-right: none; border-bottom: 1px dashed var(--brand-soft-line); padding-right: 0; padding-bottom: 12px; }
}

/* ── frontend/instructor-dashboard/course / finish ── */
.cc4 { font-family:"Plus Jakarta Sans", sans-serif; margin-top: -50px !important; }
.cc4-card { background:#fff; border-radius:16px; border:1px solid #E5E7EB; box-shadow:0 2px 12px rgba(0,0,0,.07); overflow:hidden; margin-bottom:20px; }
.cc4-card-head { padding:20px 24px 16px; border-bottom:1px solid #f0eef8; display:flex; align-items:center; gap:10px; }
.cc4-card-head-icon { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,#A41034,#A41034); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.82rem; flex-shrink:0; box-shadow:0 3px 10px rgba(164,16,52,.3); }
.cc4-card-head-title { font-family:"Plus Jakarta Sans", sans-serif; font-size:.95rem; font-weight:800; color:#0f172a; margin:0; }
.cc4-card-head-sub { font-size:.72rem; color:#9ca3af; margin:2px 0 0; }
.cc4-card-body { padding:28px; }
.cc4-card-body label { font-size:.8rem; font-weight:700; color:#374151; margin-bottom:6px; display:block; letter-spacing:.01em; }
.cc4-card-body .form-control, .cc4-card-body .form-select {
    border:1.5px solid #e2dff0; border-radius:10px; background:#faf9ff; color:#1e1240;
    font-size:.875rem; transition:border-color .2s,box-shadow .2s; outline:none;
}
.cc4-card-body .form-control:focus, .cc4-card-body .form-select:focus {
    border-color:#A41034; box-shadow:0 0 0 3px rgba(164,16,52,.12); background:#fff;
}
.cc4-card-body textarea.form-control { min-height:110px; resize:vertical; }
.cc4-footer { display:flex; align-items:center; justify-content:space-between; padding-top:20px; border-top:1px solid #f0eef8; margin-top:4px; }
.cc4-back-btn { display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:9px; background:#fff; color:#A41034 !important; font-weight:700; font-size:.82rem; border:1.5px solid #E5E7EB; text-decoration:none !important; transition:all .18s; }
.cc4-back-btn:hover { background:#F9FAFB; border-color:#A41034; }
.cc4-save-btn { display:inline-flex; align-items:center; gap:7px; padding:11px 28px; border-radius:10px; background:linear-gradient(135deg,#A41034,#A41034); color:#fff !important; font-weight:700; font-size:.875rem; border:none; cursor:pointer; box-shadow:0 4px 14px rgba(164,16,52,.35); transition:transform .2s,box-shadow .2s; }
.cc4-save-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(164,16,52,.45); }

/* ══════════════════════════════════════════════════════════════
   ANNOUNCEMENT FORM — Premium Executive-Learning Redesign
   Colors: #A41034 · #1C1514 · rgba(0,0,0,0.85) · #FFFFFF
   ══════════════════════════════════════════════════════════════ */
.ann-page { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
.ann-page * { box-sizing: border-box; }

/* ── Page header banner ── */
.ann-header {
    background: #A41034;
    border-radius: 18px;
    padding: 28px 32px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
     
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

/* Scanline texture */
.ann-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255,255,255,.016) 3px,
        rgba(255,255,255,.016) 4px
    );
    pointer-events: none;
}

/* Crimson radial glow */
.ann-header::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(164,16,52,.26) 0%, transparent 65%);
    top: -130px;
    right: 0;
    pointer-events: none;
}

.ann-header__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    background: rgba(164,16,52,.16);
    border: 1px solid rgba(164,16,52,.32);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    position: relative;
    z-index: 1;
}

.ann-header__text { position: relative; z-index: 1; }

.ann-header__eyebrow {
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
    margin-bottom: 5px;
}

.ann-header__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}

.ann-header__sub {
    font-size: .78rem;
    color: rgba(255,255,255,.38);
    margin: 4px 0 0;
}

/* ── Form card ── */
.ann-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #FFFFFF;
    box-shadow:
        0 1px 3px rgba(0,0,0,.05),
        0 8px 24px rgba(0,0,0,.07);
    overflow: hidden;
}

.ann-card-head {
    padding: 20px 26px 18px;
    border-bottom: 1px solid #FFFFFF;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fafaf9;
}

.ann-card-head-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    background: #A41034;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .84rem;
    box-shadow: 0 3px 10px rgba(164,16,52,.28);
}

.ann-card-head-title {
    font-size: .95rem;
    font-weight: 800;
    color: rgb(34,34,34);
    margin: 0;
}

.ann-card-head-sub { font-size: .72rem; color: #a8a09a; margin: 2px 0 0; }

.ann-card-body { padding: 28px 26px; }

/* ── Field groups ── */
.ann-fg { margin-bottom: 22px; }

.ann-label {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 8px;
}

.ann-select {
    width: 100%;
    padding: 11px 15px;
    border: 1.5px solid #FFFFFF;
    border-radius: 10px;
    font-size: .875rem;
    color: rgb(34,34,34);
    background: #fafaf9;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A41034' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.ann-select:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.08);
    background-color: #fff;
}

.ann-input {
    width: 100%;
    padding: 11px 15px;
    border: 1.5px solid #FFFFFF;
    border-radius: 10px;
    font-size: .875rem;
    color: rgb(34,34,34);
    background: #fafaf9;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    font-family: inherit;
}

.ann-input::placeholder { color: #c2bdb6; }

.ann-input:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.08);
    background: #fff;
}

/* ── Editor label ── */
.ann-editor-label {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 8px;
}

/* ── Footer / actions ── */
.ann-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid #FFFFFF;
    margin-top: 6px;
    flex-wrap: wrap;
}

.ann-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    border-radius: 10px;
    border: none;
    background: #A41034;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: .025em;
    box-shadow: 0 4px 16px rgba(164,16,52,.30);
    transition: background .2s, transform .15s, box-shadow .2s;
}

.ann-submit-btn:hover {
    background: #8c0d2a;
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(164,16,52,.40);
    color: #fff;
}

.ann-submit-btn:active { transform: translateY(0); }

.ann-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 22px;
    border-radius: 10px;
    background: #fff;
    border: 1.5px solid #FFFFFF;
    color: #8a8a8a;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}

.ann-back-btn:hover {
    border-color: rgb(34,34,34);
    color: rgb(34,34,34);
    background: #fafaf9;
    text-decoration: none;
}

/* ── frontend/instructor-dashboard/announcement / index ── */

.ia { font-family:"Plus Jakarta Sans", sans-serif; }

/* ── Page Header ── */
.ia-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 28px;
}
.ia-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.7rem; font-weight: 800; color: #1e1240; margin: 0;
    display: flex; align-items: center; gap: 12px;
}
.ia-title::before {
    content: ''; width: 4px; height: 26px; border-radius: 4px;
    background: linear-gradient(to bottom, #f59e0b, #2563eb);
    display: inline-block; flex-shrink: 0;
}
.ia-add-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 24px; border-radius: 10px;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff !important; font-weight: 700; font-size: .85rem;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(245,158,11,.4);
    transition: opacity .2s, transform .2s; border: none;
}
.ia-add-btn:hover { opacity: .9; transform: translateY(-1px); }

/* ── Card ── */
.ia-card {
    background: #fff; border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 6px 24px rgba(0,0,0,.18);
    overflow: hidden;
}

/* ── Table ── */
.ia-card table { margin: 0; }
.ia-card table thead tr {
    background: linear-gradient(135deg, #111827 0%, #1e1240 100%);
    border-bottom: 2px solid #A41034;
}
.ia-card table thead th {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: #A41034;
    padding: 14px 20px; border: none; white-space: nowrap;
}
.ia-card table thead th:first-child { border-radius: 0; }
.ia-card table tbody td {
    font-size: .875rem; color: #374151;
    padding: 14px 20px; border-bottom: 1px solid #f3f4f6;
    vertical-align: middle; border-top: none;
}
.ia-card table tbody tr:last-child td { border-bottom: none; }
.ia-card table tbody tr:hover td { background: #fafafa; }

/* course chip */
.ia-course-chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 100px;
    background: rgba(37,99,235,.08); color: #2563eb;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    margin-bottom: 4px; max-width: 260px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.ia-lesson-chip {
    font-size:1rem; color: #6b7280; font-weight: 500;
}

/* title */
.ia-title-cell { font-weight: 600; color: #111827; }

/* date */
.ia-date { color: #9ca3af; font-size: .8rem; font-weight: 500; }

/* ── Action buttons ── */
.ia-action { display: flex; align-items: center; gap: 8px; }
.ia-btn {
    width: 33px; height: 33px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; text-decoration: none; transition: all .2s;
    border: 1.5px solid;
}
.ia-btn--edit { background: rgba(37,99,235,.07); border-color: rgba(37,99,235,.2); color: #2563eb; }
.ia-btn--edit:hover { background: rgba(37,99,235,.15); border-color: #2563eb; color: #1d4ed8; }
.ia-btn--del { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.2); color: #dc2626; }
.ia-btn--del:hover { background: rgba(239,68,68,.15); border-color: #dc2626; color: #b91c1c; }

/* ── Empty ── */
.ia-empty { padding: 64px 24px; text-align: center; }
.ia-empty__icon {
    width: 64px; height: 64px; border-radius: 16px;
    background: rgba(37,99,235,.08); color: #2563eb;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin: 0 auto 16px;
}
.ia-empty__title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem; font-weight: 800; color: #111827; margin-bottom: 4px; }
.ia-empty__sub { color: #9ca3af; font-size: .875rem; }

/* ── Pagination ── */
.ia-pagination { margin-top: 24px; }
.ia-pagination .pagination { gap: 6px; }
.ia-pagination .page-item .page-link {
    border-radius: 8px !important; border: 1px solid #e5e7eb;
    background: #fff; color: #374151;
    font-weight: 600; font-size: .82rem; padding: 7px 13px; transition: all .2s;
}
.ia-pagination .page-item .page-link:hover {
    background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.3); color: #2563eb;
}
.ia-pagination .page-item.active .page-link {
    background: #A41034 !important;
    border-color: #2563eb !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
}

/* ── frontend/instructor-dashboard/my-sells / index ── */
.ms-page { font-family:"Plus Jakarta Sans", sans-serif; }
.ms-page * { box-sizing:border-box; }

/* ── Header ── */
.ms-header {
    background: #1C1514; 
    border-radius:18px; padding:28px 32px; margin-bottom:26px;
    display:flex; align-items:center; gap:18px;
    position:relative; overflow:hidden;
    box-shadow:0 8px 32px rgba(10,6,24,.45);
}
.ms-header::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); }
.ms-header::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.07),transparent 65%); top:-130px; right:20px; pointer-events:none; }
.ms-header__icon { width:52px; height:52px; border-radius:14px; flex-shrink:0; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; position:relative; z-index:1; }
.ms-header__text { position:relative; z-index:1; }
.ms-header__eyebrow { font-size:1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:4px; }
.ms-header__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1.5rem; font-weight:800; color:#fff; margin:0; letter-spacing:-.02em; }
.ms-header__sub { font-size:.8rem; color:rgba(255,255,255,.45); margin:3px 0 0; }

/* ── Table card ── */
.ms-card { background:#fff; border-radius:16px; border:1px solid #e8eaf2; box-shadow:0 2px 12px rgba(10,6,24,.07); overflow:hidden; }
.ms-card__head { padding:18px 24px 16px; border-bottom:1px solid #f0eef8; display:flex; align-items:center; gap:12px; }
.ms-card__head-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; background:#A41034; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; box-shadow:0 4px 12px rgba(124,82,255,.35); }
.ms-card__head-title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; color:#0f172a; margin:0; }
.ms-card__head-sub { font-size:.75rem; color:#9ca3af; margin:2px 0 0; }

/* ── Table ── */
.ms-table { width:100%; border-collapse:collapse; }
.ms-table thead th { padding:12px 18px; font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#9ca3af; background:#fafafe; border-bottom:1px solid #f0eef8; text-align:left; white-space:nowrap; }
.ms-table tbody td { padding:14px 18px; font-size:.875rem; color:#374151; border-bottom:1px solid #f8f9fc; vertical-align:middle; }
.ms-table tbody tr:last-child td { border-bottom:none; }
.ms-table tbody tr:hover td { background:#faf9ff; }

/* Cell variants */
.ms-num { font-size:.78rem; color:#9ca3af; font-weight:600; }
.ms-title { font-size:.875rem; font-weight:600; color:#0f172a; max-width:260px; }
.ms-title span { display:block; font-size:.75rem; font-weight:400; color:#9ca3af; margin-top:2px; }
.ms-type-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:100px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.ms-type-badge--course  { background:rgba(124,82,255,.08); color:#1C1514; }
.ms-type-badge--lesson  { background:rgba(6,182,212,.08); color:#0891b2; }
.ms-price { font-family:"Plus Jakarta Sans", sans-serif; font-size:.95rem; font-weight:800; color:#0f172a; }
.ms-commission { font-family:"Plus Jakarta Sans", sans-serif; font-size:.88rem; font-weight:700; color:#059669; }
.ms-date { font-size:.78rem; color:#9ca3af; white-space:nowrap; }

/* Empty */
.ms-empty { padding:60px 24px; text-align:center; }
.ms-empty__icon { width:60px; height:60px; border-radius:16px; background:linear-gradient(135deg,rgba(124,82,255,.1),rgba(155,81,224,.08)); border:1px solid rgba(124,82,255,.15); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#1C1514; margin:0 auto 14px; }
.ms-empty__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; color:#111827; margin-bottom:4px; }
.ms-empty__sub { font-size:.82rem; color:#9ca3af; }

/* Pagination */
.ms-pagination { padding:16px 20px; border-top:1px solid #f0eef8; }
.ms-pagination .pagination { gap:4px; margin:0; }
.ms-pagination .page-item .page-link { border-radius:8px!important; border:1px solid #e5e7eb; background:#fff; color:#374151; font-weight:600; font-size:.8rem; padding:7px 12px; transition:all .2s; }
.ms-pagination .page-item .page-link:hover { background:rgba(124,82,255,.06); border-color:rgba(124,82,255,.3); color:#1C1514; }
.ms-pagination .page-item.active .page-link { background:linear-gradient(135deg,#1C1514,#9b51e0)!important; border-color:#1C1514!important; color:#fff!important; box-shadow:0 4px 12px rgba(124,82,255,.4); }

/* ── frontend/instructor-dashboard/review / index ── */

.ir { font-family:"Plus Jakarta Sans", sans-serif; }

/* ── Page Header ── */
.ir-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 28px;
}
.ir-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.7rem; font-weight: 800; color: #1e1240; margin: 0;
    display: flex; align-items: center; gap: 12px;
}
.ir-title::before {
    content: ''; width: 4px; height: 26px; border-radius: 4px;
    background: linear-gradient(to bottom, #f59e0b, #2563eb);
    display: inline-block; flex-shrink: 0;
}

/* ── Card ── */
.ir-card {
    background: #fff; border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 6px 24px rgba(0,0,0,.18);
    overflow: hidden;
}

/* ── Table ── */
.ir-card table { margin: 0; }
.ir-card table thead tr {
    background: linear-gradient(135deg, #111827 0%, #1e1240 100%);
    border-bottom: 2px solid #A41034;
}
.ir-card table thead th {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: #A41034;
    padding: 14px 18px; border: none; white-space: nowrap;
}
.ir-card table tbody td {
    font-size: .875rem; color: #374151;
    padding: 14px 18px; border-bottom: 1px solid #f3f4f6;
    vertical-align: middle; border-top: none;
}
.ir-card table tbody tr:last-child td { border-bottom: none; }
.ir-card table tbody tr:hover td { background: #fafafa; }

/* course title */
.ir-course { font-weight: 600; color: #111827; font-size: .875rem; }
.ir-lesson { font-size:1rem; color: #6b7280; margin-top: 2px; }

/* type badge */
.ir-type {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 100px;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em;
}
.ir-type--course { background: rgba(37,99,235,.08); color: #2563eb; }
.ir-type--lesson  { background: rgba(6,182,212,.1);  color: #0891b2; }

/* stars */
.ir-stars { display: flex; align-items: center; gap: 2px; }
.ir-stars i { color: #f59e0b; font-size: .72rem; }
.ir-stars i.empty { color: #e5e7eb; }

/* review text */
.ir-review { color: #6b7280; font-size: .82rem; max-width: 200px; }

/* user */
.ir-user { font-weight: 600; color: #374151; font-size: .85rem; }

/* status badge */
.ir-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 12px; border-radius: 100px;
    font-size: .72rem; font-weight: 700;
}
.ir-badge--approved { background: #d1fae5; color: #065f46; }
.ir-badge--pending  { background: #fef3c7; color: #92400e; }

/* ── Action buttons ── */
.ir-action { display: flex; align-items: center; gap: 8px; }
.ir-btn {
    width: 33px; height: 33px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; text-decoration: none; transition: all .2s; border: 1.5px solid;
}
.ir-btn--approve { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.2); color: #059669; }
.ir-btn--approve:hover { background: rgba(16,185,129,.15); border-color: #059669; }
.ir-btn--del { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.2); color: #dc2626; }
.ir-btn--del:hover { background: rgba(239,68,68,.15); border-color: #dc2626; color: #b91c1c; }

/* ── Empty ── */
.ir-empty { padding: 64px 24px; text-align: center; }
.ir-empty__icon {
    width: 64px; height: 64px; border-radius: 16px;
    background: rgba(245,158,11,.08); color: #f59e0b;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin: 0 auto 16px;
}
.ir-empty__title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem; font-weight: 800; color: #111827; margin-bottom: 4px; }
.ir-empty__sub { color: #9ca3af; font-size: .875rem; }

/* ── Pagination ── */
.ir-pagination { margin-top: 24px; }
.ir-pagination .pagination { gap: 6px; }
.ir-pagination .page-item .page-link {
    border-radius: 8px !important; border: 1px solid #e5e7eb;
    background: #fff; color: #374151;
    font-weight: 600; font-size: .82rem; padding: 7px 13px; transition: all .2s;
}
.ir-pagination .page-item .page-link:hover {
    background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.3); color: #2563eb;
}
.ir-pagination .page-item.active .page-link {
    background: #A41034 !important;
    border-color: #2563eb !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
}

/* ── frontend/instructor-dashboard/lesson-qna / index ── */

.iq { font-family:"Plus Jakarta Sans", sans-serif; }

/* ── Page Header ── */
.iq-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 24px;
}
.iq-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.7rem; font-weight: 800; color: #1e1240; margin: 0;
    display: flex; align-items: center; gap: 12px;
}
.iq-title::before {
    content: ''; width: 4px; height: 26px; border-radius: 4px;
    background: linear-gradient(to bottom, #f59e0b, #2563eb);
    display: inline-block; flex-shrink: 0;
}

/* ── Filter bar ── */
.iq-filters {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 12px; padding: 12px 16px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.iq-filters label { color: #6b7280; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.iq-filters select {
    background: #f9fafb; border: 1px solid #e5e7eb;
    color: #374151; border-radius: 8px; padding: 7px 32px 7px 12px;
    font-size: .82rem; font-weight: 500; outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    transition: border-color .2s;
}
.iq-filters select:focus { border-color: #2563eb; }

/* ── QnA Card ── */
.iq-qna {
    background: #fff; border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 4px 20px rgba(0,0,0,.14);
    overflow: hidden; margin-bottom: 20px;
    border-left: 4px solid #e5e7eb;
    transition: border-color .2s, box-shadow .25s;
}
.iq-qna--unread { border-left-color: #f59e0b; }
.iq-qna:hover { box-shadow: 0 4px 16px rgba(37,99,235,.12), 0 8px 32px rgba(0,0,0,.16); }

/* ── Card Header ── */
.iq-qna__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #f8f9ff 0%, #f3f4f6 100%);
    border-bottom: 1px solid #f0f0f5;
}
.iq-qna__head-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* read/unread checkbox */
.iq-check {
    width: 18px; height: 18px; border-radius: 5px; cursor: pointer;
    accent-color: #f59e0b; flex-shrink: 0;
}

/* course info */
.iq-thumb {
    width: 40px; height: 40px; border-radius: 8px; object-fit: cover;
    border: 2px solid #e5e7eb; flex-shrink: 0;
}
.iq-course-info { display: flex; flex-direction: column; }
.iq-course-name {
    font-weight: 700; font-size: .82rem; color: #111827; line-height: var(--lh-snug);
}
.iq-lesson-name { font-size:1rem; color: #6b7280; margin-top: 1px; }
.iq-lesson-name i { font-size: .65rem; color: #9ca3af; margin-right: 3px; }

/* unread dot */
.iq-unread-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245,158,11,.5);
    flex-shrink: 0;
}

/* delete btn */
.iq-del-btn {
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(239,68,68,.07); border: 1.5px solid rgba(239,68,68,.2);
    color: #dc2626; font-size:1rem; text-decoration: none; transition: all .2s;
    flex-shrink: 0;
}
.iq-del-btn:hover { background: rgba(239,68,68,.15); border-color: #dc2626; color: #b91c1c; }

/* ── Question body ── */
.iq-qna__body { padding: 20px; }

.iq-question { margin-bottom: 16px; }
.iq-question__user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.iq-avatar {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    border: 2px solid #e5e7eb; flex-shrink: 0;
}
.iq-user-name { font-weight: 700; font-size: .85rem; color: #111827; }
.iq-user-date { font-size: .72rem; color: #9ca3af; }
.iq-question__title {
    font-weight: 700; font-size: 1rem; color: #111827; margin-bottom: 8px;
    line-height: var(--lh-snug);
}
.iq-question__body { color: #6b7280; font-size: .875rem; line-height: var(--lh-normal); }
.iq-question__body p { margin-bottom: 6px; }

/* reply count */
.iq-reply-count {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 100px;
    background: rgba(37,99,235,.07); color: #2563eb;
    font-size:1rem; font-weight: 700; margin: 4px 0 16px;
}

/* ── Replies ── */
.iq-replies { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.iq-reply {
    background: #f8f9ff; border-radius: 10px;
    padding: 14px 16px; border-left: 3px solid rgba(37,99,235,.2);
}
.iq-reply__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.iq-reply__user { display: flex; align-items: center; gap: 8px; }
.iq-reply__body { color: #374151; font-size: .875rem; line-height: var(--lh-normal); }
.iq-reply__body p { margin-bottom: 0; }

/* no replies */
.iq-no-replies { text-align: center; color: #d1d5db; font-size: .82rem; padding: 12px 0; }

/* ── Reply form ── */
.iq-reply-form {
    border-top: 1px solid #f0f0f5; padding: 16px 20px;
    background: #fafafa;
}
.iq-reply-form textarea.preview {
    width: 100%; border-radius: 10px; padding: 12px 16px;
    border: 1.5px solid #e5e7eb; font-size: .875rem; color: #374151;
    resize: none; outline: none; transition: border-color .2s;
    background: #fff; font-family:"Plus Jakarta Sans", sans-serif;
    cursor: pointer; min-height: 44px;
}
.iq-reply-form textarea.preview:focus { border-color: #2563eb; }
.iq-reply-form .editor-wrap { margin-top: 10px; }
.iq-reply-form .editor-wrap textarea { width: 100%; }
.iq-reply-form .editor-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.iq-submit-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 20px; border-radius: 9px;
    background: linear-gradient(135deg, #1e1240, #2563eb);
    color: #fff; font-weight: 700; font-size: .82rem; border: none;
    box-shadow: 0 4px 12px rgba(30,18,64,.3); cursor: pointer; transition: all .2s;
}
.iq-submit-btn:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); transform: translateY(-1px); }
.iq-close-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 9px;
    background: transparent; color: #6b7280; font-weight: 600;
    font-size: .82rem; border: 1.5px solid #e5e7eb; cursor: pointer; transition: all .2s;
}
.iq-close-btn:hover { background: #f3f4f6; color: #374151; }

/* ── Empty state ── */
.iq-empty {
    background: #fff; border-radius: 16px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 6px 24px rgba(0,0,0,.18);
}
.iq-empty__icon {
    width: 72px; height: 72px; border-radius: 18px;
    background: rgba(37,99,235,.08); color: #2563eb;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin: 0 auto 18px;
}
.iq-empty__title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 6px; }
.iq-empty__sub { color: #9ca3af; font-size: .875rem; }

/* ── Validation ── */
.iq-v-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
    background: #fff8f8 !important;
}
.iq-err-msg {
    display: flex; align-items: center; gap: 5px;
    color: #dc2626; font-size: var(--fs-xs); font-weight: 600; margin-top: 8px;
}
.iq-err-msg i { font-size: 10px; }

/* ── Pagination ── */
.iq-pagination { margin-top: 24px; }
.iq-pagination .pagination { gap: 6px; }
.iq-pagination .page-item .page-link {
    border-radius: 8px !important; border: 1px solid #e5e7eb;
    background: #fff; color: #374151;
    font-weight: 600; font-size: .82rem; padding: 7px 13px; transition: all .2s;
}
.iq-pagination .page-item .page-link:hover {
    background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.3); color: #2563eb;
}
.iq-pagination .page-item.active .page-link {
    background: #A41034 !important;
    border-color: #2563eb !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
}

/* ── frontend/instructor-dashboard/payout / index ── */
.po-page { font-family:"Plus Jakarta Sans", sans-serif; }
.po-page * { box-sizing:border-box; }

/* ── Header ── */
.po-header {
    background: #A41034; 
    border-radius:18px; padding:28px 32px; margin-bottom:26px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
    position:relative; overflow:hidden;
    box-shadow:0 8px 32px rgba(10,6,24,.45);
}
.po-header::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); }
.po-header::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.07),transparent 65%); top:-130px; right:20px; pointer-events:none; }
.po-header__left { display:flex; align-items:center; gap:18px; position:relative; z-index:1; }
.po-header__icon { width:52px; height:52px; border-radius:14px; flex-shrink:0; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; }
.po-header__eyebrow { font-size:1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:4px; }
.po-header__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1.5rem; font-weight:800; color:#fff; margin:0; letter-spacing:-.02em; }
.po-header__sub { font-size:.8rem; color:rgba(255,255,255,.45); margin:3px 0 0; }
.po-header__right { position:relative; z-index:1; }
.po-request-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 24px; border-radius:11px;
    background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.25);
    color:#fff; font-size:.875rem; font-weight:700;
    text-decoration:none; transition:all .2s;
}
.po-request-btn:hover { background:rgba(255,255,255,.2); color:#fff; transform:translateY(-1px); }

/* ── Stat chips ── */
.po-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:26px; }
@media(max-width:767px){ .po-stats{ grid-template-columns:1fr; } }
.po-stat {
    background:#fff; border-radius:16px;
    border:1px solid #e8eaf2; border-left:4px solid;
    padding:22px 22px; display:flex; align-items:center; gap:16px;
    box-shadow:0 2px 10px rgba(10,6,24,.06);
    transition:transform .2s, box-shadow .2s;
}
.po-stat:hover { transform:translateY(-2px); }
.po-stat--balance { border-left-color:#1C1514; }
.po-stat--sold    { border-left-color:#06b6d4; }
.po-stat--payout  { border-left-color:#10b981; }
.po-stat__icon { width:46px; height:46px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.po-stat--balance .po-stat__icon { background:rgba(124,82,255,.1); color:#1C1514; }
.po-stat--sold    .po-stat__icon { background:rgba(6,182,212,.1); color:#06b6d4; }
.po-stat--payout  .po-stat__icon { background:rgba(16,185,129,.1); color:#10b981; }
.po-stat__val { font-family:"Plus Jakarta Sans", sans-serif; font-size:1.6rem; font-weight:800; color:#0f172a; line-height:1; margin-bottom:4px; }
.po-stat__lbl { font-size:.7rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#9ca3af; }

/* ── Table card ── */
.po-card { background:#fff; border-radius:16px; border:1px solid #e8eaf2; box-shadow:0 2px 12px rgba(10,6,24,.07); overflow:hidden; }
.po-card__head { padding:18px 24px 16px; border-bottom:1px solid #f0eef8; display:flex; align-items:center; gap:12px; }
.po-card__head-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; background:#A41034; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; box-shadow:0 4px 12px rgba(124,82,255,.35); }
.po-card__head-title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; color:#0f172a; margin:0; }
.po-card__head-sub { font-size:.75rem; color:#9ca3af; margin:2px 0 0; }

/* ── Table ── */
.po-table { width:100%; border-collapse:collapse; }
.po-table thead th {
    padding:12px 18px; font-size:.72rem; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase; color:#9ca3af;
    background:#fafafe; border-bottom:1px solid #f0eef8; text-align:left;
}
.po-table tbody td {
    padding:14px 18px; font-size:.875rem; color:#374151;
    border-bottom:1px solid #f8f9fc; vertical-align:middle;
}
.po-table tbody tr:last-child td { border-bottom:none; }
.po-table tbody tr:hover td { background:#faf9ff; }
.po-amount { font-family:"Plus Jakarta Sans", sans-serif; font-weight:700; color:#0f172a; font-size:.95rem; }
.po-method { font-size:.82rem; font-weight:600; color:#6b7280; }
.po-date { font-size:.8rem; color:#9ca3af; }

/* Badges */
.po-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:100px; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.po-badge--approved { background:#d1fae5; color:#065f46; }
.po-badge--pending  { background:#fef3c7; color:#92400e; }
.po-badge--rejected { background:#fee2e2; color:#991b1b; }
.po-badge i { font-size:.6rem; }

/* Delete btn */
.po-del-btn { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(239,68,68,.07); border:1.5px solid rgba(239,68,68,.2); color:#dc2626; text-decoration:none; transition:all .2s; }
.po-del-btn:hover { background:#dc2626; border-color:#dc2626; color:#fff; }

/* Empty */
.po-empty { padding:60px 24px; text-align:center; }
.po-empty__icon { width:60px; height:60px; border-radius:16px; background:linear-gradient(135deg,rgba(124,82,255,.1),rgba(155,81,224,.08)); border:1px solid rgba(124,82,255,.15); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#1C1514; margin:0 auto 14px; }
.po-empty__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; color:#111827; margin-bottom:4px; }
.po-empty__sub { font-size:.82rem; color:#9ca3af; }

/* Pagination */
.po-pagination { padding:16px 20px; border-top:1px solid #f0eef8; }
.po-pagination .pagination { gap:4px; margin:0; }
.po-pagination .page-item .page-link { border-radius:8px!important; border:1px solid #e5e7eb; background:#fff; color:#374151; font-weight:600; font-size:.8rem; padding:7px 12px; transition:all .2s; }
.po-pagination .page-item .page-link:hover { background:rgba(124,82,255,.06); border-color:rgba(124,82,255,.3); color:#1C1514; }
.po-pagination .page-item.active .page-link { background:linear-gradient(135deg,#1C1514,#9b51e0)!important; border-color:#1C1514!important; color:#fff!important; box-shadow:0 4px 12px rgba(124,82,255,.4); }

/* ── frontend/instructor-dashboard/payout / create ── */
.pc-page { font-family:"Plus Jakarta Sans", sans-serif; }
.pc-page * { box-sizing:border-box; }

/* ── Header ── */
.pc-header {
    background: #A41034; 
    border-radius:18px; padding:28px 32px; margin-bottom:26px;
    display:flex; align-items:center; gap:18px;
    position:relative; overflow:hidden;
    box-shadow:0 8px 32px rgba(10,6,24,.45);
}
.pc-header::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); }
.pc-header::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.07),transparent 65%); top:-130px; right:20px; pointer-events:none; }
.pc-header__icon { width:52px; height:52px; border-radius:14px; flex-shrink:0; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; position:relative; z-index:1; }
.pc-header__text { position:relative; z-index:1; }
.pc-header__eyebrow { font-size:1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:4px; }
.pc-header__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1.5rem; font-weight:800; color:#fff; margin:0; letter-spacing:-.02em; }
.pc-header__sub { font-size:.8rem; color:rgba(255,255,255,.45); margin:3px 0 0; }

/* ── Stats row ── */
.pc-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:26px; }
@media(max-width:767px){ .pc-stats{ grid-template-columns:1fr; } }
.pc-stat { background:#fff; border-radius:16px; border:1px solid #e8eaf2; border-left:4px solid; padding:18px 20px; display:flex; align-items:center; gap:14px; box-shadow:0 2px 10px rgba(10,6,24,.06); }
.pc-stat--balance { border-left-color:#1C1514; }
.pc-stat--sold    { border-left-color:#06b6d4; }
.pc-stat--paid    { border-left-color:#10b981; }
.pc-stat__icon { width:42px; height:42px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.pc-stat--balance .pc-stat__icon { background:rgba(124,82,255,.1); color:#1C1514; }
.pc-stat--sold    .pc-stat__icon { background:rgba(6,182,212,.1); color:#06b6d4; }
.pc-stat--paid    .pc-stat__icon { background:rgba(16,185,129,.1); color:#10b981; }
.pc-stat__val { font-family:"Plus Jakarta Sans", sans-serif; font-size:1.4rem; font-weight:800; color:#0f172a; line-height:1; margin-bottom:3px; }
.pc-stat__lbl { font-size:.68rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#9ca3af; }

/* ── Notice ── */
.pc-notice { background:#faf5ff; border:1px solid #e9d5ff; border-left:4px solid #1C1514; border-radius:12px; padding:14px 18px; display:flex; gap:12px; align-items:flex-start; margin-bottom:24px; }
.pc-notice i { color:#1C1514; margin-top:2px; flex-shrink:0; }
.pc-notice p { font-size:.84rem; color:#4a1d96; margin:0; line-height:1.55; }
.pc-notice a { color:#1C1514; font-weight:600; }

/* ── Cards layout ── */
.pc-grid { display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }
@media(max-width:991px){ .pc-grid{ grid-template-columns:1fr; } }

/* ── Gateway info card ── */
.pc-info-card { background:#fff; border-radius:16px; border:1px solid #e8eaf2; box-shadow:0 2px 12px rgba(10,6,24,.07); overflow:hidden; }
.pc-card-head { padding:18px 24px 16px; border-bottom:1px solid #f0eef8; display:flex; align-items:center; gap:12px; }
.pc-card-head-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; background: #A41034; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; box-shadow:0 4px 12px rgba(124,82,255,.35); }
.pc-card-head-title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; color:#0f172a; margin:0; }
.pc-card-head-sub { font-size:.75rem; color:#9ca3af; margin:2px 0 0; }
.pc-info-row { display:flex; align-items:baseline; justify-content:space-between; padding:14px 24px; border-bottom:1px solid #f8f9fc; gap:16px; }
.pc-info-row:last-child { border-bottom:none; }
.pc-info-label { font-size:.78rem; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:.05em; flex-shrink:0; }
.pc-info-val { font-size:.9rem; font-weight:700; color:#0f172a; text-align:right; }
.pc-info-val.highlight { color:#1C1514; font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; }
.pc-info-account { display:inline-flex; align-items:center; gap:6px; background:#f3f0ff; color:#A41034; padding:4px 12px; border-radius:100px; font-size:.78rem; font-weight:700; }
.pc-info-account i { font-size:.68rem; }

/* ── Form card ── */
.pc-form-card { background:#fff; border-radius:16px; border:1px solid #e8eaf2; box-shadow:0 2px 12px rgba(10,6,24,.07); overflow:hidden; }
.pc-form-body { padding:24px; }
.pc-form-group { margin-bottom:20px; }
.pc-label { display:block; font-size:.78rem; font-weight:700; color:#374151; margin-bottom:7px; }
.pc-input { width:100%; padding:12px 16px; border:1.5px solid #e5e7eb; border-radius:10px; font-size:1rem; color:#111827; background:#fafafa; transition:border-color .2s, box-shadow .2s; outline:none; font-family:"Plus Jakarta Sans", sans-serif; font-weight:700; }
.pc-input:focus { border-color:#1C1514; box-shadow:0 0 0 3px rgba(124,82,255,.12); background:#fff; }
.pc-input-hint { font-size:.72rem; color:#9ca3af; margin-top:5px; display:flex; gap:8px; flex-wrap:wrap; }
.pc-input-hint span { background:#f3f0ff; color:#1C1514; padding:2px 8px; border-radius:5px; font-weight:600; }
.pc-submit-btn { width:100%; padding:13px; border-radius:11px; border:none; background: #A41034; color:#fff; font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; cursor:pointer; box-shadow:0 4px 18px rgba(124,82,255,.45); transition:transform .2s, box-shadow .2s; display:flex; align-items:center; justify-content:center; gap:9px; }
.pc-submit-btn:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(124,82,255,.55); }
.pc-back-link { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color:#1C1514; text-decoration:none; margin-top:16px; }
.pc-back-link:hover { color:#9b51e0; }

/* ── Info box ── */
.pc-info-text { background:#fafafe; border:1px solid #ede9ff; border-radius:10px; padding:14px 16px; font-size:.82rem; color:#4a1d96; line-height: var(--lh-normal); margin-top:4px; }

/* ── frontend/instructor-dashboard/zoom / index ── */
.ls-page { font-family:"Plus Jakarta Sans", sans-serif;}
.ls-page * { box-sizing:border-box; }

/* ── Page header ── */
.ls-header {
    background: #1C1514; 
    border-radius: 18px;
    padding: 28px 32px;
    margin-bottom: 26px;
    display: flex; align-items: center; gap: 18px;
    position: relative; overflow: hidden;
    box-shadow: 0 8px 32px rgba(10,6,24,.45);
}
.ls-header::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
.ls-header::after {
    content:''; position:absolute; width:300px; height:300px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,255,255,.07), transparent 65%);
    top:-130px; right:20px; pointer-events:none;
}
.ls-header__icon {
    width:52px; height:52px; border-radius:14px; flex-shrink:0;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.3rem; position:relative; z-index:1;
}
.ls-header__text { position:relative; z-index:1; }
.ls-header__eyebrow {
    font-size:1rem; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:4px;
}
.ls-header__title {
    font-family:"Plus Jakarta Sans", sans-serif; font-size:1.5rem;
    font-weight:800; color:#fff; margin:0; letter-spacing:-.02em;
}
.ls-header__sub { font-size:.8rem; color:rgba(255,255,255,.45); margin:3px 0 0; }

/* ── Card ── */
.ls-card {
    background:#fff; border-radius:16px;
    border:1px solid #e8eaf2;
    box-shadow:0 2px 12px rgba(10,6,24,.07);
    overflow:hidden;
}
.ls-card__head {
    padding:18px 24px 16px;
    border-bottom:1px solid #f0eef8;
    display:flex; align-items:center; gap:12px;
}
.ls-card__head-icon {
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    background: #A41034;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:.85rem;
    box-shadow:0 4px 12px rgba(124,82,255,.35);
}
.ls-card__head-title {
    font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem;
    font-weight:800; color:#0f172a; margin:0;
}
.ls-card__head-sub { font-size:.75rem; color:#9ca3af; margin:2px 0 0; }
.ls-card__body { padding:24px; }

/* ── Form ── */
.ls-form-group { margin-bottom:20px; }
.ls-label {
    display:block; font-size:.78rem; font-weight:700;
    color:#374151; margin-bottom:7px; letter-spacing:.01em;
}
.ls-label code {
    background:#f3f0ff; color:#1C1514; padding:1px 6px;
    border-radius:5px; font-size:.82em;
    border:1px solid rgba(124,82,255,.2);
}
.ls-input {
    width:100%; padding:10px 14px;
    border:1.5px solid #e5e7eb; border-radius:10px;
    font-size:.875rem; color:#111827; background:#fafafa;
    transition:border-color .2s, box-shadow .2s;
    outline:none; font-family:inherit;
}
.ls-input:focus {
    border-color:#1C1514;
    box-shadow:0 0 0 3px rgba(124,82,255,.12);
    background:#fff;
}
.ls-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 28px; border-radius:10px; border:none;
    background: #A41034;
    color:#fff; font-size:.875rem; font-weight:700;
    cursor:pointer; font-family:inherit;
    box-shadow:0 4px 16px rgba(124,82,255,.4);
    transition:transform .2s, box-shadow .2s;
}
.ls-btn:hover {color: #FFFFFF; transform:translateY(-1px); box-shadow:0 6px 20px rgba(124,82,255,.5); }

/* ── Guide card ── */
.ls-guide {
    background: #1C1514;
    border-radius:16px; border:1px solid rgba(124,82,255,.25);
    padding:24px;
    box-shadow:0 4px 20px rgba(10,6,24,.3);
}
.ls-guide__title {
    font-family:"Plus Jakarta Sans", sans-serif; font-size:.95rem;
    font-weight:800; color:#fff; margin:0 0 16px;
    display:flex; align-items:center; gap:10px;
}
.ls-guide__title i { color:#A41034; }
.ls-guide__step {
    display:flex; gap:12px; margin-bottom:14px; align-items:flex-start;
}
.ls-guide__step:last-child { margin-bottom:0; }
.ls-guide__num {
    width:24px; height:24px; border-radius:50%; flex-shrink:0;
    background: linear-gradient(135deg,#1C1514,#9b51e0);
    color:#fff; font-size:.72rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    margin-top:2px;
}
.ls-guide__text { font-size:.84rem; color:#FFFFFF; line-height:1.55; }
.ls-guide__text a { color:#FFFFFF; font-weight:600; text-decoration:none; }
.ls-guide__text a:hover { color:#FFFFFF; text-decoration:underline; }
.ls-guide__text b { color:#FFFFFF; font-weight:600; }

/* ── frontend/instructor-dashboard/jitsi / index ── */
.ls-page { font-family:"Plus Jakarta Sans", sans-serif; }
.ls-page * { box-sizing:border-box; }
.ls-header {
    background: #1C1514; 
    border-radius:18px; padding:28px 32px; margin-bottom:26px;
    display:flex; align-items:center; gap:18px;
    position:relative; overflow:hidden;
    box-shadow:0 8px 32px rgba(10,6,24,.45);
}
.ls-header::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); }
.ls-header::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.07),transparent 65%); top:-130px; right:20px; pointer-events:none; }
.ls-header__icon { width:52px; height:52px; border-radius:14px; flex-shrink:0; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; position:relative; z-index:1; }
.ls-header__text { position:relative; z-index:1; }
.ls-header__eyebrow { font-size:1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:4px; }
.ls-header__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1.5rem; font-weight:800; color:#fff; margin:0; letter-spacing:-.02em; }
.ls-header__sub { font-size:.8rem; color:rgba(255,255,255,.45); margin:3px 0 0; }
.ls-card { background:#fff; border-radius:16px; border:1px solid #e8eaf2; box-shadow:0 2px 12px rgba(10,6,24,.07); overflow:hidden; }
.ls-card__head { padding:18px 24px 16px; border-bottom:1px solid #f0eef8; display:flex; align-items:center; gap:12px; }
.ls-card__head-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; background:#A41034; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; box-shadow:0 4px 12px rgba(124,82,255,.35); }
.ls-card__head-title { font-family:"Plus Jakarta Sans", sans-serif; font-size:1rem; font-weight:800; color:#0f172a; margin:0; }
.ls-card__head-sub { font-size:.75rem; color:#9ca3af; margin:2px 0 0; }
.ls-card__body { padding:24px; }
.ls-form-group { margin-bottom:20px; }
.ls-label { display:block; font-size:.78rem; font-weight:700; color:#374151; margin-bottom:7px; letter-spacing:.01em; }
.ls-label code { background:#f3f0ff; color:#1C1514; padding:1px 6px; border-radius:5px; font-size:.82em; border:1px solid rgba(124,82,255,.2); }
.ls-input { width:100%; padding:10px 14px; border:1.5px solid #e5e7eb; border-radius:10px; font-size:.875rem; color:#111827; background:#fafafa; transition:border-color .2s, box-shadow .2s; outline:none; font-family:inherit; }
.ls-input:focus { border-color:#1C1514; box-shadow:0 0 0 3px rgba(124,82,255,.12); background:#fff; }
.ls-file-input {
    width:100%; padding:10px 14px;
    border:1.5px dashed #FFFFFF; border-radius:10px;
    font-size:.875rem; color:#374151; background:#f8f5ff;
    cursor:pointer; font-family:inherit;
    transition:border-color .2s, background .2s;
}
.ls-file-input:hover { border-color:#1C1514; background:#f3f0ff; }
.ls-file-hint { font-size:.72rem; color:#9ca3af; margin-top:5px; }
.ls-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 28px; border-radius:10px; border:none; background:#A41034; color:#fff; font-size:.875rem; font-weight:700; cursor:pointer; font-family:inherit; box-shadow:0 4px 16px rgba(124,82,255,.4); transition:transform .2s, box-shadow .2s; }
.ls-btn:hover {color: #FFFFFF; transform:translateY(-1px); box-shadow:0 6px 20px rgba(124,82,255,.5); }
.ls-guide { background: #1C1514; border-radius:16px; border:1px solid rgba(124,82,255,.25); padding:24px; box-shadow:0 4px 20px rgba(10,6,24,.3); }
.ls-guide__title { font-family:"Plus Jakarta Sans", sans-serif; font-size:.95rem; font-weight:800; color:#fff; margin:0 0 16px; display:flex; align-items:center; gap:10px; }
.ls-guide__title i { color:#A41034; }
.ls-guide__step { display:flex; gap:12px; margin-bottom:14px; align-items:flex-start; }
.ls-guide__step:last-child { margin-bottom:0; }
.ls-guide__num { width:24px; height:24px; border-radius:50%; flex-shrink:0; background: #A41034; color:#fff; font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.ls-guide__text { font-size:.84rem; color:#FFFFFF; line-height:1.55; }
.ls-guide__text a { color:#FFFFFF; font-weight:600; text-decoration:none; }
.ls-guide__text a:hover { color:#FFFFFF; text-decoration:underline; }
.ls-guide__text b { color:#FFFFFF; font-weight:600; }

/* ── frontend/student-dashboard/enrolled-courses / index ── */

/* ── Page header ── */
.ec-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.ec-header-left h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.ec-header-left p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.ec-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.6); font-size: .78rem; font-weight: 600;
}
.ec-count-pill strong { color: #FFFFFF; font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; }

/* ── Summary bar ── */
.ec-summary {
    display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}

.ec-sum-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 10px;
    background: #1C1514; border: 1px solid #1C1514;
    font-size: .8rem; color: #FFFFFF; font-weight: 500;
}

.ec-sum-chip strong { color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; }
.ec-sum-chip i { font-size: .78rem; }
/* Brand Burgundy / Dark Crimson */
.ec-sum-chip--purple { 
    border-color: rgba(164, 16, 52, 0.2); 
    background: #2a161a; /* Dark charcoal with a faint burgundy undertone */
}
.ec-sum-chip--purple i, 
.ec-sum-chip--purple strong { 
    color: #e5466c; 
}

/* Deep Emerald Green */
.ec-sum-chip--green { 
    border-color: rgba(52, 211, 153, 0.15);  
    background: #192621; /* Muted dark forest tint */
}
.ec-sum-chip--green i, 
.ec-sum-chip--green strong { 
    color: #a7f3d0; /* Softened pale green to prevent harsh glowing text */
}

/* Deep Ocean Cyan */
.ec-sum-chip--cyan { 
    border-color: rgba(34, 211, 238, 0.15);   
    background: #162529; /* Deep, muted slate cyan tint */
}
.ec-sum-chip--cyan i, 
.ec-sum-chip--cyan strong { 
    color: #bae6fd; /* Softened pale blue-cyan for seamless legibility */
}

/* ── Grid ── */
.ec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1199px) { .ec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .ec-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.ec-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
    transition: transform .25s, box-shadow .25s;
    position: relative;
}
.ec-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(164,16,52,.16), 0 16px 48px rgba(0,0,0,.22);
}
.ec-card--complete { box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(16,185,129,.12); }
.ec-card--complete:hover { box-shadow: 0 8px 24px rgba(16,185,129,.2), 0 16px 48px rgba(0,0,0,.2); }

/* ── Thumbnail ── */
.ec-thumb {
    position: relative; overflow: hidden;
    aspect-ratio: 16/9; flex-shrink: 0;
}
.ec-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s;
}
.ec-card:hover .ec-thumb img { transform: scale(1.06); }

/* Category badge */
.ec-cat-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .68rem; font-weight: 700;
    background: rgba(10,6,24,.72); color: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    max-width: calc(100% - 60px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Completion % badge */
.ec-pct-badge {
    position: absolute; top: 10px; right: 10px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .72rem; font-weight: 800;
    backdrop-filter: blur(8px);
}
.ec-pct-badge--progress { background: #1C1514; color: #FFFFFF; }
.ec-pct-badge--done     { background: #A41034; color: #FFFFFF; }

/* Play overlay */
.ec-thumb-overlay {
    position: absolute; inset: 0;
    background: rgba(10,6,24,.38);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s;
}
.ec-card:hover .ec-thumb-overlay { opacity: 1; }
.ec-play-btn {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    color: #A41034; font-size: 1.1rem;
    transform: scale(.8); transition: transform .28s;
}
.ec-card:hover .ec-play-btn { transform: scale(1); }

/* ── Progress bar (on thumb bottom) ── */
.ec-thumb-progress {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 4px; background: rgba(255,255,255,.2);
}
.ec-thumb-progress-fill {
    height: 100%; border-radius: 0 2px 2px 0;
    transition: width .6s ease;
}
.ec-thumb-progress-fill--active   { background: linear-gradient(90deg, #A41034, #FFFFFF); }
.ec-thumb-progress-fill--complete  { background: linear-gradient(90deg, #10b981, #6ee7b7); }

/* ── Body ── */
.ec-body { padding: 16px 18px 12px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.ec-title {
    font-size: .95rem; font-weight: 700; color: #111827; line-height: var(--lh-snug);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-decoration: none; transition: color .2s;
}
.ec-title:hover { color: #A41034; }

.ec-instructor {
    display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.ec-instructor img {
    width: 24px; height: 24px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid #e5e7eb; flex-shrink: 0;
}
.ec-instructor-name {
    font-size: .77rem; font-weight: 600; color: #6b7280;
    transition: color .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ec-instructor:hover .ec-instructor-name { color: #A41034; }

/* Progress row */
.ec-progress-row { display: flex; flex-direction: column; gap: 5px; }
.ec-progress-label {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .72rem; font-weight: 600;
}
.ec-progress-label span:first-child { color: #9ca3af; }
.ec-progress-label span:last-child  { color: #374151; font-weight: 700; }
.ec-progress-track {
    height: 6px; border-radius: 6px; background: #f3f4f6; overflow: hidden;
}
.ec-progress-fill {
    height: 100%; border-radius: 6px; transition: width .6s ease;
}
.ec-progress-fill--active   { background: linear-gradient(90deg, #A41034, #FFFFFF); }
.ec-progress-fill--complete  { background: linear-gradient(90deg, #10b981, #6ee7b7); }

/* ── Footer ── */
.ec-footer {
    border-top: 1px solid #f3f4f6; padding: 11px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ec-footer-meta { display: flex; align-items: center; gap: 10px; }
.ec-meta-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .72rem; color: #9ca3af; font-weight: 500;
}
.ec-meta-chip i { font-size: .65rem; color: #d1d5db; }

/* Continue button */
.ec-continue-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 9px;
    background: #A41034;
    color: #fff; font-size: .76rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(164,16,52,.28);
    transition: opacity .2s, transform .2s;
}
.ec-continue-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* Certificate button */
.ec-cert-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 9px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff; font-size: .76rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(16,185,129,.28);
    transition: opacity .2s, transform .2s;
}
.ec-cert-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* Complete ribbon */
.ec-complete-ribbon {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: linear-gradient(90deg, #10b981, #6ee7b7);
}

/* ── Empty state ── */
.ec-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
}
.ec-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.ec-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.ec-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.ec-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.ec-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/enrolled-lessons / index ── */

/* ── Page header ── */
.ek-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.ek-header-left h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.ek-header-left p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.ek-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(164,16,52,.15); border: 1px solid rgba(164,16,52,.35);
    color: #FFFFFF; font-size: .78rem; font-weight: 600;
}
.ek-count-pill strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; color: #FFFFFF; }

/* ── Summary chips ── */
.ek-summary { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.ek-sum-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 10px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    font-size: .8rem; color: rgba(255,255,255,.6); font-weight: 500;
}
.ek-sum-chip strong { color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; }
.ek-chip--purple { border-color: rgba(164,16,52,.35); background: rgba(164,16,52,.12); }
.ek-chip--purple i, .ek-chip--purple strong { color: #FFFFFF; }
.ek-chip--green  { border-color: rgba(16,185,129,.3);  background: rgba(16,185,129,.08); }
.ek-chip--green i, .ek-chip--green strong { color: #6ee7b7; }
.ek-chip--soft   { border-color: rgba(167,139,250,.2); background: rgba(167,139,250,.06); }
.ek-chip--soft i, .ek-chip--soft strong { color: #FFFFFF; }

/* ── Grid ── */
.ek-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1199px) { .ek-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .ek-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.ek-card {
    background: #fff;
    border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
    transition: transform .25s, box-shadow .25s;
    position: relative;
}
.ek-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(164,16,52,.18), 0 16px 48px rgba(0,0,0,.22);
}
.ek-card--complete:hover { box-shadow: 0 8px 24px rgba(16,185,129,.18), 0 16px 48px rgba(0,0,0,.2); }

/* complete top ribbon */
.ek-ribbon {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: linear-gradient(90deg, #10b981, #6ee7b7); z-index: 2;
}

/* ── Thumbnail ── */
.ek-thumb {
    position: relative; overflow: hidden; aspect-ratio: 16/9; flex-shrink: 0;
}
.ek-thumb img {
    width: 100%; height: 100%; object-fit: cover; transition: transform .4s;
}
.ek-card:hover .ek-thumb img { transform: scale(1.06); }

/* Category badge top-left */
.ek-cat-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .68rem; font-weight: 700;
    background: rgba(10,6,24,.72); color: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    max-width: calc(100% - 64px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Progress % badge top-right */
.ek-pct-badge {
    position: absolute; top: 10px; right: 10px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .72rem; font-weight: 800; backdrop-filter: blur(8px);
}
.ek-pct-badge--progress { background: rgba(164,16,52,.82); color: #e9d5ff; }
.ek-pct-badge--done     { background: rgba(16,185,129,.85); color: #d1fae5; }

/* Duration badge bottom-left */
.ek-dur-badge {
    position: absolute; bottom: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px;
    background: rgba(164,16,52,.82); color: #e9d5ff;
    font-size: .7rem; font-weight: 700; backdrop-filter: blur(6px);
}
.ek-dur-badge i { font-size: .65rem; }

/* Play overlay */
.ek-overlay {
    position: absolute; inset: 0;
    background: rgba(10,6,24,.4);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s;
}
.ek-card:hover .ek-overlay { opacity: 1; }
.ek-play-btn {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    color: #A41034; font-size: 1.1rem;
    transform: scale(.8); transition: transform .28s;
}
.ek-card:hover .ek-play-btn { transform: scale(1); }

/* Thumb progress strip */
.ek-thumb-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.18); }
.ek-strip-fill  { height: 100%; border-radius: 0 2px 2px 0; transition: width .6s ease; }
.ek-strip--active   { background: linear-gradient(90deg, #A41034, #FFFFFF); }
.ek-strip--complete { background: linear-gradient(90deg, #10b981, #6ee7b7); }

/* ── Body ── */
.ek-body { padding: 16px 18px 12px; flex: 1; display: flex; flex-direction: column; gap: 9px; }

/* Parent course label */
.ek-course-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; color: #A41034; font-weight: 600;
    background: rgba(164,16,52,.07); border: 1px solid rgba(164,16,52,.15);
    padding: 3px 10px; border-radius: 6px; width: fit-content;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ek-course-label i { font-size: .65rem; flex-shrink: 0; }

.ek-title {
    font-size: .95rem; font-weight: 700; color: #111827; line-height: var(--lh-snug);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-decoration: none; transition: color .2s;
}
.ek-title:hover { color: #A41034; }

.ek-instructor {
    display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.ek-instructor img {
    width: 24px; height: 24px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid #e5e7eb; flex-shrink: 0;
}
.ek-instructor-name {
    font-size: .77rem; font-weight: 600; color: #6b7280;
    transition: color .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ek-instructor:hover .ek-instructor-name { color: #A41034; }

/* Progress bar */
.ek-progress-row { display: flex; flex-direction: column; gap: 5px; }
.ek-progress-label {
    display: flex; justify-content: space-between;
    font-size: .72rem; font-weight: 600;
}
.ek-progress-label span:first-child { color: #9ca3af; }
.ek-progress-label span:last-child  { color: #374151; font-weight: 700; }
.ek-progress-track { height: 6px; border-radius: 6px; background: #f3f4f6; overflow: hidden; }
.ek-progress-fill  { height: 100%; border-radius: 6px; transition: width .6s ease; }
.ek-progress-fill--active   { background: linear-gradient(90deg, #A41034, #FFFFFF); }
.ek-progress-fill--complete { background: linear-gradient(90deg, #10b981, #6ee7b7); }

/* ── Footer ── */
.ek-footer {
    border-top: 1px solid #f3f4f6; padding: 11px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ek-footer-meta { display: flex; align-items: center; gap: 10px; }
.ek-meta-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .72rem; color: #9ca3af; font-weight: 500;
}
.ek-meta-chip i { font-size: .65rem; color: #d1d5db; }

.ek-watch-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 9px;
    background: #A41034;
    color: #fff; font-size: .76rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.ek-watch-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

.ek-cert-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 9px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff; font-size: .76rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(16,185,129,.28);
    transition: opacity .2s, transform .2s;
}
.ek-cert-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── Empty state ── */
.ek-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
}
.ek-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.ek-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.ek-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.ek-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.ek-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/order / index ── */

/* ── Page header ── */
.or-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.or-header-left h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.or-header-left p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.or-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(164,16,52,.15); border: 1px solid rgba(164,16,52,.35);
    color: #FFFFFF; font-size: .78rem; font-weight: 600;
}
.or-count-pill strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; color: #FFFFFF; }

/* ── Summary chips ── */
.or-summary { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.or-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-radius: 14px;
    background: #fff; flex: 1; min-width: 130px;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 6px 20px rgba(0,0,0,.16);
    border-left: 4px solid;
}
.or-chip--purple { border-color: #A41034; }
.or-chip--green  { border-color: #10b981; }
.or-chip--gold   { border-color: #f59e0b; }
.or-chip--rose   { border-color: #f43f5e; }
.or-chip-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.or-chip--purple .or-chip-icon { background: rgba(164,16,52,.1); color: #A41034; }
.or-chip--green  .or-chip-icon { background: rgba(16,185,129,.1);  color: #10b981; }
.or-chip--gold   .or-chip-icon { background: rgba(245,158,11,.1);  color: #d97706; }
.or-chip--rose   .or-chip-icon { background: rgba(244,63,94,.1);   color: #f43f5e; }
.or-chip-val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 900; color: #111827; line-height: 1;
}
.or-chip-lbl {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: #9ca3af; margin-top: 2px;
}

/* ── Card ── */
.or-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18);
}

/* ── Card header ── */
.or-card-head {
    background: #A41034;
    padding: 18px 28px;
    display: flex; align-items: center; gap: 12px;
    position: relative; overflow: hidden;
}
 
.or-card-head-icon {
    width: 40px; height: 40px; border-radius: 10px;
     background: #fff; border: 1px solid #fff
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #1C1514; flex-shrink: 0; position: relative; z-index: 1;
}
.or-card-head-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 800; color: #fff; margin: 0;
    position: relative; z-index: 1;
}
.or-card-head-sub {
    font-size: 1rem; color: #fff; margin: 2px 0 0;
    position: relative; z-index: 1;
}

/* ── Table ── */
.or-table { width: 100%; border-collapse: collapse; }
.or-table thead th {
    font-size: .67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: #9ca3af;
    padding: 12px 20px; border-bottom: 2px solid #f3f4f6;
    background: #fafafa; white-space: nowrap;
}
.or-table tbody td {
    padding: 15px 20px; font-size: .875rem; color: #4b5563;
    border-bottom: 1px solid #f9fafb; vertical-align: middle;
    transition: background .15s;
}
.or-table tbody tr:last-child td { border-bottom: none; }
.or-table tbody tr:hover td { background: #faf5ff; }

.or-idx { color: #d1d5db; font-size: .78rem; font-weight: 600; width: 36px; }

/* Invoice cell */
.or-invoice-id {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .92rem; font-weight: 800; color: #A41034;
    letter-spacing: .01em;
}
.or-method {
    font-size: .74rem; color: #9ca3af; margin-top: 2px;
    display: flex; align-items: center; gap: 4px; text-transform: capitalize;
}
.or-method i { font-size: .68rem; color: #FFFFFF; }

/* Amount */
.or-amount {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 800; color: #111827;
}
.or-currency { font-size:1rem; color: #9ca3af; margin-left: 3px; font-weight: 500; }

/* Date */
.or-date { font-size: .8rem; color: #6b7280; white-space: nowrap; }
.or-date i { color: #FFFFFF; font-size: .7rem; margin-right: 4px; }

/* Status + Payment badges */
.or-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 100px;
    font-size: .71rem; font-weight: 700; white-space: nowrap;
}
.or-badge--success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.or-badge--warn    { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.or-badge--danger  { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }
.or-badge--info    { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }

/* Action buttons */
.or-actions { display: flex; align-items: center; gap: 7px; }
.or-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 13px; border-radius: 7px;
    font-size:1rem; font-weight: 700;
    text-decoration: none; border: 1.5px solid; transition: all .2s;
    white-space: nowrap;
}
.or-btn--receipt { background: #fff; border-color: rgba(245,158,11,.25); color: #A41034; }
.or-btn--receipt:hover { background: #fff; border-color: #f59e0b; color: #A41034; }
.or-btn--invoice { background: rgba(164,16,52,.07); border-color: rgba(164,16,52,.22); color: #A41034; }
.or-btn--invoice:hover { background: rgba(164,16,52,.15); border-color: #A41034; color: #A41034; }
.or-btn--pdf { background: linear-gradient(135deg,#A41034,#A41034); border-color: transparent; color: #fff !important; }
.or-btn--pdf:hover { background: linear-gradient(135deg,#1a0440,#A41034); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(164,16,52,.35); color: #fff !important; }

/* ── Pagination ── */
.or-pagination { padding: 16px 20px; border-top: 1px solid #f3f4f6; }
.or-pagination .pagination .page-link {
    border-radius: 8px; margin: 0 2px;
    color: #A41034; border-color: rgba(164,16,52,.2);
}
.or-pagination .pagination .page-item.active .page-link {
    background: #A41034; border-color: #A41034; color: #fff;
}
.or-pagination .pagination .page-link:hover { background: rgba(164,16,52,.08); }

/* ── Empty ── */
.or-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18);
}
.or-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.or-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.or-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.or-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.or-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/order / show ── */

.od-wrap { max-width: 860px; }

/* ── Card shell ── */
.od-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.18), 0 12px 40px rgba(0,0,0,.22);
    margin-bottom: 20px;
}

/* ── Header ── */
.od-header {
    background: linear-gradient(135deg, #100830 0%, #1c1250 50%, #0e1a40 100%);
    padding: 28px 32px;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    position: relative; overflow: hidden;
}
.od-header::before {
    content: ''; position: absolute;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(164,16,52,.4), transparent 65%);
    top: -130px; right: 40px; pointer-events: none;
}
.od-header::after {
    content: ''; position: absolute;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(6,182,212,.22), transparent 65%);
    bottom: -80px; left: 160px; pointer-events: none;
}
.od-header-left { position: relative; z-index: 1; }
.od-invoice-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: rgba(167,139,250,.7);
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.od-invoice-label::before { content:''; width:16px; height:2px; background:#FFFFFF; border-radius:2px; }
.od-invoice-num {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2rem; font-weight: 800; color: #fff;
    letter-spacing: -.02em; margin-bottom: 10px;
}
.od-meta-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.od-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 100px;
    font-size: .72rem; font-weight: 600; letter-spacing: .03em;
    backdrop-filter: blur(8px);
}
.od-pill i { font-size: .65rem; }
.od-pill--date   { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.15); }
.od-pill--ok     { background: rgba(16,185,129,.18); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.od-pill--warn   { background: rgba(245,158,11,.18); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.od-pill--danger { background: rgba(244,63,94,.18);  color: #fda4af; border: 1px solid rgba(244,63,94,.3); }
.od-pill--info   { background: rgba(6,182,212,.18);  color: #67e8f9; border: 1px solid rgba(6,182,212,.3); }

.od-header-right { position: relative; z-index: 1; text-align: right; }
.od-amount-label { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 4px; }
.od-amount-val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2.2rem; font-weight: 900; color: #FFFFFF;
    letter-spacing: -.02em;
}
.od-amount-cur { font-size: 1rem; color: rgba(255,255,255,.5); margin-left: 4px; }

/* ── Billing meta ── */
.od-billing {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 0;
    border-bottom: 1px solid #f0f0f5;
}
@media(max-width:767px){ .od-billing { grid-template-columns: 1fr; } }
.od-billing-block {
    padding: 24px 28px; border-right: 1px solid #f0f0f5;
}
.od-billing-block:last-child { border-right: none; }
.od-billing-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: #A41034;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.od-billing-label i { font-size: .7rem; }
.od-billing-val { font-size: .85rem; color: #374151; line-height: 1.75; }
.od-billing-val strong { color: #111827; display: block; margin-bottom: 2px; }

/* ── Table section ── */
.od-table-wrap { padding: 24px 28px; border-bottom: 1px solid #f0f0f5; }
.od-section-hd {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #9ca3af;
    margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.od-section-hd::after { content:''; flex:1; height:1px; background: linear-gradient(90deg, #e5e7eb, transparent); }

.od-table { width: 100%; border-collapse: collapse; }
.od-table thead th {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: #9ca3af;
    padding: 10px 14px; border-bottom: 2px solid #f3f4f6;
    background: #fafafa; white-space: nowrap;
}
.od-table tbody td {
    padding: 14px; font-size: .875rem; color: #4b5563;
    border-bottom: 1px solid #f9fafb; vertical-align: middle;
    transition: background .15s;
}
.od-table tbody tr:last-child td { border-bottom: none; }
.od-table tbody tr:hover td { background: #faf5ff; }
.od-table .od-idx { color: #d1d5db; font-size: .78rem; font-weight: 600; }
.od-table .od-course-name { color: #111827; font-weight: 600; font-size: .9rem; }
.od-table .od-lesson-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size:1rem; color: #A41034; margin-top: 4px;
    background: rgba(164,16,52,.07); padding: 2px 8px; border-radius: 6px;
}
.od-table .od-instr-name { color: #374151; font-size: .83rem; font-weight: 500; }
.od-table .od-instr-email { font-size:1rem; color: #9ca3af; }
.od-table .od-price-cell { font-weight: 700; color: #A41034; text-align: right; font-size: .9rem; }

/* ── Summary row ── */
.od-summary { padding: 24px 28px; display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid #f0f0f5; }

.od-payment-box {
    background: linear-gradient(135deg, #faf5ff, #eff6ff);
    border: 1px solid rgba(164,16,52,.15);
    border-radius: 12px; padding: 16px 20px; align-self: flex-start;
}
.od-payment-box-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #A41034; margin-bottom: 6px; }
.od-payment-box-val { color: #1f2937; font-size: .9rem; font-weight: 600; text-transform: capitalize; }

.od-totals { min-width: 260px; }
.od-totals table { width: 100%; border-collapse: collapse; }
.od-totals td { padding: 6px 0; font-size: .85rem; color: #6b7280; vertical-align: middle; }
.od-totals td + td { text-align: right; color: #374151; font-weight: 500; }
.od-totals .od-discount td + td { color: #10b981; }
.od-totals .od-divider td { padding-top: 12px; border-top: 1px dashed #e5e7eb; }
.od-totals .od-grand td { padding-top: 10px; border-top: 2px solid #e5e7eb; font-size: .95rem; font-weight: 700; color: #111827; }
.od-totals .od-grand td + td { color: #A41034; font-size: 1.05rem; }

/* ── Footer ── */
.od-footer { padding: 18px 28px; display: flex; justify-content: flex-end; background: #fafafa; }
.od-print-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 24px; border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff; font-size: .85rem; font-weight: 700;
    text-decoration: none; box-shadow: 0 4px 14px rgba(245,158,11,.3);
    transition: opacity .2s, transform .2s;
}
.od-print-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/order / invoice ── */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .invoice_area {
            font-family: "Plus Jakarta Sans", sans-serif;
        }

        .invoice_area table {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .invoice_area table tbody {
            width: 100%;
        }

        .invoice_area table tr {
            width: 100% !important;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .invoice_area table tr td {
            text-transform: capitalize;
            font-size: var(--fs-md);
        }

        .invoice_header {
            background: #f3f2f2;
            padding: 30px;
        }

        .invoice_header table tr td {
            width: 49%;
        }

        .invoice_header table tr td.left a {
            display: block;
            width: 160px;
        }

        .invoice_header table tr td.right h2 {
            text-transform: uppercase;
            font-size: var(--fs-3xl);
            font-weight: 600;
            line-height: initial;
            margin-bottom: 10px;
            text-align: right;
            color: #05092B;
        }

        .invoice_header table tr td.right h5 {
            font-size: var(--fs-md);
            text-align: right;
            color: #05092B;
        }

        .invoice_billing_info {
            padding: 30px;
        }

        .invoice_billing_info table tr td h5 {
            font-size: var(--fs-xl);
            font-weight: 700;
            text-transform: capitalize;
            margin-bottom: 10px;
            color: #05092B;
        }

        .invoice_billing_info table tr td p {
            color: #545353;
            font-weight: 400;
            font-size: var(--fs-md);
            /* margin-top: 10px; */
        }

        .invoice_billing_info .right p {
            text-align: right;
        }

        .invoice_billing_info .right p span {
            display: inline-block;
            width: 70px;
            text-align: right;
        }

        .invoice_billing_info .right p:last-child,
        .invoice_billing_info .right p:last-child span {
            font-weight: 600;
        }

        .invoice_billing_order {
            padding: 30px;
        }

        .invoice_billing_order table {
            border: 1px solid rgb(238, 238, 238);
        }

        .invoice_billing_order table thead {
            width: 100%;
        }

        .invoice_billing_order table thead tr {
            background: #f3f2f2;
        }

        .invoice_billing_order table thead tr th {
            background: #f3f2f2;
        }

        .invoice_billing_order table tr th,
        .invoice_billing_order table tr td {
            padding: 10px 20px;
            border-right: 1px solid rgb(238, 238, 238);
            border-bottom: 1px solid rgb(238, 238, 238);
            width: 25%;
            color: #05092B;
            text-align: left;
        }

        .sl-no {
            width: 10% !important;
        }

        .item {
            width: 40% !important;
        }

        .by {
            width: 35% !important;
        }

        .price {
            width: 15% !important;
        }

        .invoice_billing_info .right p span {
            display: inline-block;
            width: 150px !important;
            text-align: right;
        }

        .showingdetailorderhistory .subtotal,
        .showingdetailorderhistory .total {
            border-top: 1px solid #dee2e6;
            background-color: #f7f7f9;

        }

        .showingdetailorderhistory p {
            padding: 8px 10px;
        }

        .showingdetailorderhistory .invoice_billing_info tbody tr td {
            padding-right: 0px;
        }

/* ── frontend/student-dashboard/certificate / index ── */
        @foreach ($certificateItems as $item)
            #{{ $item->element_id }} {
                left: {{ $item->x_position }}px;
                top: {{ $item->y_position }}px;
            }
        @endforeach

        @page {
            size: 930px 600px;
            margin: 0;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .certificate-body {
            width: 930px !important;
            height: 600px !important;
            background: rgb(231, 231, 231);
            position: relative;
        }

        .draggable-element {
            position: absolute;

        }

        #title {
            font-size: var(--fs-xl);
            font-weight: bold;
            color: black;
            left: 50%;
            
            width: 730px;
            
        }

        #certificate_completion {
            font-size: var(--fs-xl);
            font-weight: bold;
            color: black;
            left: 50%;
            transform: translate(-50%);
            width: 730px;
            text-align: center;
        }

        #sub_title {
            font-size: var(--fs-lg);
            color: black;
            text-align: inherit;
            font-weight: inherit;
            left: 50%;
            transform: translate(-50%);
            width: 730px;
            text-align: center;
        }

        #description {
            font-size: var(--fs-md);
            color: black;
           
            font-weight: inherit;
            width: 730px;
            left: 50%;
            
        }

/* ── frontend/student-dashboard/certificate / certificate ── */

/* ── Page header ── */
.cert-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.cert-header h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.cert-header p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.cert-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(164,16,52,.15); border: 1px solid rgba(164,16,52,.35);
    color: #FFFFFF; font-size: .78rem; font-weight: 600;
}
.cert-count-pill strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; color: #FFFFFF; }

/* ── Grid ── */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1199px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .cert-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.cert-card {
    background: #fff;
    border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
    transition: transform .25s, box-shadow .25s;
}
.cert-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(164,16,52,.2), 0 16px 48px rgba(0,0,0,.22);
}

/* ── Certificate preview banner ── */
.cert-preview {
    position: relative;
    background: #A41034;
    padding: 28px 24px 22px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 150px; overflow: hidden; text-align: center;
}
.cert-preview::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.cert-preview::after {
    content: '';
    position: absolute;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(164,16,52,.45), transparent 65%);
    top: -100px; right: -60px; pointer-events: none;
}
/* gold border frame */
.cert-frame {
    position: absolute; inset: 8px;
    border: 1.5px solid rgba(167,139,250,.2);
    border-radius: 10px; pointer-events: none;
}
.cert-frame::before, .cert-frame::after {
    content: ''; position: absolute;
    width: 12px; height: 12px;
    border-color: rgba(167,139,250,.45);
    border-style: solid;
}
.cert-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; }
.cert-frame::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; }

.cert-seal {
    position: relative; z-index: 1;
    width: 56px; height: 56px; border-radius: 50%;
    background: #1C1514;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff;
    box-shadow: 0 4px 16px rgba(164,16,52,.5);
    margin-bottom: 12px; flex-shrink: 0;
}
.cert-preview-title {
    position: relative; z-index: 1;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .78rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #fff; margin-bottom: 5px;
}
.cert-preview-name {
    position: relative; z-index: 1;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 800; color: #fff;
    line-height: var(--lh-snug); display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* type badge */
.cert-type-badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    padding: 3px 10px; border-radius: 5px;
    font-size: .67rem; font-weight: 700; letter-spacing: .04em;
    background: #fff; color: #1C1514;
    backdrop-filter: blur(4px);
}

/* ── Card body ── */
.cert-body {
    padding: 16px 18px 14px; flex: 1;
    display: flex; flex-direction: column; gap: 8px;
}
.cert-course-name {
    font-size: .88rem; font-weight: 700; color: #111827;
    line-height: var(--lh-snug); display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cert-lesson-name {
    font-size: .78rem; color: #6b7280;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.cert-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem; color: #9ca3af; font-weight: 500;
}
.cert-meta i { color: #FFFFFF; font-size: .65rem; }

/* ── Footer ── */
.cert-footer {
    border-top: 1px solid #f3f4f6;
    padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cert-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .72rem; font-weight: 700;
    background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0;
}
.cert-status i { font-size: .65rem; }

.cert-view-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 9px;
    background: #A41034;
    color: #fff; font-size: .78rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.cert-view-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── Empty ── */
.cert-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
}
.cert-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.cert-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.cert-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.cert-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.cert-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── Pagination ── */
.cert-pagination { margin-top: 24px; }
.cert-pagination .pagination .page-link { border-radius: 8px; margin: 0 2px; color: #A41034; border-color: rgba(164,16,52,.2); background: rgba(255,255,255,.07); }
.cert-pagination .pagination .page-item.active .page-link { background: #A41034; border-color: #A41034; color: #fff; }
.cert-pagination .pagination .page-link:hover { background: rgba(164,16,52,.15); }

/* ── frontend/student-dashboard/quiz-attempts / index ── */

/* ── Page header ── */
.qa-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.qa-header-left h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.qa-header-left p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.qa-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(164,16,52,.15); border: 1px solid rgba(164,16,52,.35);
    color: #FFFFFF; font-size: .78rem; font-weight: 600;
}
.qa-count-pill strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; color: #FFFFFF; }

/* ── Summary chips ── */
.qa-summary { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.qa-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-radius: 14px;
    background: #fff; flex: 1; min-width: 130px;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 6px 20px rgba(0,0,0,.16);
    border-left: 4px solid;
}
.qa-chip--purple { border-color: #A41034; }
.qa-chip--green  { border-color: #10b981; }
.qa-chip--rose   { border-color: #f43f5e; }
.qa-chip--gold   { border-color: #f59e0b; }
.qa-chip-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.qa-chip--purple .qa-chip-icon { background: rgba(164,16,52,.1); color: #A41034; }
.qa-chip--green  .qa-chip-icon { background: rgba(16,185,129,.1);  color: #10b981; }
.qa-chip--rose   .qa-chip-icon { background: rgba(244,63,94,.1);   color: #f43f5e; }
.qa-chip--gold   .qa-chip-icon { background: rgba(245,158,11,.1);  color: #d97706; }
.qa-chip-body {}
.qa-chip-val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 900; color: #111827; line-height: 1;
}
.qa-chip-lbl {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: #9ca3af; margin-top: 2px;
}

/* ── Main card ── */
.qa-card {
    margin-top: 20px !important;
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18);
}

/* ── Card header ── */
.qa-card-head {
    background: #A41034;
    padding: 18px 28px;
    display: flex; align-items: center; gap: 12px;
    position: relative; overflow: hidden;
}
.qa-card-head::before {
    content: ''; position: absolute;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(164,16,52,.4), transparent 65%);
    top: -110px; right: 20px; pointer-events: none;
}
.qa-card-head-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(167,139,250,.18); border: 1px solid rgba(167,139,250,.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #FFFFFF; flex-shrink: 0; position: relative; z-index: 1;
}
.qa-card-head-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 800; color: #fff; margin: 0;
    position: relative; z-index: 1;
}
.qa-card-head-sub {
    font-size: .74rem; color: rgba(255,255,255,.4); margin: 2px 0 0;
    position: relative; z-index: 1;
}

/* ── Table ── */
.qa-table { width: 100%; border-collapse: collapse; }
.qa-table thead th {
    font-size: .67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: #9ca3af;
    padding: 12px 20px; border-bottom: 2px solid #f3f4f6;
    background: #fafafa; white-space: nowrap;
}
.qa-table tbody td {
    padding: 14px 20px; font-size: .875rem; color: #4b5563;
    border-bottom: 1px solid #f9fafb; vertical-align: middle;
    transition: background .15s;
}
.qa-table tbody tr:last-child td { border-bottom: none; }
.qa-table tbody tr:hover td { background: #faf5ff; }

/* Row number */
.qa-idx { color: #d1d5db; font-size: .78rem; font-weight: 600; width: 36px; }

/* Course + quiz stacked */
.qa-course-name { font-size: .88rem; font-weight: 700; color: #111827; margin-bottom: 3px; }
.qa-quiz-name   {
    font-size: .76rem; color: #A41034; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(164,16,52,.07); padding: 2px 8px; border-radius: 5px;
}
.qa-quiz-name i { font-size: .68rem; }

/* Score column */
.qa-score-wrap { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.qa-score-nums {
    display: flex; align-items: baseline; gap: 3px;
    font-family: "Plus Jakarta Sans", sans-serif;
}
.qa-score-mine  { font-size: 1.05rem; font-weight: 900; color: #111827; }
.qa-score-sep   { font-size: .78rem; color: #d1d5db; }
.qa-score-total { font-size: .8rem; font-weight: 600; color: #9ca3af; }
.qa-score-pct   { font-size: .7rem; font-weight: 700; color: #6b7280; }
.qa-score-track { height: 5px; border-radius: 5px; background: #f3f4f6; overflow: hidden; }
.qa-score-fill  { height: 100%; border-radius: 5px; transition: width .5s ease; }
.qa-score-fill--pass { background: linear-gradient(90deg, #A41034, #FFFFFF); }
.qa-score-fill--fail { background: linear-gradient(90deg, #f43f5e, #fda4af); }
.qa-score-fill--high { background: linear-gradient(90deg, #10b981, #6ee7b7); }

/* Status badge */
.qa-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 100px;
    font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    white-space: nowrap;
}
.qa-badge--pass { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.qa-badge--fail { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }

/* Date */
.qa-date { font-size: .8rem; color: #9ca3af; white-space: nowrap; }

/* View button */
.qa-view-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 8px;
    background: rgba(164,16,52,.08); border: 1.5px solid rgba(164,16,52,.22);
    color: #A41034; font-size: .76rem; font-weight: 700;
    text-decoration: none; transition: all .2s; white-space: nowrap;
}
.qa-view-btn:hover { background: rgba(164,16,52,.16); border-color: #A41034; color: #A41034; }

/* ── Pagination ── */
.qa-pagination { padding: 16px 20px; border-top: 1px solid #f3f4f6; }
.qa-pagination .pagination .page-link {
    border-radius: 8px; margin: 0 2px;
    color: #A41034; border-color: rgba(164,16,52,.2);
}
.qa-pagination .pagination .page-item.active .page-link {
    background: #A41034; border-color: #A41034; color: #fff;
}
.qa-pagination .pagination .page-link:hover { background: rgba(164,16,52,.08); }

/* ── Empty ── */
.qa-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18);
}
.qa-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.qa-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.qa-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.qa-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.qa-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/review / index ── */

/* ── Page header ── */
.rv-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.rv-header-left h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.rv-header-left p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.rv-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(164,16,52,.15); border: 1px solid rgba(164,16,52,.35);
    color: #FFFFFF; font-size: .78rem; font-weight: 600;
}
.rv-count-pill strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; color: #FFFFFF; }

/* ── Summary chips ── */
.rv-summary { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.rv-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-radius: 14px;
    background: #fff; flex: 1; min-width: 130px;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 6px 20px rgba(0,0,0,.16);
    border-left: 4px solid;
}
.rv-chip--purple { border-color: #A41034; }
.rv-chip--green  { border-color: #10b981; }
.rv-chip--gold   { border-color: #f59e0b; }
.rv-chip-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.rv-chip--purple .rv-chip-icon { background: rgba(164,16,52,.1); color: #A41034; }
.rv-chip--green  .rv-chip-icon { background: rgba(16,185,129,.1);  color: #10b981; }
.rv-chip--gold   .rv-chip-icon { background: rgba(245,158,11,.1);  color: #d97706; }
.rv-chip-val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 900; color: #111827; line-height: 1;
}
.rv-chip-lbl {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: #9ca3af; margin-top: 2px;
}

/* ── Main card ── */
.rv-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18);
}

/* ── Card header ── */
.rv-card-head {
    background: #A41034;
    padding: 18px 28px;
    display: flex; align-items: center; gap: 12px;
    position: relative; overflow: hidden;
}
.rv-card-head::before {
    content: ''; position: absolute;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(164,16,52,.4), transparent 65%);
    top: -110px; right: 20px; pointer-events: none;
}
.rv-card-head-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(167,139,250,.18); border: 1px solid rgba(167,139,250,.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #FFFFFF; flex-shrink: 0; position: relative; z-index: 1;
}
.rv-card-head-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 800; color: #fff; margin: 0;
    position: relative; z-index: 1;
}
.rv-card-head-sub {
    font-size: .74rem; color: rgba(255,255,255,.4); margin: 2px 0 0;
    position: relative; z-index: 1;
}

/* ── Table ── */
.rv-table { width: 100%; border-collapse: collapse; }
.rv-table thead th {
    font-size: .67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: #9ca3af;
    padding: 12px 20px; border-bottom: 2px solid #f3f4f6;
    background: #fafafa; white-space: nowrap;
}
.rv-table tbody td {
    padding: 15px 20px; font-size: .875rem; color: #4b5563;
    border-bottom: 1px solid #f9fafb; vertical-align: middle;
    transition: background .15s;
}
.rv-table tbody tr:last-child td { border-bottom: none; }
.rv-table tbody tr:hover td { background: #faf5ff; }

/* Row number */
.rv-idx { color: #d1d5db; font-size: .78rem; font-weight: 600; width: 36px; }

/* Course / lesson cell */
.rv-course-name {
    font-size: .88rem; font-weight: 700; color: #111827; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-lesson-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .74rem; color: #A41034; font-weight: 600;
    background: rgba(164,16,52,.07); border: 1px solid rgba(164,16,52,.12);
    padding: 2px 9px; border-radius: 5px;
}

/* Type badge */
.rv-type-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 6px;
    font-size: .72rem; font-weight: 700;
}
.rv-type-badge--course { background: rgba(164,16,52,.08); color: #A41034; border: 1px solid rgba(164,16,52,.15); }
.rv-type-badge--lesson { background: rgba(6,182,212,.08);  color: #0891b2; border: 1px solid rgba(6,182,212,.15); }

/* Star rating */
.rv-stars { display: inline-flex; align-items: center; gap: 2px; }
.rv-stars i { font-size: .82rem; }
.rv-stars i.filled { color: #f59e0b; }
.rv-stars i.empty  { color: #e5e7eb; }
.rv-rating-val { font-size: .78rem; font-weight: 700; color: #374151; margin-left: 5px; }

/* Status badge */
.rv-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 100px;
    font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.rv-status--approved { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.rv-status--pending  { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }

/* Action buttons */
.rv-actions { display: flex; align-items: center; gap: 8px; }
.rv-view-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 13px; border-radius: 7px;
    background: rgba(164,16,52,.08); border: 1.5px solid rgba(164,16,52,.22);
    color: #A41034; font-size: .76rem; font-weight: 700;
    text-decoration: none; transition: all .2s;
}
.rv-view-btn:hover { background: rgba(164,16,52,.16); border-color: #A41034; color: #A41034; }
.rv-del-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 13px; border-radius: 7px;
    background: rgba(244,63,94,.07); border: 1.5px solid rgba(244,63,94,.2);
    color: #e11d48; font-size: .76rem; font-weight: 700;
    text-decoration: none; transition: all .2s;
}
.rv-del-btn:hover { background: rgba(244,63,94,.15); border-color: #f43f5e; color: #be123c; }

/* ── Pagination ── */
.rv-pagination { padding: 16px 20px; border-top: 1px solid #f3f4f6; }
.rv-pagination .pagination .page-link {
    border-radius: 8px; margin: 0 2px;
    color: #A41034; border-color: rgba(164,16,52,.2);
}
.rv-pagination .pagination .page-item.active .page-link {
    background: #A41034; border-color: #A41034; color: #fff;
}
.rv-pagination .pagination .page-link:hover { background: rgba(164,16,52,.08); }

/* ── Empty ── */
.rv-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18);
}
.rv-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.rv-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.rv-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.rv-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.rv-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/wish-lists / index ── */

/* ── Page header ── */
.wl-page-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.wl-page-title {
    display: flex; align-items: center; gap: 12px;
}
.wl-page-title h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0;
}
.wl-count-badge {
    display: inline-flex; align-items: center;
    padding: 3px 12px; border-radius: 100px;
    background: rgba(164,16,52,.25); border: 1px solid rgba(164,16,52,.4);
    color: #FFFFFF; font-size: .78rem; font-weight: 700;
}
.wl-page-sub { font-size: .82rem; color: rgba(255,255,255,.4); margin-top: 3px; }

/* ── Grid ── */
.wl-grid {
    margin-top: 20px !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1199px) { .wl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .wl-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.wl-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.16), 0 8px 28px rgba(0,0,0,.18);
    display: flex; flex-direction: column;
    transition: transform .25s, box-shadow .25s;
}
.wl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(164,16,52,.18), 0 16px 48px rgba(0,0,0,.22);
}

/* ── Thumbnail ── */
.wl-thumb {
    position: relative; overflow: hidden;
    aspect-ratio: 16/9; flex-shrink: 0;
}
.wl-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s;
}
.wl-card:hover .wl-thumb img { transform: scale(1.05); }

/* Category badge on thumb */
.wl-cat-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .7rem; font-weight: 700; letter-spacing: .03em;
    background: #A41034; color: #fff;
    backdrop-filter: blur(6px);
    max-width: calc(100% - 56px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Remove button */
.wl-remove-btn {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(244,63,94,.85); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .8rem;
    backdrop-filter: blur(6px);
    transition: background .2s, transform .2s;
}
.wl-remove-btn:hover { background: #f43f5e; transform: scale(1.1); }

/* Play overlay */
.wl-thumb-overlay {
    position: absolute; inset: 0;
    background: rgba(10,6,24,.4);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s;
}
.wl-card:hover .wl-thumb-overlay { opacity: 1; }
.wl-play-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    color: #A41034; font-size: 1.1rem;
    transform: scale(.85); transition: transform .3s;
}
.wl-card:hover .wl-play-icon { transform: scale(1); }

/* ── Card body ── */
.wl-body { padding: 16px 18px 14px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.wl-title {
    font-size: .95rem; font-weight: 700; color: #111827;
    line-height: var(--lh-snug); display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-decoration: none; transition: color .2s;
}
.wl-title:hover { color: #A41034; }

/* Instructor row */
.wl-instructor {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none;
}
.wl-instructor img {
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid #e5e7eb;
    flex-shrink: 0;
}
.wl-instructor-name {
    font-size: .78rem; font-weight: 600; color: #6b7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .2s;
}
.wl-instructor:hover .wl-instructor-name { color: #A41034; }

/* Rating + Price row */
.wl-meta-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.wl-rating {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .78rem; font-weight: 700; color: #d97706;
}
.wl-rating i { font-size: .72rem; }
.wl-price {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem; font-weight: 800; color: #A41034;
}

/* ── Card footer ── */
.wl-footer {
    border-top: 1px solid #f3f4f6;
    padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.wl-footer-meta {
    display: flex; align-items: center; gap: 12px;
}
.wl-meta-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .74rem; color: #9ca3af; font-weight: 500;
}
.wl-meta-chip i { font-size: .68rem; color: #d1d5db; }

.wl-cart-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 9px;
    background: #A41034;
    color: #fff; font-size: .78rem; font-weight: 700;
    border: none; cursor: pointer;
    box-shadow: 0 3px 10px rgba(164,16,52,.35);
    transition: background .2s, transform .2s, box-shadow .2s;
    text-decoration: none; white-space: nowrap;
}
.wl-cart-btn:hover {
    background: #3d0d90; transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(164,16,52,.45);
    color: #fff;
}

/* ── Empty state ── */
.wl-empty-wrap {
    background: #fff;
    border-radius: 18px;
    padding: 72px 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.16), 0 8px 28px rgba(0,0,0,.18);
}
.wl-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.wl-empty-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px;
}
.wl-empty-text { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.wl-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.wl-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── frontend/student-dashboard/favorite / index ── */

/* ── Page header ── */
.fav-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.fav-header-left h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.fav-header-left p { font-size: .82rem; color: rgba(255,255,255,.4); margin: 0; }
.fav-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 100px;
    background: rgba(164,16,52,.15); border: 1px solid rgba(164,16,52,.35);
    color: #FFFFFF; font-size: .78rem; font-weight: 600;
}
.fav-count-pill strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; color: #FFFFFF; }

/* ── Grid ── */
.fav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1199px) { .fav-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .fav-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.fav-card {
    background: #fff;
    border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
    transition: transform .25s, box-shadow .25s;
    position: relative;
}
.fav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(164,16,52,.2), 0 16px 48px rgba(0,0,0,.22);
}

/* ── Thumbnail ── */
.fav-thumb {
    position: relative; overflow: hidden;
    aspect-ratio: 16/9; flex-shrink: 0;
}
.fav-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s;
}
.fav-card:hover .fav-thumb img { transform: scale(1.05); }

/* Category badge */
.fav-cat-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .68rem; font-weight: 700;
    background: rgba(10,6,24,.72); color: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    max-width: calc(100% - 56px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Remove button */
.fav-remove-btn {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(244,63,94,.82); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .82rem;
    backdrop-filter: blur(6px);
    transition: background .2s, transform .2s;
    z-index: 2;
}
.fav-remove-btn:hover { background: #f43f5e; transform: scale(1.1); }

/* Price badge bottom-left */
.fav-price-badge {
    position: absolute; bottom: 10px; left: 10px;
    padding: 4px 11px; border-radius: 6px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .8rem; font-weight: 800;
    background: rgba(164,16,52,.88); color: #e9d5ff;
    backdrop-filter: blur(6px);
}

/* Play overlay */
.fav-overlay {
    position: absolute; inset: 0;
    background: rgba(10,6,24,.38);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s;
}
.fav-card:hover .fav-overlay { opacity: 1; }
.fav-play-btn {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    color: #A41034; font-size: 1.1rem;
    transform: scale(.82); transition: transform .28s;
}
.fav-card:hover .fav-play-btn { transform: scale(1); }

/* ── Body ── */
.fav-body {
    padding: 16px 18px 12px; flex: 1;
    display: flex; flex-direction: column; gap: 10px;
}

.fav-title {
    font-size: .95rem; font-weight: 700; color: #111827; line-height: var(--lh-snug);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-decoration: none; transition: color .2s;
}
.fav-title:hover { color: #A41034; }

/* Instructor + rating */
.fav-instructor {
    display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.fav-instructor img {
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid #e5e7eb; flex-shrink: 0;
}
.fav-instructor-name {
    font-size: .78rem; font-weight: 600; color: #6b7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .2s;
}
.fav-instructor:hover .fav-instructor-name { color: #A41034; }
.fav-rating {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 3px;
    font-size:1rem; font-weight: 700; color: #d97706;
}
.fav-rating i { font-size: .68rem; }

/* ── Footer ── */
.fav-footer {
    border-top: 1px solid #f3f4f6;
    padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fav-meta { display: flex; align-items: center; gap: 12px; }
.fav-meta-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .74rem; color: #9ca3af; font-weight: 500;
}
.fav-meta-chip i { font-size: .68rem; color: #FFFFFF; }

.fav-cart-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 9px;
    background: #A41034;
    color: #fff; font-size: .78rem; font-weight: 700;
    border: none; cursor: pointer; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
    text-decoration: none;
}
.fav-cart-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ── Empty ── */
.fav-empty {
    background: #fff; border-radius: 18px; padding: 72px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 8px 28px rgba(0,0,0,.18);
}
.fav-empty-icon {
    width: 80px; height: 80px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #A41034; margin: 0 auto 20px;
}
.fav-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
.fav-empty-text  { font-size: .875rem; color: #9ca3af; margin-bottom: 24px; }
.fav-browse-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 11px;
    background: #A41034;
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    transition: opacity .2s, transform .2s;
}
.fav-browse-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   MYSHORTS FORM — Premium Executive-Learning Redesign
   Colors: #A41034 · #1C1514 · rgba(0,0,0,0.85) · #FFFFFF
   ══════════════════════════════════════════════════════════════ */

.msf-wrap {
    max-width: 720px;
    margin: 0 auto;
}

/* ── Card shell ── */
.msf-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0,0,0,.06),
        0 8px 24px rgba(0,0,0,.08),
        0 32px 64px rgba(0,0,0,.10);
    border: 1px solid #FFFFFF;
}

/* ── Header ── */
.msf-header {
    background: rgb(34,34,34);
    padding: 30px 36px;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid #A41034;
}

.msf-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255,255,255,.018) 3px,
        rgba(255,255,255,.018) 4px
    );
    pointer-events: none;
}

.msf-header::after {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    right: -80px;
    top: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(164,16,52,.28) 0%, transparent 65%);
    pointer-events: none;
}

.msf-header-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: rgba(164,16,52,.16);
    border: 1px solid rgba(164,16,52,.32);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #f87171;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.msf-header-icon i { color: #f87171 !important; }

.msf-header-text {
    position: relative;
    z-index: 1;
    flex: 1;
}

.msf-header-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    letter-spacing: -0.015em;
}

.msf-header-sub {
    font-size: .775rem;
    color: rgba(255,255,255,.38);
    margin: 0;
    letter-spacing: .03em;
}

/* ── Body ── */
.msf-body {
    padding: 36px;
    background: #fff;
}

/* ── Field group ── */
.msf-fg { margin-bottom: 24px; }

.msf-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 8px;
}

.msf-label i {
    color: #A41034 !important;
    font-size: .7rem !important;
}

.msf-label-req {
    color: #A41034;
    font-size: .72rem;
    font-weight: 800;
}

/* ── Inputs ── */
.msf-input,
.msf-textarea,
.msf-select {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #FFFFFF;
    border-radius: 10px;
    background: #fafaf9;
    color: rgb(34,34,34);
    font-size: .9rem;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
}

.msf-input::placeholder,
.msf-textarea::placeholder { color: #c2bdb6; }

.msf-input:focus,
.msf-textarea:focus,
.msf-select:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.08);
    background: #fff;
}

.msf-textarea { min-height: 120px; resize: vertical; line-height: var(--lh-normal); }

.msf-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A41034' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

/* ── Current file badge ── */
.msf-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 9px;
    background: rgba(164,16,52,.06);
    border: 1.5px solid rgba(164,16,52,.2);
    color: #A41034;
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s;
    width: fit-content;
}

.msf-file-badge:hover {
    background: rgba(164,16,52,.12);
    border-color: rgba(164,16,52,.38);
    color: #A41034;
    text-decoration: none;
}

.msf-file-badge i { font-size: .85rem; }

/* ── Dropzone ── */
.msf-dropzone.dropzone {
    background: #fafaf9 !important;
    border: 2px dashed #d4d0cb !important;
    border-radius: 12px !important;
    min-height: 120px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .22s, background .22s;
}

.msf-dropzone.dropzone:hover {
    border-color: #A41034 !important;
    background: rgba(164,16,52,.03) !important;
}

.msf-dropzone .dz-message { color: #a8a09a; font-size: .875rem; }
.msf-dropzone .dz-message .dz-button { color: #a8a09a; background: none; border: none; font-size: .875rem; }

/* ── Divider ── */
.msf-divider {
    height: 1px;
    background: #FFFFFF;
    margin: 32px 0;
}

/* ── Actions ── */
.msf-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.msf-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 34px;
    border-radius: 10px;
    background: #A41034;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    letter-spacing: .03em;
    box-shadow: 0 4px 18px rgba(164,16,52,.30);
    transition: background .2s, transform .15s, box-shadow .2s;
}

.msf-submit-btn:hover {
    background: #8c0d2a;
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(164,16,52,.40);
    color: #fff;
}

.msf-submit-btn:active { transform: translateY(0); }

.msf-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 10px;
    border: 1.5px solid #FFFFFF;
    background: #fff;
    color: #8a8a8a;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}

.msf-cancel-btn:hover {
    border-color: rgb(34,34,34);
    color: rgb(34,34,34);
    background: #fafaf9;
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════
   MYSHORTSINDEX — Premium Executive-Learning Redesign
   Matches: announcement/form.blade.php design system
   Colors: #A41034 · #1C1514 · rgba(0,0,0,0.85) · #FFFFFF
   ══════════════════════════════════════════════════════════════ */

/* ── Top row: stats + upload button ── */
.msi-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

/* ── Stats strip ── */
.msi-stats-strip {
    display: flex;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #FFFFFF;
    overflow: hidden;
}

.msi-stat-item {
    padding: 14px 28px;
    text-align: center;
    border-right: 1px solid #FFFFFF;
}

.msi-stat-item:last-child { border-right: none; }

.msi-stat-val {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    color: #A41034;
    line-height: 1;
}

.msi-stat-lbl {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #a8a09a;
    margin-top: 4px;
}

/* ── Upload button ── */
.msi-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 10px;
    background: #A41034;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(164,16,52,.30);
    transition: background .2s, transform .15s, box-shadow .2s;
}

.msi-upload-btn:hover {
    background: #8c0d2a;
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(164,16,52,.40);
    color: #fff;
    text-decoration: none;
}

.msi-upload-btn:active { transform: translateY(0); }

/* ── Table (inside ann-card) ── */
.msi-table { width: 100%; border-collapse: collapse; }

.msi-table thead th {
    font-size: .67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #8a8a8a;
    padding: 14px 20px;
    border-bottom: 1.5px solid #FFFFFF;
    background: #fafaf9;
    white-space: nowrap;
}

.msi-table tbody td {
    padding: 14px 20px;
    font-size: .875rem;
    color: rgb(34,34,34);
    border-bottom: 1px solid #f0efed;
    vertical-align: middle;
    transition: background .15s;
}

.msi-table tbody tr:last-child td { border-bottom: none; }
.msi-table tbody tr:hover td { background: #fdf8f8; }

.msi-table .msi-num {
    color: #c2bdb6;
    font-size: .78rem;
    font-weight: 600;
    width: 40px;
}

.msi-table .msi-title { color: rgb(34,34,34); font-weight: 600; }
.msi-table .msi-desc { color: #8a8a8a; font-size: .82rem; max-width: 200px; }

.msi-klip-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(164,16,52,.07);
    color: #A41034;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ── Action buttons (icon-only, matches ia-btn style) ── */
.msi-actions { display: flex; align-items: center; gap: 8px; }

.msi-btn {
    width: 33px;
    height: 33px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid;
    transition: all .18s;
    flex-shrink: 0;
}

.msi-btn--view   { background: rgba(14,116,144,.07); border-color: rgba(14,116,144,.2); color: #0e7490; }
.msi-btn--view:hover   { background: rgba(14,116,144,.15); border-color: #0e7490; color: #0e7490; text-decoration: none; }
.msi-btn--edit   { background: rgba(164,16,52,.07); border-color: rgba(164,16,52,.2); color: #A41034; }
.msi-btn--edit:hover   { background: rgba(164,16,52,.15); border-color: #A41034; color: #8c0d2a; text-decoration: none; }
.msi-btn--delete { background: rgba(225,29,72,.07); border-color: rgba(225,29,72,.2); color: #e11d48; }
.msi-btn--delete:hover { background: rgba(225,29,72,.15); border-color: #e11d48; color: #be123c; }

/* ── Empty state ── */
.msi-empty { padding: 64px 24px; text-align: center; }

.msi-empty-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: rgba(164,16,52,.07);
    border: 1px solid rgba(164,16,52,.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #A41034;
    margin: 0 auto 18px;
}

.msi-empty-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: rgb(34,34,34);
    margin-bottom: 8px;
}

.msi-empty-text { color: #a8a09a; font-size: .875rem; margin-bottom: 22px; }

/* ── Pagination ── */
.msi-pagination { padding: 16px 20px; border-top: 1px solid #FFFFFF; }

.msi-pagination .pagination .page-link {
    border-radius: 8px;
    margin: 0 2px;
    color: #A41034;
    border-color: #FFFFFF;
}

.msi-pagination .pagination .page-item.active .page-link {
    background: #A41034;
    border-color: #A41034;
    color: #fff;
}

/* ── Filter bar ── */
.msi-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 16px 20px;
    background: #fafaf9;
    border-bottom: 1.5px solid #FFFFFF;
    flex-wrap: wrap;
}

.msi-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 130px;
}

.msi-filter-search-group { flex: 2; min-width: 200px; }

.msi-filter-label {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #a8a09a;
    line-height: 1;
}

.msi-filter-search-wrap,
.msi-filter-select-wrap,
.msi-filter-date-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.msi-filter-ico {
    position: absolute;
    left: 11px;
    color: #c2bdb6;
    font-size: .72rem;
    pointer-events: none;
    z-index: 1;
}

.msi-filter-input,
.msi-filter-select,
.msi-filter-date {
    width: 100%;
    padding: 9px 12px 9px 32px;
    border: 1.5px solid #FFFFFF;
    border-radius: 9px;
    background: #fff;
    color: rgb(34,34,34);
    font-size: .83rem;
    font-family: inherit;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    height: 38px;
}

.msi-filter-input::placeholder { color: #c2bdb6; }

.msi-filter-input:focus,
.msi-filter-select:focus,
.msi-filter-date:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.07);
    background: #fff;
}

.msi-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A41034' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
}

.msi-filter-date { cursor: pointer; }

.msi-filter-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 1px;
    padding-left: 16px;
    margin-left: auto;
    flex-shrink: 0;
    align-self: flex-end;
    border-left: 1.5px solid rgba(0,0,0,.08);
}

.msi-filter-count {
    font-size: .78rem;
    font-weight: 600;
    color: #a8a09a;
    white-space: nowrap;
    line-height: 1;
}

.msi-filter-count #msiVisibleCount {
    color: #A41034;
    font-size: .95rem;
    font-weight: 800;
}

.msi-filter-count-label { margin-left: 3px; }

.msi-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: 8px;
    border: 1.5px solid rgba(164,16,52,.22);
    background: rgba(164,16,52,.06);
    color: #A41034;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, border-color .18s;
    font-family: inherit;
    line-height: 1;
    height: 32px;
}

.msi-filter-clear:hover {
    background: rgba(164,16,52,.13);
    border-color: #A41034;
}

/* ── Date badge ── */
.msi-date-col { white-space: nowrap; }

.msi-date-badge {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.msi-date-day {
    font-size: .82rem;
    font-weight: 700;
    color: rgb(34,34,34);
    line-height: 1;
}

.msi-date-year {
    font-size: .68rem;
    color: #a8a09a;
    font-weight: 500;
    line-height: 1;
}

.msi-null-dash { color: #c2bdb6; }

/* ── No-results filter state ── */
.msi-no-results-state {
    padding: 48px 20px;
    text-align: center;
}

.msi-no-results-icon {
    font-size: 2rem;
    color: #c2bdb6;
    display: block;
    margin-bottom: 12px;
}

.msi-no-results-title {
    font-size: 1rem;
    font-weight: 700;
    color: rgb(34,34,34);
    margin: 0 0 6px;
}

.msi-no-results-sub {
    font-size: .83rem;
    color: #a8a09a;
    margin: 0;
}

/* ── frontend/pages / become-instructor ── */

/* ── Page shell ── */
.bi-page {
    min-height: calc(100vh - 82px);
    background: linear-gradient(145deg, #0d0b1e 0%, #1a1040 40%, #0d1b3e 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 52px 0; position: relative; overflow: hidden;
}
.bi-orb {
    position: absolute; border-radius: 50%;
    filter: blur(100px); pointer-events: none;
}
.bi-orb-1 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(164,16,52,.18), transparent 65%); top: -250px; left: -200px; }
.bi-orb-2 { width: 550px; height: 550px; background: radial-gradient(circle, rgba(37,99,235,.15), transparent 65%); bottom: -200px; right: -150px; }
.bi-dots  {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 32px 32px; pointer-events: none;
}

/* ── Card wrap ── */
.bi-wrap {
    display: flex; width: 86%; max-width: 1180px;
    min-height: 680px; border-radius: 22px; overflow: hidden;
    position: relative; z-index: 2;
    box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 32px 80px rgba(0,0,0,.55), 0 8px 24px rgba(164,16,52,.15);
}
@media(max-width:1100px) { .bi-wrap { width: 92%; } }
@media(max-width:900px)  { .bi-wrap { width: 96%; flex-direction: column; border-radius: 18px; } }

/* ══ LEFT — Form ══ */
.bi-left {
    flex: 0 0 52%; max-width: 52%;
    background: #fff;
    display: flex; flex-direction: column; justify-content: center;
    padding: 48px 52px; overflow-y: auto;
}
@media(max-width:900px) { .bi-left { flex: none; max-width: 100%; padding: 36px 28px; } }

/* Logo */
.bi-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-bottom: 32px; }
.bi-logo img { max-height: 30px; }
.bi-logo-text {
    font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.5px;
    background: linear-gradient(135deg,#A41034,#2563eb);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Heading */
.bi-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, rgba(164,16,52,.1), rgba(37,99,235,.08));
    border: 1px solid rgba(164,16,52,.2); border-radius: 100px;
    padding: 5px 14px; font-size: 11.5px; font-weight: 600; color: #A41034;
    margin-bottom: 16px; width: fit-content;
}
.bi-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.85rem; font-weight: 800; color: #0f0c29; line-height: 1.15; margin: 0 0 8px; }
.bi-sub   { font-size: var(--fs-sm); color: #6b7280; margin: 0 0 24px; line-height: var(--lh-normal); }

/* Quick benefits */
.bi-perks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.bi-perk {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 7px;
    background: #FDF5F6; border: 1px solid #F6D9DF;
    font-size: var(--fs-xs); font-weight: 600; color: #A41034;
}
.bi-perk i { font-size: var(--fs-xs); }

/* Alert */
.bi-alert {
    padding: 12px 16px; border-radius: 10px; border-left: 4px solid;
    font-size: var(--fs-sm); line-height: 1.55; margin-bottom: 20px;
}
.bi-alert--warn  { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.bi-alert--error { background: #fef2f2; border-color: #f43f5e; color: #9f1239; }

/* Divider */
.bi-divider { height: 1px; background: linear-gradient(90deg, transparent, #e5e7eb, transparent); margin: 20px 0; }
.bi-section-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #9ca3af;
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.bi-section-label::after { content:''; flex:1; height:1px; background: linear-gradient(90deg,#e5e7eb,transparent); }

/* Form row */
.bi-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width:575px) { .bi-row-2 { grid-template-columns: 1fr; } }

/* Field group */
.bi-fg { margin-bottom: 16px; }
.bi-label {
    display: flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 700; color: #374151;
    letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px;
}
.bi-label-req { color: #ef4444; }
.bi-label-opt { font-size: 10px; color: #9ca3af; font-weight: 500; text-transform: none; letter-spacing: 0; }

.bi-input, .bi-textarea, .bi-select, .bi-file {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid #e5e7eb; border-radius: 10px;
    background: #fafafa; color: #111827;
    font-size: var(--fs-sm); font-family:"Plus Jakarta Sans", sans-serif; outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
}
.bi-input::placeholder, .bi-textarea::placeholder { color: #d1d5db; }
.bi-input:focus, .bi-textarea:focus, .bi-select:focus {
    border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.1); background: #fff;
}
.bi-textarea { min-height: 100px; resize: vertical; }
.bi-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A41034' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}

/* File upload styled */
.bi-file-wrap {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border: 1.5px dashed #d1d5db; border-radius: 10px;
    background: #fafafa; cursor: pointer;
    transition: border-color .2s, background .2s;
}
.bi-file-wrap:hover { border-color: #A41034; background: rgba(164,16,52,.03); }
.bi-file-wrap-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(164,16,52,.1); color: #A41034;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; flex-shrink: 0;
}
.bi-file-wrap-text { font-size: 12.5px; color: #6b7280; }
.bi-file-wrap-text strong { color: #A41034; font-weight: 700; display: block; margin-bottom: 1px; }
.bi-file input { display: none; }

/* Submit */
.bi-submit {
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, #A41034 0%, #2563eb 100%);
    color: #fff; border: none; border-radius: 11px;
    font-size: var(--fs-base); font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 20px rgba(164,16,52,.35);
    transition: opacity .2s, transform .2s, box-shadow .2s;
    letter-spacing: .3px; margin-top: 8px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bi-submit:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(164,16,52,.45); }

.bi-foot { text-align: center; font-size: var(--fs-xs); color: #9ca3af; margin-top: 14px; }
.bi-foot a { color: #A41034; font-weight: 600; text-decoration: none; }
.bi-foot a:hover { text-decoration: underline; }

/* ══ RIGHT — Branding ══ */
.bi-right {
    flex: 1; position: relative; overflow: hidden;
    background: #07041a;
    display: flex; align-items: center; justify-content: center;
    padding: 56px 40px;
}
@media(max-width:900px) { .bi-right { display: none; } }

.bi-rr-blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.52; animation:biBlob 10s ease-in-out infinite alternate; }
.bi-rr-blob.p { width:460px; height:460px; background:radial-gradient(circle,#A41034,transparent 70%); top:-120px; left:-80px; }
.bi-rr-blob.b { width:360px; height:360px; background:radial-gradient(circle,#2563eb,transparent 70%); bottom:-80px; right:-60px; animation-duration:14s; animation-delay:-5s; }
.bi-rr-blob.k { width:280px; height:280px; background:radial-gradient(circle,#db2777,transparent 70%); top:45%; left:40%; animation-duration:12s; animation-delay:-3s; }
@keyframes biBlob { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(18px,-14px) scale(1.05);} 100%{transform:translate(-10px,18px) scale(.97);} }
.bi-rr-grid { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1px); background-size:34px 34px; pointer-events:none; }
.bi-rr-shine { position:absolute; top:0; left:50%; transform:translateX(-50%); width:60%; height:1px; background:linear-gradient(90deg,transparent,rgba(167,139,250,.5),transparent); }

.bi-rr-inner { position:relative; z-index:1; text-align:center; max-width:380px; width:100%; }

.bi-wordmark {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2.4rem; font-weight: 900; letter-spacing:-2px;
    background: linear-gradient(100deg, #FFFFFF 0%, #60a5fa 50%, #f472b6 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: biGrad 5s linear infinite; display:block; margin-bottom: 6px;
}
@keyframes biGrad { 0%{background-position:0 center;} 100%{background-position:200% center;} }
.bi-rr-sub { font-size: var(--fs-sm); color:rgba(255,255,255,.42); margin-bottom:32px; letter-spacing:.3px; }

/* Stats row */
.bi-stats { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:32px; }
.bi-stat  { display:flex; flex-direction:column; align-items:center; padding:0 16px; }
.bi-stat strong {
    font-family:"Plus Jakarta Sans", sans-serif; font-size:1.35rem; font-weight:900; line-height:1;
    background:linear-gradient(90deg,#FFFFFF,#60a5fa);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; margin-bottom:3px;
}
.bi-stat span { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.35); }
.bi-vdiv { width:1px; height:26px; background:rgba(255,255,255,.12); }

/* Feature list */
.bi-features { list-style:none; padding:0; margin:0; text-align:left; }
.bi-features li {
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-radius:12px;
    background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08);
    margin-bottom:10px; font-size: var(--fs-sm); color:rgba(255,255,255,.82); font-weight:500;
    transition:background .2s;
}
.bi-features li:hover { background:rgba(164,16,52,.18); }
.bi-feat-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size: var(--fs-base); flex-shrink:0; }
.bi-features li:nth-child(1) .bi-feat-icon { background:rgba(164,16,52,.25); color:#FFFFFF; }
.bi-features li:nth-child(2) .bi-feat-icon { background:rgba(37,99,235,.25);  color:#93c5fd; }
.bi-features li:nth-child(3) .bi-feat-icon { background:rgba(16,185,129,.25); color:#6ee7b7; }
.bi-features li:nth-child(4) .bi-feat-icon { background:rgba(245,158,11,.25); color:#fcd34d; }
.bi-features li .bi-feat-text strong { color:#fff; display:block; margin-bottom:2px; }
.bi-features li .bi-feat-text span   { font-size:11.5px; color:rgba(255,255,255,.42); }

/* ── frontend/partials / lesson-card ── */
/* ════════════════════════════════════════════════════════════
   iGURUS LESSON DIRECTORY CARD CORE STRUCTURAL LAYOUT
   Brand Profile Theme Accent: Deep Royal Purple (#A41034)
════════════════════════════════════════════════════════════ */
:root {
    --brand-dark-base: #2B0510;
    --brand-primary: #A41034;
    --brand-light: #3e1287;
    --brand-glass: rgba(164,16,52, 0.45);
    
    --text-primary: #ffffff;
    --text-secondary: #e2d7f5;
    --text-muted: #a691cb;
    
    --accent-neon: #A41034;
    --accent-gold: #ffc107;
    --card-border-glow: rgba(124, 77, 255, 0.16);
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Card Shell Infrastructure */
.courses__item.premium-card-wrapper {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-dark-base)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    transition: var(--transition-smooth) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin-bottom: 30px;
}

.courses__item.premium-card-wrapper:hover {
    transform: translateY(-6px) !important;
    border-color: var(--accent-neon) !important;
    box-shadow: 0 15px 40px rgba(124, 77, 255, 0.25) !important;
}

/* Image Thumbnail Base Elements */
.courses__item-thumb.premium-thumb-frame {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16/10 !important;
    overflow: hidden !important;
    background: #000 !important;
}

.courses__item-thumb.premium-thumb-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: var(--transition-smooth) !important;
}

.courses__item.premium-card-wrapper:hover .courses__item-thumb.premium-thumb-frame img {
    transform: scale(1.06) !important;
    opacity: 0.85 !important;
}

/* Dynamic Positioning Overlay Tags */
.lesson_price.premium-tag-price {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 5 !important;
}

.lesson_price.premium-tag-price .price {
    background: var(--accent-neon) !important;
    color: #ffffff !important;
    font-size: var(--fs-sm) !important;
    font-weight: 800 !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-sm) !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(124, 77, 255, 0.4) !important;
    letter-spacing: 0.03em;
}

.duration_lesson.premium-tag-duration {
    position: absolute !important;
    bottom: 14px !important;
    right: 14px !important;
    z-index: 5 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(6px) !important;
    color: #ffffff !important;
    font-size: var(--fs-xs) !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Interactive Hover Action Overlay Panels */
.premium-action-trigger-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(17, 2, 44, 0.8) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    opacity: 0 !important;
    z-index: 8 !important;
    transition: var(--transition-smooth) !important;
    padding: 20px !important;
}

.courses__item-thumb.premium-thumb-frame:hover .premium-action-trigger-layer {
    opacity: 1 !important;
}

/* Core Functional Button Components */
.premium-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 80% !important;
    padding: 10px 16px !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    transition: var(--transition-smooth) !important;
    cursor: pointer !important;
    border: none !important;
}

.premium-action-btn.btn-share {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.premium-action-btn.btn-share:hover {
    background: #ffffff !important;
    color: var(--brand-primary) !important;
}

.premium-action-btn.btn-wishlist {
    background: var(--brand-light) !important;
    color: #ffffff !important;
    border: 1px solid var(--card-border-glow) !important;
}
.premium-action-btn.btn-wishlist:hover {
    background: var(--accent-neon) !important;
    box-shadow: 0 4px 15px rgba(124, 77, 255, 0.4) !important;
}

.premium-action-btn.btn-commerce {
    background: var(--accent-gold) !important;
    color: var(--brand-dark-base) !important;
}
.premium-action-btn.btn-commerce:hover {
    background: #ffffff !important;
    color: var(--brand-dark-base) !important;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4) !important;
}

/* Internal Card Content Matrix Area */
.courses__item-content.premium-body-content {
    padding: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.courses__item-meta.premium-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    list-style: none !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

.courses__item-tag.premium-category-tag a {
    background: rgba(124, 77, 255, 0.12) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--card-border-glow) !important;
    padding: 4px 12px !important;
    border-radius: 99px !important;
    font-size: var(--fs-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
}

.avg-rating.premium-rating-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--accent-gold) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 700 !important;
}

/* Instructor Information Segment Block */
.instructor__item.premium-profile-strip {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-top: auto !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 16px !important;
}

.instructor__thumb.premium-avatar-frame img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid var(--accent-neon) !important;
    object-fit: cover !important;
}

.instructor__content.premium-text-details {
    flex: 1 !important;
    min-width: 0 !important;
}

.instructor__content.premium-text-details .title {
    font-size: var(--fs-md) !important;
    font-weight: 700 !important;
    line-height: var(--lh-snug) !important;
    margin: 0 0 4px 0 !important;
}

.instructor__content.premium-text-details .title a {
    color: var(--text-primary) !important;
    text-decoration: none !important;
    transition: var(--transition-smooth) !important;
}

.instructor__content.premium-text-details .title a:hover {
    color: var(--accent-neon) !important;
}

.instructor__content.premium-text-details .author {
    font-size: var(--fs-sm) !important;
    color: var(--text-muted) !important;
    margin: 0 0 8px 0 !important;
}

.instructor__content.premium-text-details .author a {
    color: var(--text-muted) !important;
    text-decoration: none !important;
}

/* Consolidated Subtext Performance Metrics Icons Row */
.premium-metrics-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: var(--fs-xs) !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.premium-metrics-strip span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.premium-metrics-strip i {
    color: var(--accent-neon) !important;
}

/* ── frontend/lesson-one/sections / shorts-section ── */
/* ── Shorts Section ──────────────────────────────────────── */
.ig-shorts-wrap {
    background: #fff;
    margin: 0 20px;
    padding: 30px 0 36px;
    border-radius: 16px;
    margin-top: 30px;
}

/* ── Row ────────────────────────────────────────────────── */
.ig-shorts-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
.ig-shorts-row::-webkit-scrollbar { height: 4px; }
.ig-shorts-row::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* ── Card ───────────────────────────────────────────────── */
.ig-short-card {
    flex: 0 0 180px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
    background: #111;
}
.ig-short-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 16px 36px rgba(0,0,0,0.22);
    z-index: 2;
}

/* clickable link fills card */
.ig-short-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ── Media container (9:16 ratio) ───────────────────────── */
.ig-short-card__media {
    position: relative;
    aspect-ratio: 9 / 16;
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 45%, #0f172a 100%);
    overflow: hidden;
}

/* poster shown while video hasn't played yet */
.ig-short-card__poster {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 45%, #0f172a 100%);
    transition: opacity .4s ease;
    z-index: 1;
}
.ig-short-card.is-played .ig-short-card__poster { opacity: 0; }

.ig-short-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* gradient top (dims for overflow btn) */
.ig-short-card__grad-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* gradient bottom (text legibility) */
.ig-short-card__grad-bot {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.3) 60%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* ── Play button ────────────────────────────────────────── */
.ig-short-card__play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.7);
    width: 52px; height: 52px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--fs-md);
    opacity: 0;
    z-index: 3;
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}
.ig-short-card:hover .ig-short-card__play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
/* shift icon slightly right to look centered inside circle */
.ig-short-card__play-btn i { margin-left: 3px; }

/* ── Duration badge ─────────────────────────────────────── */
.ig-short-card__dur {
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(0,0,0,.62);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 20px;
    letter-spacing: .4px;
    z-index: 4;
}

/* ── Bottom meta ────────────────────────────────────────── */
.ig-short-card__meta {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 10px 11px 26px;
    z-index: 4;
}

.ig-short-card__author {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.ig-short-card__author img {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255,255,255,.55);
    flex-shrink: 0;
}
.ig-short-card__author span {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.ig-short-card__title {
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Overflow menu ──────────────────────────────────────── */
.ig-short-card__overflow {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 10;
}

.ig-short-card__overflow-btn {
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: none;
    color: #fff;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--fs-xs);
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
    line-height: 1;
    padding: 0;
}
.ig-short-card:hover .ig-short-card__overflow-btn { opacity: 1; }
.ig-short-card__overflow-btn:hover { background: rgba(0,0,0,.72); }

.ig-short-card__overflow-menu {
    display: none;
    position: absolute;
    top: 34px; left: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
    padding: 6px 0;
    min-width: 162px;
    list-style: none;
    margin: 0;
    z-index: 20;
}
.ig-short-card__overflow-menu.open { display: block; }

.ig-short-card__overflow-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: var(--fs-xs);
    color: #374151;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.ig-short-card__overflow-menu li a:hover {
    background: #f3f4f6;
    color: var(--tg-theme-primary, #A41034);
}
.ig-short-card__overflow-menu li a i {
    width: 14px;
    text-align: center;
    color: #9ca3af;
}
.ig-short-card__overflow-menu li a:hover i {
    color: var(--tg-theme-primary, #A41034);
}

/* ── Responsive: shrink cards on mobile ─────────────────── */
@media (max-width: 575px) {
    .ig-short-card { flex: 0 0 148px; }
    .ig-shorts-row { gap: 10px; }
}

/* ── shorts / learners_shorts ── */

/* ── shorts / lesson_shorts ── */

/* ── Full-bleed: escape any container padding so feed + hero span full viewport ── */
.ig-shorts-hero,
.ig-shorts-feed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
}

/* ════ SHORTS PAGE HERO ════ */
.ig-shorts-hero {
    background: linear-gradient(135deg, #1a0508 0%, #1C1514 55%, #1a1a1a 100%);
    padding: 28px 0 24px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(164,16,52,.3);
}
.ig-shorts-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 28px 28px; pointer-events: none;
}
.ig-shorts-hero__inner {
    max-width: 1180px; margin: 0 auto;
    padding: 0 5%;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    position: relative; z-index: 1;
}
.ig-shorts-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #f0899e; margin-bottom: 6px;
}
.ig-shorts-hero__title {
    font-size: 2rem; font-weight: 800; color: #fff; margin: 0 0 4px;
    letter-spacing: -0.03em; line-height: 1;
    background: linear-gradient(100deg, #fff 0%, #f0899e 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ig-shorts-hero__sub { font-size: var(--fs-sm); color: rgba(255,255,255,.48); margin: 0; }
.ig-shorts-hero__meta { display: flex; gap: 10px; flex-wrap: wrap; }
.ig-shorts-hero__badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    border-radius: 100px; padding: 6px 14px;
    font-size: var(--fs-xs); color: rgba(255,255,255,.65); font-weight: 500;
}

/* ════ SHORTS FEED — TikTok-style ════ */
.ig-shorts-feed {
    height: calc(100vh - 162px);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    background: #111;
    position: relative;
}
.ig-shorts-feed::-webkit-scrollbar { display: none; }

/* Individual short card (scoped to full-screen feed only) */
.ig-shorts-feed .ig-short-card {
    height: calc(100vh - 162px);
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    overflow: hidden;
}

/* Video */
.ig-short-video {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    background: #111;
}
/* When vertical, limit width to ~420px and center */
@media (min-width: 600px) {
    .ig-short-video { max-width: 420px; }
    .ig-shorts-feed .ig-short-card  { justify-content: center; }
}

/* Tap-to-pause overlay */
.ig-short-tap { position: absolute; inset: 0; z-index: 2; cursor: pointer; }

/* Dark gradient overlay */
.ig-short-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.9) 100%);
    padding: 24px 80px 28px 20px;
    z-index: 3; pointer-events: none;
}
@media (min-width: 600px) {
    .ig-short-overlay { left: 50%; transform: translateX(-50%); width: 420px; padding: 24px 80px 28px 20px; }
}

/* User info */
.ig-short-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; pointer-events: all; }
.ig-short-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; flex-shrink: 0; }
.ig-short-username { font-size: var(--fs-sm); font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ig-short-username span { font-size: var(--fs-xs); font-weight: 400; color: rgba(255,255,255,.65); display: block; }

/* Title & description */
.ig-short-title { font-size: var(--fs-base); font-weight: 700; color: #fff; margin-bottom: 5px; text-shadow: 0 1px 4px rgba(0,0,0,.6); line-height: var(--lh-snug); }
.ig-short-desc  { font-size: var(--fs-sm); color: rgba(255,255,255,.78); line-height: var(--lh-normal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ig-short-klip  { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 100px; padding: 5px 12px; font-size: var(--fs-xs); color: #fff; text-decoration: none; pointer-events: all; backdrop-filter: blur(8px); }
.ig-short-klip:hover { background: rgba(255,255,255,.22); color: #fff; text-decoration: none; }
.ig-short-klip i { font-size: var(--fs-xs); }

/* Mute/unmute indicator */
.ig-short-mute-badge {
    position: absolute; top: 16px; left: 16px; z-index: 10;
    background: rgba(0,0,0,.5); border-radius: 100px;
    padding: 6px 12px; font-size: var(--fs-xs); color: #fff;
    display: none; align-items: center; gap: 5px;
    backdrop-filter: blur(8px);
}
.ig-short-mute-badge.visible { display: flex; }

/* Play/pause indicator (tap flash) */
.ig-short-play-flash {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    z-index: 10; opacity: 0; pointer-events: none;
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-2xl); color: #fff; transition: opacity .15s;
}
.ig-short-play-flash.show { opacity: 1; }

/* ── ACTION BUTTONS (right side) ── */
.ig-short-actions {
    position: absolute;
    bottom: 28px; right: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    z-index: 5;
}
@media (min-width: 600px) {
    .ig-short-actions { right: calc(50% - 420px/2 - 52px); }
}
.ig-short-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: #fff; background: none; border: none; cursor: pointer;
    font-size: var(--fs-sm); line-height: 1; padding: 0; transition: transform .18s;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.ig-short-btn:hover { transform: scale(1.12); }
.ig-short-btn .icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.14); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xl); transition: background .15s;
    border: 1px solid rgba(255,255,255,.20);
}
.ig-short-btn:hover .icon { background: rgba(255,255,255,.26); }
.ig-short-btn.liked .icon { background: rgba(239,68,68,.8); border-color: transparent; }
.ig-short-btn .cnt { font-size: var(--fs-xs); font-weight: 600; }

/* Mute button (top-right) */
.ig-short-mute-btn {
    position: absolute; top: 14px; right: 14px; z-index: 6;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,.45); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: var(--fs-sm); cursor: pointer;
    border: 1px solid rgba(255,255,255,.15); transition: background .15s;
}
.ig-short-mute-btn:hover { background: rgba(0,0,0,.65); }
@media (min-width: 600px) {
    .ig-short-mute-btn { right: calc(50% - 420px/2 - 50px); }
}

/* More dropdown */
.ig-short-more { position: relative; }
.ig-short-dropdown {
    position: absolute; bottom: 52px; right: -8px;
    background: rgba(20,14,40,.95); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.10); border-radius: 12px;
    min-width: 180px; padding: 6px 0;
    display: none; z-index: 20;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.ig-short-dropdown.open { display: block; }
.ig-short-dropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; font-size: var(--fs-sm); color: rgba(255,255,255,.85);
    text-decoration: none; transition: background .15s;
}
.ig-short-dropdown a:hover { background: rgba(164,16,52,.18); color: #f0899e; text-decoration: none; }
.ig-short-dropdown a i { font-size: var(--fs-sm); width: 16px; text-align: center; }

/* ── NO SHORTS ── */
.ig-shorts-empty {
    height: calc(100vh - 82px); display: flex; flex-direction: column;
    align-items: center; justify-content: center; background: #f8f2f4; color: #1C1514;
    text-align: center; padding: 40px;
}
.ig-shorts-empty i { font-size: 60px; color: rgba(164,16,52,.45); margin-bottom: 20px; }
.ig-shorts-empty h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; }
.ig-shorts-empty p { color: rgba(28,21,20,.55); font-size: var(--fs-sm); }

/* ── COMMENT MODAL ── */
#comment_modal .modal-content { border-radius: 16px; border: none; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
#comment_modal .modal-header { background: linear-gradient(135deg,#A41034,#1C1514); border-radius: 16px 16px 0 0; border: none; padding: 16px 22px; }
#comment_modal .modal-title { color: #fff; font-weight: 700; }
#short_forms .modal-content { border-radius: 14px; border: none; overflow: hidden; }


/* ── frontend/pages/learning-player / index ── */
        .tgmenu__action>ul li .cart-count {
            border: 1px solid #FFF;
            color: #ffffff;
        }

/* ── global / maintenance ── */
        body {
            margin: 0;
            padding: 0;
        }

       /* .container {
            width: 100%;
          
            text-align: center;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }*/

        .animation {
            display: inline-block;
            margin-bottom: 24px;
        }

        h1 {
            font-size: var(--fs-3xl);
            font-weight: 400;
            text-transform: uppercase;
            margin: 0;
        }

        p {
            font-size: var(--fs-md);
            font-weight: 700;
            margin: 0;
        }

        a {
            color: #f6921e;
            font-weight: bold;
            text-decoration: none;
            margin-left: 5px;
        }
        .animation img {
            width: 200px
        }
        h1 {
            font-family: "Plus Jakarta Sans", sans-serif;
        }
        p {
            font-family:"Plus Jakarta Sans", sans-serif;
        }

/* ── checkout ── */

/* ══════════════════════════════════════════
   CHECKOUT — Deep Space Theme
══════════════════════════════════════════ */
.ck-page { font-family:"Plus Jakarta Sans", sans-serif; }
.ck-page * { box-sizing: border-box; }

/* ── Reset site container constraints ── */
body .checkout__area { padding: 0 !important; background: transparent !important; }

/* ── Page hero ── */
.ck-hero {
    background: #1C1514; 
    padding: 48px 0 36px;
    position: relative; overflow: hidden;
}
.ck-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.ck-hero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(124,82,255,.6) 35%, rgba(155,81,224,.6) 65%, transparent);
}
.ck-hero-orb {
    position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px);
}
.ck-hero-orb-1 { width:400px; height:400px; background:radial-gradient(circle,rgba(124,82,255,.2),transparent 65%); top:-160px; left:-80px; }
.ck-hero-orb-2 { width:300px; height:300px; background:radial-gradient(circle,rgba(155,81,224,.18),transparent 65%); bottom:-100px; right:5%; }
.ck-hero-inner { position: relative; z-index: 1; }
.ck-hero-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(124,82,255,.18); border: 1px solid rgba(124,82,255,.35);
    border-radius: 100px; padding: 5px 14px;
    font-size: var(--fs-xs); font-weight: 600; color: #FFFFFF; margin-bottom: 14px;
}
.ck-hero-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.6rem,4vw,2.4rem); font-weight: 900;
    color: #fff; margin: 0 0 10px; letter-spacing: -.02em;
}
.ck-hero-title span {
    background: linear-gradient(90deg, #FFFFFF, #1C1514);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ck-hero-sub { font-size: var(--fs-sm); color: rgba(255,255,255,.45); margin: 0; }
.ck-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: rgba(255,255,255,.35); margin-top: 18px; flex-wrap: wrap;
}
.ck-breadcrumb a { color: rgba(255,255,255,.45); text-decoration: none; transition: color .2s; }
.ck-breadcrumb a:hover { color: #FFFFFF; }
.ck-breadcrumb i { font-size: 8px; }

/* ── Secure bar ── */
.ck-secure-bar {
    background: rgba(16,185,129,.1); border-bottom: 1px solid rgba(16,185,129,.2);
    padding: 10px 0;
}
.ck-secure-bar-inner {
    display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.ck-secure-chip {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-xs); color: rgba(255,255,255,.55);
}
.ck-secure-chip i { color: #34d399; font-size: var(--fs-xs); }

/* ── Body ── */
.ck-body { background: #f4f3fb; padding: 40px 0 64px; }

/* ── Currency alerts ── */
.ck-alert {
    display: flex; align-items: flex-start; gap: 12px;
    background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25);
    border-left: 4px solid #f59e0b; border-radius: 12px;
    padding: 14px 18px; margin-bottom: 14px;
    font-size: var(--fs-sm); color: #92400e; line-height: 1.55;
}
.ck-alert i { color: #f59e0b; margin-top: 2px; flex-shrink: 0; }

/* ── Left card ── */
.ck-card {
    background: #fff; border-radius: 18px;
    border: 1px solid #e8eaf2;
    box-shadow: 0 2px 16px rgba(10,6,24,.07);
    overflow: hidden; margin-bottom: 20px;
}
.ck-card-head {
    padding: 20px 24px 18px;
    border-bottom: 1px solid #f0eef8;
    display: flex; align-items: center; gap: 12px;
}
.ck-card-head-icon {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: #1C1514;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .9rem;
    box-shadow: 0 4px 12px rgba(124,82,255,.35);
}
.ck-card-head-title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1rem;
    font-weight: 800; color: #0f172a; margin: 0;
}
.ck-card-head-sub { font-size:1rem; color: #9ca3af; margin: 2px 0 0; }
.ck-card-body { padding: 24px; }

/* ── Payment method grid ── */
.ck-methods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}
.ck-method {
    background: #fafafe; border: 2px solid #e8eaf2;
    border-radius: 14px; padding: 18px 12px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none;
    transition: all .25s; position: relative;
    min-height: 90px;
}
.ck-method:hover {
    border-color: #1C1514;
    background: #f5f0ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124,82,255,.15);
    text-decoration: none;
}
.ck-method img {
    max-height: 36px; max-width: 110px;
    object-fit: contain; display: block;
}
.ck-method-label {
    font-size: .7rem; font-weight: 600; color: #9ca3af;
    margin-top: 8px; text-transform: uppercase; letter-spacing: .05em;
}
.ck-method.is-free {
    border-color: rgba(16,185,129,.4);
    background: rgba(16,185,129,.04);
}
.ck-method.is-free:hover { border-color: #10b981; background: rgba(16,185,129,.08); }

/* ── Free gateway button ── */
.ck-free-form button {
    background: transparent; padding: 0; border: none; width: 100%;
}
.ck-free-form .ck-method { width: 100%; }

/* ── Right sidebar: Order summary ── */
.ck-summary {
    background: #1C1514; 
    border-radius: 18px; padding: 28px 26px;
    position: sticky; top: 20px;
    border: 1px solid rgba(124,82,255,.2);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    overflow: hidden; position: relative;
}
.ck-summary::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #1C1514 40%, #9b51e0 60%, transparent);
}
.ck-summary-orb {
    position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(124,82,255,.2), transparent 65%);
    top: -80px; right: -60px;
}
.ck-summary-inner { position: relative; z-index: 1; }
.ck-summary-title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem;
    font-weight: 800; color: #fff; margin: 0 0 22px;
    display: flex; align-items: center; gap: 10px;
}
.ck-summary-title i { color: #FFFFFF; }

/* Summary rows */
.ck-summary-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: .875rem;
}
.ck-summary-row:last-of-type { border-bottom: none; }
.ck-summary-label { color: rgba(255,255,255,.5); }
.ck-summary-val { color: #fff; font-weight: 600; }

/* Discount */
.ck-discount-label { color: rgba(255,255,255,.5); }
.ck-discount-code {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; background: rgba(124,82,255,.2);
    border: 1px solid rgba(124,82,255,.3);
    color: #FFFFFF; padding: 2px 8px; border-radius: 100px;
    margin-top: 3px;
}
.ck-remove-coupon {
    color: #f87171 !important; font-size:1rem;
    text-decoration: none; margin-left: 4px;
    transition: color .2s;
}
.ck-remove-coupon:hover { color: #ef4444 !important; }

/* Total row */
.ck-summary-total {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.ck-total-label {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: .85rem;
    font-weight: 700; color: rgba(255,255,255,.6);
    text-transform: uppercase; letter-spacing: .07em;
}
.ck-total-val {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.6rem;
    font-weight: 900; color: #fff; letter-spacing: -.02em;
}

/* Payable breakdown */
.ck-payable-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.ck-payable-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255,255,255,.3);
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.ck-payable-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .82rem; margin-bottom: 6px;
}
.ck-payable-row:last-child { margin-bottom: 0; }
.ck-payable-gateway { color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 6px; }
.ck-payable-gateway::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #1C1514; flex-shrink: 0;
}
.ck-payable-amount { color: #e9d5ff; font-weight: 600; }

/* Item count badge */
.ck-item-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(124,82,255,.18); border: 1px solid rgba(124,82,255,.3);
    border-radius: 100px; padding: 4px 10px;
    font-size: .72rem; font-weight: 700; color: #FFFFFF;
}

/* ── Modals ── */
.ck-modal { z-index: 10000 !important; }
.modal-backdrop { z-index: 9999 !important; }
.ck-summary { isolation: isolate; }
.ck-modal .modal-content {
    border: none; border-radius: 18px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.ck-modal .modal-header {
    background: linear-gradient(135deg, #111827, #1C1514);
    border-bottom: 1px solid rgba(124,82,255,.2);
    padding: 20px 24px;
}
.ck-modal .modal-title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.05rem;
    font-weight: 800; color: #fff; margin: 0;
    display: flex; align-items: center; gap: 10px;
}
.ck-modal .modal-title i { color: #FFFFFF; }
.ck-modal .btn-close { filter: invert(1) brightness(1.5); opacity: .6; }
.ck-modal .modal-body { padding: 24px; background: #fff; }
.ck-modal .modal-footer { padding: 16px 24px; background: #fafafe; border-top: 1px solid #f0eef8; }

/* Modal form fields */
.ck-mfg { margin-bottom: 16px; }
.ck-mlabel {
    display: block; font-size: .78rem; font-weight: 700;
    color: #374151; margin-bottom: 6px;
}
.ck-mlabel .req { color: #ef4444; }
.ck-minput {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid #e5e7eb; border-radius: 10px;
    font-size: .875rem; color: #111827; background: #fafafa;
    outline: none; transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
}
.ck-minput:focus {
    border-color: #1C1514;
    box-shadow: 0 0 0 3px rgba(124,82,255,.12);
    background: #fff;
}
.ck-mbtn-cancel {
    background: #f3f4f6; color: #374151; border: 1.5px solid #e5e7eb;
    padding: 9px 20px; border-radius: 9px; font-size: .875rem;
    font-weight: 600; cursor: pointer; transition: all .2s;
}
.ck-mbtn-cancel:hover { background: #e5e7eb; }
.ck-mbtn-pay {
    background: #1C1514;
    color: #fff; border: none;
    padding: 9px 24px; border-radius: 9px; font-size: .875rem;
    font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 14px rgba(124,82,255,.4);
    transition: all .2s;
}
.ck-mbtn-pay:hover { box-shadow: 0 6px 18px rgba(124,82,255,.5); transform: translateY(-1px); }
.ck-bank-info {
    background: #faf5ff; border: 1px solid rgba(124,82,255,.15);
    border-radius: 10px; padding: 14px 16px;
    font-size: .84rem; color: #4a1d96; line-height: var(--lh-normal);
    margin-bottom: 18px;
}

/* ── Responsive ── */
@media(max-width:991px) {
    .ck-summary { position: static; margin-top: 24px; }
    .ck-methods { grid-template-columns: repeat(3,1fr); }
}
@media(max-width:575px) {
    .ck-methods { grid-template-columns: repeat(2,1fr); }
    .ck-card-body { padding: 16px; }
    .ck-hero { padding: 32px 0 24px; }
}


/* ── create ── */
        .bottom-border {
            border-bottom: 1px solid rgb(56, 53, 53);
        }

/* ── edit ── */
        .bottom-border {
            border-bottom: 1px solid rgb(56, 53, 53);
        }

/* ── index ── */
        .dd-custom-css {
            position: absolute;
            will-change: transform;
            top: 0px;
            left: 0px;
            transform: translate3d(0px, -131px, 0px);
        }

        .max-h-400 {
            min-height: 400px;
        }

/* ── terms-and-conditions ── */
/* ── Reset site container so .pp-wrap can be full-width ── */
/* Prevent global heading/link colours leaking in */
.pp-wrap h1, .pp-wrap h2, .pp-wrap h3, .pp-wrap h4, .pp-wrap h5, .pp-wrap h6 {
  color: inherit !important;
  font-family: inherit;
}
.pp-wrap a { color: inherit; text-decoration: none; }

/* ====================================================
   IGURUS TERMS & CONDITIONS PAGE — scoped under .pp-wrap
==================================================== */
.pp-wrap {
  --violet-950: #2B0510;
  --violet-900: #4A0A1D;
  --violet-800: #A41034; 
  --violet-700: #A41034;
  --violet-600: #A41034;
  --violet-500: #D45A76;
  --violet-300: #FFFFFF;
  --violet-200: #F6D9DF;
  --violet-100: #FBEEF0;
  --violet-50:  #FDF5F6;
  --ink:        #221A38;
  --ink-soft:   #4A4063;
  --ink-faint:  #7C7494;
  --line:       #E7E1F5;
  --paper:      #FBFAFF;
  --paper-card: #FFFFFF;
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --maxw:  1180px;
  --radius: 18px;

  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pp-wrap *, .pp-wrap *::before, .pp-wrap *::after { box-sizing: border-box; }
.pp-wrap ::selection { background: var(--violet-200); color: var(--violet-900); }

/* ── HERO ── */
.pp-wrap .hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 12% 0%, #6B0E29 0%, var(--violet-900) 45%, var(--violet-950) 100%);
  color: #fff;
}
.pp-wrap .hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(164,16,52,.45), transparent 70%),
    radial-gradient(500px 280px at 100% 90%, rgba(196,181,253,.22), transparent 70%);
  pointer-events: none;
}
.pp-wrap .hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
}
.pp-wrap .hero-inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 86px 32px 120px;
}
.pp-wrap .eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet-300);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.pp-wrap .eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--violet-300); display: inline-block;
}
.pp-wrap .hero h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(46px, 7vw, 82px);
  line-height: .98; letter-spacing: -.03em;
  margin: 22px 0 0; color: #fff;
}
.pp-wrap .hero h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--violet-300);
}
.pp-wrap .hero-lede {
  max-width: 640px; margin: 24px 0 0;
  font-size: 21px; line-height: var(--lh-normal); color: #E9E3FB;
}
.pp-wrap .hero-meta {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--violet-200);
}
.pp-wrap .hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.pp-wrap .hero-meta dt { color: var(--violet-300); opacity: .75; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.pp-wrap .hero-meta dd { margin: 0; color: #fff; font-size: var(--fs-base); font-weight: 500; }

/* ── SUMMARY CARD ── */
.pp-wrap .summary-wrap {
  max-width: var(--maxw); margin: -72px auto 0;
  padding: 0 32px; position: relative; z-index: 5;
}
.pp-wrap .summary-card {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -34px rgba(46,16,101,.45);
  padding: 38px 44px;
  display: grid; grid-template-columns: 168px 1fr; gap: 36px;
}
.pp-wrap .summary-tag {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600);
}
.pp-wrap .summary-tag .tldr {
  display: block; font-size: var(--fs-4xl); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
  margin-top: 8px; text-transform: none;
}
.pp-wrap .summary-card p {
  margin: 0; font-size: var(--fs-lg); line-height: 1.72; color: var(--ink-soft);
}
.pp-wrap .summary-card strong { color: var(--ink); font-weight: 600; }

/* ── LAYOUT ── */
.pp-wrap .layout {
  max-width: var(--maxw); margin: 0 auto;
  padding: 72px 32px 40px;
  display: grid; grid-template-columns: 256px 1fr;
  gap: 64px; align-items: start;
}

/* TOC */
.pp-wrap .toc { position: sticky; top: 96px; font-family: var(--sans); }
.pp-wrap .toc-title {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 18px; padding-left: 14px;
}
.pp-wrap .toc ol { list-style: none; margin: 0; padding: 0; }
.pp-wrap .toc li { margin: 0; }
.pp-wrap .toc a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 14px; border-left: 2px solid var(--line);
  color: var(--ink-faint); text-decoration: none;
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  transition: color .15s, border-color .15s, background .15s;
}
.pp-wrap .toc a .num { font-size: var(--fs-xs); font-weight: 600; opacity: .7; min-width: 18px; }
.pp-wrap .toc a:hover { color: var(--violet-700); border-color: var(--violet-300); }
.pp-wrap .toc a.active {
  color: var(--violet-800); border-color: var(--violet-600);
  background: var(--violet-50); font-weight: 600;
}
.pp-wrap .toc a.active .num { opacity: 1; color: var(--violet-600); }

/* CONTENT */
.pp-wrap .content { min-width: 0; max-width: 760px; }
.pp-wrap section.policy { scroll-margin-top: 96px; padding-bottom: 64px; }
.pp-wrap section.policy + section.policy { border-top: 1px solid var(--line); padding-top: 56px; }

.pp-wrap .sec-head { display: flex; align-items: baseline; gap: 20px; margin: 0 0 8px; }
.pp-wrap .sec-num {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-xl);
  color: var(--violet-600); letter-spacing: .02em; flex-shrink: 0;
  line-height: 1;
}
.pp-wrap .sec-head h2 {
  font-family: var(--sans) !important; font-weight: 600 !important;
  font-size: clamp(27px, 3.4vw, 34px) !important;
  line-height: 1.12 !important; letter-spacing: -.02em !important;
  margin: 0 !important; color: var(--ink) !important;
}
.pp-wrap .sec-intro {
  margin: 0 0 26px 35px; color: var(--ink-soft); font-size: var(--fs-lg); max-width: 640px;
}
.pp-wrap .content p { margin: 0 0 18px 35px; max-width: 660px; }
.pp-wrap .content p.flush { margin-left: 0; }

/* Unordered Lists and Custom Items */
.pp-wrap .content ul { margin: 0 0 24px 35px; padding-left: 20px; color: var(--ink-soft); }
.pp-wrap .content ul li { margin-bottom: 10px; font-size: var(--fs-md); line-height: var(--lh-normal); }
.pp-wrap .content ul li strong { color: var(--ink); }

/* Ordered Lists */
.pp-wrap .content ol { margin: 0 0 24px 35px; padding-left: 20px; color: var(--ink-soft); }
.pp-wrap .content ol li { margin-bottom: 10px; font-size: var(--fs-md); line-height: var(--lh-normal); }
.pp-wrap .content ol li strong { color: var(--ink); }

/* Definition list */
.pp-wrap .deflist { margin: 0 0 8px 35px; padding: 0; list-style: none; display: grid; gap: 2px; }
.pp-wrap .deflist li {
  display: grid; grid-template-columns: 232px 1fr;
  gap: 8px 28px; padding: 15px 4px;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.pp-wrap .deflist li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .deflist dt {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-base);
  color: var(--violet-800); letter-spacing: -.01em;
}
.pp-wrap .deflist dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.62; }

/* Callout */
.pp-wrap .callout {
  margin: 8px 0 24px 35px; padding: 22px 26px; border-radius: 14px;
  background: linear-gradient(120deg, var(--violet-50), #fff);
  border: 1px solid var(--violet-200);
  display: flex; gap: 16px; align-items: flex-start;
}
.pp-wrap .callout.alert-danger-styled {
  background: linear-gradient(120deg, #FFF5F5, #ffffff);
  border-color: #FEB2B2;
}
.pp-wrap .callout.alert-danger-styled .ico {
  background: #E53E3E;
}
.pp-wrap .callout .ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--violet-600); color: #fff; display: grid; place-items: center;
}
.pp-wrap .callout p { margin: 0; font-size: var(--fs-md); color: var(--ink); margin-left: 0 !important; }
.pp-wrap .callout strong { color: var(--ink); }
.pp-wrap .callout.alert-danger-styled strong { color: #C53030; }
.pp-wrap .callout a { color: var(--violet-700); font-weight: 600; text-decoration: none; }
.pp-wrap .callout a:hover { text-decoration: underline; }

/* Rights / contact mini-cards */
.pp-wrap .cards { margin: 18px 0 24px 35px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-wrap .cards.solo { grid-template-columns: 1fr; }
.pp-wrap .cards.triple { grid-template-columns: 1fr 1fr 1fr; }
.pp-wrap .card {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; background: var(--paper-card);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.pp-wrap .card:hover {
  border-color: var(--violet-300); transform: translateY(-2px);
  box-shadow: 0 14px 28px -20px rgba(164,16,52,.5);
}
.pp-wrap .card h3 {
  font-family: var(--sans); font-size: var(--fs-base); font-weight: 600;
  margin: 0 0 6px; color: var(--violet-800);
  display: flex; align-items: center; gap: 9px;
}
.pp-wrap .card h3 .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-500); }
.pp-wrap .card p { margin: 0 !important; font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.55; margin-left: 0 !important; }
.pp-wrap .card .price-tag { font-family: var(--sans); font-size: var(--fs-2xl); font-weight: 700; color: var(--ink); margin-top: 8px; }

/* Contact strip */
.pp-wrap .contact-list { margin: 4px 0 0 35px; list-style: none; padding: 0; display: grid; gap: 0; }
.pp-wrap .contact-list li {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 6px 20px; padding: 16px 2px;
  border-bottom: 1px solid var(--line);
}
.pp-wrap .contact-list li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .contact-list .label { font-family: var(--sans); font-weight: 500; font-size: var(--fs-md); color: var(--ink); }
.pp-wrap .contact-list a { font-family: var(--sans); font-weight: 600; color: var(--violet-700); text-decoration: none; font-size: var(--fs-md); }
.pp-wrap .contact-list a:hover { text-decoration: underline; }
.pp-wrap .contact-list .plain { font-family: var(--sans); color: var(--ink-soft); font-size: var(--fs-base); }

/* ── Responsive ── */
@media (max-width: 920px) {
  .pp-wrap .layout { grid-template-columns: 1fr; gap: 32px; }
  .pp-wrap .toc { position: static; border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper-card); }
  .pp-wrap .toc ol { columns: 2; column-gap: 24px; }
  .pp-wrap .summary-card { grid-template-columns: 1fr; gap: 16px; padding: 30px 26px; }
  .pp-wrap .summary-tag .tldr { font-size: 34px; }
  .pp-wrap .cards.triple { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pp-wrap { font-size: var(--fs-md); }
  .pp-wrap .hero-inner { padding: 60px 22px 96px; }
  .pp-wrap .summary-wrap, .pp-wrap .layout { padding-left: 20px; padding-right: 20px; }
  .pp-wrap .deflist li { grid-template-columns: 1fr; gap: 4px; }
  .pp-wrap .cards { grid-template-columns: 1fr; }
  .pp-wrap .content p, .pp-wrap .sec-intro, .pp-wrap .deflist, .pp-wrap .content ul, .pp-wrap .content ol,
  .pp-wrap .callout, .pp-wrap .cards, .pp-wrap .contact-list { margin-left: 0; }
  .pp-wrap .sec-head { gap: 12px; }
  .pp-wrap .toc ol { columns: 1; }
}

/* ── privacy-policy ── */
/* ── Reset site container so .pp-wrap can be full-width ── */
/* Prevent global heading/link colours leaking in */
.pp-wrap h1,.pp-wrap h2,.pp-wrap h3,.pp-wrap h4,.pp-wrap h5,.pp-wrap h6 {
  color: inherit !important;
  font-family: inherit;
}
.pp-wrap a { color: inherit; text-decoration: none; }

/* ====================================================
   IGURUS PRIVACY PAGE — scoped under .pp-wrap
==================================================== */
.pp-wrap {
  --violet-950: #2B0510;
  --violet-900: #4A0A1D;
  --violet-800: #A41034; 
  --violet-700: #A41034;
  --violet-600: #A41034;
  --violet-500: #D45A76;
  --violet-300: #FFFFFF;
  --violet-200: #F6D9DF;
  --violet-100: #FBEEF0;
  --violet-50:  #FDF5F6;
  --ink:        #221A38;
  --ink-soft:   #4A4063;
  --ink-faint:  #7C7494;
  --line:       #E7E1F5;
  --paper:      #FBFAFF;
  --paper-card: #FFFFFF;
  --serif: "Plus Jakarta Sans", sans-serif;
  --sans:  "Plus Jakarta Sans", sans-serif;
  --maxw:  1180px;
  --radius: 18px;

  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pp-wrap *, .pp-wrap *::before, .pp-wrap *::after { box-sizing: border-box; }
.pp-wrap ::selection { background: var(--violet-200); color: var(--violet-900); }

/* ── HERO ── */
.pp-wrap .hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 12% 0%, #6B0E29 0%, var(--violet-900) 45%, var(--violet-950) 100%);
  color: #fff;
}
.pp-wrap .hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(164,16,52,.45), transparent 70%),
    radial-gradient(500px 280px at 100% 90%, rgba(196,181,253,.22), transparent 70%);
  pointer-events: none;
}
.pp-wrap .hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
}
.pp-wrap .hero-inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 86px 32px 120px;
}
.pp-wrap .eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet-300);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.pp-wrap .eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--violet-300); display: inline-block;
}
.pp-wrap .hero h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(46px, 7vw, 82px);
  line-height: .98; letter-spacing: -.03em;
  margin: 22px 0 0; color: #fff;
}
.pp-wrap .hero h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--violet-300);
}
.pp-wrap .hero-lede {
  max-width: 640px; margin: 24px 0 0;
  font-size: 21px; line-height: var(--lh-normal); color: #E9E3FB;
}
.pp-wrap .hero-meta {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--violet-200);
}
.pp-wrap .hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.pp-wrap .hero-meta dt { color: var(--violet-300); opacity: .75; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.pp-wrap .hero-meta dd { margin: 0; color: #fff; font-size: var(--fs-base); font-weight: 500; }

/* ── SUMMARY CARD ── */
.pp-wrap .summary-wrap {
  max-width: var(--maxw); margin: -72px auto 0;
  padding: 0 32px; position: relative; z-index: 5;
}
.pp-wrap .summary-card {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -34px rgba(46,16,101,.45);
  padding: 38px 44px;
  display: grid; grid-template-columns: 168px 1fr; gap: 36px;
}
.pp-wrap .summary-tag {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600);
}
.pp-wrap .summary-tag .tldr {
  display: block; font-size: var(--fs-4xl); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
  margin-top: 8px; text-transform: none;
}
.pp-wrap .summary-card p {
  margin: 0; font-size: var(--fs-lg); line-height: 1.72; color: var(--ink-soft);
}
.pp-wrap .summary-card strong { color: var(--ink); font-weight: 600; }

/* ── LAYOUT ── */
.pp-wrap .layout {
  max-width: var(--maxw); margin: 0 auto;
  padding: 72px 32px 40px;
  display: grid; grid-template-columns: 256px 1fr;
  gap: 64px; align-items: start;
}

/* TOC */
.pp-wrap .toc { position: sticky; top: 96px; font-family: var(--sans); }
.pp-wrap .toc-title {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 18px; padding-left: 14px;
}
.pp-wrap .toc ol { list-style: none; margin: 0; padding: 0; }
.pp-wrap .toc li { margin: 0; }
.pp-wrap .toc a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 14px; border-left: 2px solid var(--line);
  color: var(--ink-faint); text-decoration: none;
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  transition: color .15s, border-color .15s, background .15s;
}
.pp-wrap .toc a .num { font-size: var(--fs-xs); font-weight: 600; opacity: .7; min-width: 18px; }
.pp-wrap .toc a:hover { color: var(--violet-700); border-color: var(--violet-300); }
.pp-wrap .toc a.active {
  color: var(--violet-800); border-color: var(--violet-600);
  background: var(--violet-50); font-weight: 600;
}
.pp-wrap .toc a.active .num { opacity: 1; color: var(--violet-600); }

/* CONTENT */
.pp-wrap .content { min-width: 0; max-width: 760px; }
.pp-wrap section.policy { scroll-margin-top: 96px; padding-bottom: 64px; }
.pp-wrap section.policy + section.policy { border-top: 1px solid var(--line); padding-top: 56px; }

.pp-wrap .sec-head { display: flex; align-items: baseline; gap: 20px; margin: 0 0 8px; }
.pp-wrap .sec-num {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-xl);
  color: var(--violet-600); letter-spacing: .02em; flex-shrink: 0;
  line-height: 1;
}
.pp-wrap .sec-head h2 {
  font-family: var(--sans) !important; font-weight: 600 !important;
  font-size: clamp(27px, 3.4vw, 34px) !important;
  line-height: 1.12 !important; letter-spacing: -.02em !important;
  margin: 0 !important; color: var(--ink) !important;
}
.pp-wrap .sec-intro {
  margin: 0 0 26px 35px; color: var(--ink-soft); font-size: var(--fs-lg); max-width: 640px;
}
.pp-wrap .content p { margin: 0 0 18px 35px; max-width: 660px; }
.pp-wrap .content p.flush { margin-left: 0; }

/* Definition list */
.pp-wrap .deflist { margin: 0 0 8px 35px; padding: 0; list-style: none; display: grid; gap: 2px; }
.pp-wrap .deflist li {
  display: grid; grid-template-columns: 232px 1fr;
  gap: 8px 28px; padding: 15px 4px;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.pp-wrap .deflist li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .deflist dt {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-base);
  color: var(--violet-800); letter-spacing: -.01em;
}
.pp-wrap .deflist dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.62; }

/* Callout */
.pp-wrap .callout {
  margin: 8px 0 8px 35px; padding: 22px 26px; border-radius: 14px;
  background: linear-gradient(120deg, var(--violet-50), #fff);
  border: 1px solid var(--violet-200);
  display: flex; gap: 16px; align-items: flex-start;
}
.pp-wrap .callout .ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--violet-600); color: #fff; display: grid; place-items: center;
}
.pp-wrap .callout p { margin: 0; font-size: var(--fs-md); color: var(--ink); margin-left: 0 !important; }
.pp-wrap .callout strong { color: var(--violet-800); }
.pp-wrap .callout a { color: var(--violet-700); font-weight: 600; text-decoration: none; }
.pp-wrap .callout a:hover { text-decoration: underline; }

/* Rights / contact mini-cards */
.pp-wrap .cards { margin: 4px 0 0 35px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-wrap .cards.solo { grid-template-columns: 1fr; }
.pp-wrap .card {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; background: var(--paper-card);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.pp-wrap .card:hover {
  border-color: var(--violet-300); transform: translateY(-2px);
  box-shadow: 0 14px 28px -20px rgba(164,16,52,.5);
}
.pp-wrap .card h3 {
  font-family: var(--sans); font-size: var(--fs-base); font-weight: 600;
  margin: 0 0 6px; color: var(--violet-800);
  display: flex; align-items: center; gap: 9px;
}
.pp-wrap .card h3 .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-500); }
.pp-wrap .card p { margin: 0 !important; font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.55; }
.pp-wrap .card a { color: var(--violet-700); text-decoration: none; font-weight: 600; }
.pp-wrap .card a:hover { text-decoration: underline; }

/* Contact strip */
.pp-wrap .contact-list { margin: 4px 0 0 35px; list-style: none; padding: 0; display: grid; gap: 0; }
.pp-wrap .contact-list li {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 6px 20px; padding: 16px 2px;
  border-bottom: 1px solid var(--line);
}
.pp-wrap .contact-list li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .contact-list .label { font-family: var(--sans); font-weight: 500; font-size: var(--fs-md); color: var(--ink); }
.pp-wrap .contact-list a { font-family: var(--sans); font-weight: 600; color: var(--violet-700); text-decoration: none; font-size: var(--fs-md); }
.pp-wrap .contact-list a:hover { text-decoration: underline; }
.pp-wrap .contact-list .plain { font-family: var(--sans); color: var(--ink-soft); font-size: var(--fs-base); }

/* ── Responsive ── */
@media (max-width: 920px) {
  .pp-wrap .layout { grid-template-columns: 1fr; gap: 32px; }
  .pp-wrap .toc { position: static; border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper-card); }
  .pp-wrap .toc ol { columns: 2; column-gap: 24px; }
  .pp-wrap .summary-card { grid-template-columns: 1fr; gap: 16px; padding: 30px 26px; }
  .pp-wrap .summary-tag .tldr { font-size: 34px; }
}
@media (max-width: 640px) {
  .pp-wrap { font-size: var(--fs-md); }
  .pp-wrap .hero-inner { padding: 60px 22px 96px; }
  .pp-wrap .summary-wrap, .pp-wrap .layout { padding-left: 20px; padding-right: 20px; }
  .pp-wrap .deflist li { grid-template-columns: 1fr; gap: 4px; }
  .pp-wrap .cards { grid-template-columns: 1fr; }
  .pp-wrap .content p, .pp-wrap .sec-intro, .pp-wrap .deflist,
  .pp-wrap .callout, .pp-wrap .cards, .pp-wrap .contact-list { margin-left: 0; }
  .pp-wrap .sec-head { gap: 12px; }
  .pp-wrap .toc ol { columns: 1; }
}

/* ── master-services-agreement ── */
/* ── Reset site container so .pp-wrap can expand seamlessly ── */
/* Prevent global layout color leaks */
.pp-wrap h1, .pp-wrap h2, .pp-wrap h3, .pp-wrap h4, .pp-wrap h5, .pp-wrap h6 {
  color: inherit !important;
  font-family: inherit;
}
.pp-wrap a { color: inherit; text-decoration: none; }

/* ====================================================
   IGURUS PREMIUM DOCUMENT DESIGN MODULE
==================================================== */
.pp-wrap {
  --violet-950: #2B0510;
  --violet-900: #4A0A1D;
  --violet-800: #A41034; 
  --violet-700: #A41034;
  --violet-600: #A41034;
  --violet-500: #D45A76;
  --violet-300: #FFFFFF;
  --violet-200: #F6D9DF;
  --violet-100: #FBEEF0;
  --violet-50:  #FDF5F6;
  --ink:        #221A38;
  --ink-soft:   #4A4063;
  --ink-faint:  #7C7494;
  --line:       #E7E1F5;
  --paper:      #FBFAFF;
  --paper-card: #FFFFFF;
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --maxw:  1180px;
  --radius: 18px;

  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pp-wrap *, .pp-wrap *::before, .pp-wrap *::after { box-sizing: border-box; }
.pp-wrap ::selection { background: var(--violet-200); color: var(--violet-900); }

/* ── HERO BANNER ── */
.pp-wrap .hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 12% 0%, #6B0E29 0%, var(--violet-900) 45%, var(--violet-950) 100%);
  color: #fff;
}
.pp-wrap .hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(164,16,52,.45), transparent 70%),
    radial-gradient(500px 280px at 100% 90%, rgba(196,181,253,.22), transparent 70%);
  pointer-events: none;
}
.pp-wrap .hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
}
.pp-wrap .hero-inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 86px 32px 120px;
}
.pp-wrap .eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet-300);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.pp-wrap .eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--violet-300); display: inline-block;
}
.pp-wrap .hero h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(42px, 6.5vw, 76px);
  line-height: 1.02; letter-spacing: -.03em;
  margin: 22px 0 0; color: #fff;
}
.pp-wrap .hero h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--violet-300);
}
.pp-wrap .hero-lede {
  max-width: 680px; margin: 24px 0 0;
  font-size: 21px; line-height: var(--lh-normal); color: #E9E3FB;
}
.pp-wrap .hero-meta {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--violet-200);
}
.pp-wrap .hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.pp-wrap .hero-meta dt { color: var(--violet-300); opacity: .75; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.pp-wrap .hero-meta dd { margin: 0; color: #fff; font-size: var(--fs-base); font-weight: 500; }

/* ── CONTEXTUAL OVERLAY SUMMARY ── */
.pp-wrap .summary-wrap {
  max-width: var(--maxw); margin: -72px auto 0;
  padding: 0 32px; position: relative; z-index: 5;
}
.pp-wrap .summary-card {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -34px rgba(46,16,101,.45);
  padding: 38px 44px;
  display: grid; grid-template-columns: 168px 1fr; gap: 36px;
}
.pp-wrap .summary-tag {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600);
}
.pp-wrap .summary-tag .tldr {
  display: block; font-size: var(--fs-4xl); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
  margin-top: 8px; text-transform: none;
}
.pp-wrap .summary-card p {
  margin: 0; font-size: var(--fs-lg); line-height: 1.72; color: var(--ink-soft);
}
.pp-wrap .summary-card strong { color: var(--ink); font-weight: 600; }

/* ── STRUCTURAL TWO-COLUMN GRID ── */
.pp-wrap .layout {
  max-width: var(--maxw); margin: 0 auto;
  padding: 72px 32px 40px;
  display: grid; grid-template-columns: 260px 1fr;
  gap: 64px; align-items: start;
}

/* TRACKING NAVIGATION SIDEBAR */
.pp-wrap .toc { position: sticky; top: 96px; font-family: var(--sans); }
.pp-wrap .toc-title {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 18px; padding-left: 14px;
}
.pp-wrap .toc ol { list-style: none; margin: 0; padding: 0; }
.pp-wrap .toc li { margin: 0; }
.pp-wrap .toc a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 14px; border-left: 2px solid var(--line);
  color: var(--ink-faint); text-decoration: none;
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  transition: color .15s, border-color .15s, background .15s;
}
.pp-wrap .toc a .num { font-size: var(--fs-xs); font-weight: 600; opacity: .7; min-width: 18px; }
.pp-wrap .toc a:hover { color: var(--violet-700); border-color: var(--violet-300); }
.pp-wrap .toc a.active {
  color: var(--violet-800); border-color: var(--violet-600);
  background: var(--violet-50); font-weight: 600;
}
.pp-wrap .toc a.active .num { opacity: 1; color: var(--violet-600); }

/* CONTENT MODULES */
.pp-wrap .content { min-width: 0; max-width: 760px; }
.pp-wrap section.policy { scroll-margin-top: 96px; padding-bottom: 64px; }
.pp-wrap section.policy + section.policy { border-top: 1px solid var(--line); padding-top: 56px; }

.pp-wrap .sec-head { display: flex; align-items: baseline; gap: 20px; margin: 0 0 16px; }
.pp-wrap .sec-num {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-xl);
  color: var(--violet-600); letter-spacing: .02em; flex-shrink: 0;
  line-height: 1;
}
.pp-wrap .sec-head h2 {
  font-family: var(--sans) !important; font-weight: 600 !important;
  font-size: clamp(24px, 3.2vw, 30px) !important;
  line-height: 1.15 !important; letter-spacing: -.02em !important;
  margin: 0 !important; color: var(--ink) !important;
}
.pp-wrap .sec-intro {
  margin: 0 0 26px 35px; color: var(--ink-soft); font-size: var(--fs-lg); max-width: 640px;
}
.pp-wrap .content p { margin: 0 0 18px 35px; max-width: 660px; }
.pp-wrap .content ul, .pp-wrap .content ol { margin: 12px 0 24px 35px; padding-left: 20px; color: var(--ink-soft); }
.pp-wrap .content li { margin-bottom: 10px; }
.pp-wrap .content strong { color: var(--ink); }

/* PREMIUM CARD COMPONENT BLOCK FOR INNER TEXT SUBSECTIONS */
.pp-wrap .sub-block-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0 24px 35px;
}
.pp-wrap .sub-block-card h3, .pp-wrap .sub-block-card h4 {
  font-family: var(--sans) !important;
  font-size: var(--fs-lg) !important;
  font-weight: 600 !important;
  color: var(--violet-900) !important;
  margin: 0 0 12px 0 !important;
}
.pp-wrap .sub-block-card h4 { font-size: var(--fs-md) !important; color: var(--violet-700) !important; }
.pp-wrap .sub-block-card p { margin-left: 0 !important; font-size: var(--fs-md); color: var(--ink-soft); }
.pp-wrap .sub-block-card p:last-child { margin-bottom: 0; }
.pp-wrap .sub-block-card ul, .pp-wrap .sub-block-card ol { margin-left: 0; padding-left: 18px; }

/* CALLOUT MESSAGE CONTAINERS */
.pp-wrap .callout {
  margin: 18px 0 24px 35px; padding: 22px 26px; border-radius: 14px;
  background: linear-gradient(120deg, var(--violet-50), #fff);
  border: 1px solid var(--violet-200);
  display: flex; gap: 16px; align-items: flex-start;
}
.pp-wrap .callout .ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--violet-600); color: #fff; display: grid; place-items: center;
}
.pp-wrap .callout p { margin: 0; font-size: var(--fs-md); color: var(--ink); margin-left: 0 !important; }
.pp-wrap .callout strong { color: var(--violet-800); }

/* STRUCTURED TERMINOLOGY GLOSSARIES */
.pp-wrap .deflist { margin: 0 0 8px 35px; padding: 0; list-style: none; display: grid; gap: 2px; }
.pp-wrap .deflist li {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 8px 28px; padding: 15px 4px;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.pp-wrap .deflist li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .deflist dt {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-base);
  color: var(--violet-800); letter-spacing: -.01em;
}
.pp-wrap .deflist dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-md); line-height: var(--lh-normal); }

/* Horizontal Dividers */
.pp-wrap hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0 32px 35px; }

/* ── RESPONSIVE ADAPTATIONS ── */
@media (max-width: 920px) {
  .pp-wrap .layout { grid-template-columns: 1fr; gap: 32px; }
  .pp-wrap .toc { position: static; border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper-card); }
  .pp-wrap .toc ol { columns: 2; column-gap: 24px; }
  .pp-wrap .summary-card { grid-template-columns: 1fr; gap: 16px; padding: 30px 26px; }
  .pp-wrap .summary-tag .tldr { font-size: 34px; }
}
@media (max-width: 640px) {
  .pp-wrap { font-size: var(--fs-md); }
  .pp-wrap .hero-inner { padding: 60px 22px 96px; }
  .pp-wrap .summary-wrap, .pp-wrap .layout { padding-left: 20px; padding-right: 20px; }
  .pp-wrap .deflist li { grid-template-columns: 1fr; gap: 4px; }
  .pp-wrap .content p, .pp-wrap .sec-intro, .pp-wrap .deflist, .pp-wrap .sub-block-card,
  .pp-wrap .callout, .pp-wrap .content ul, .pp-wrap .content ol, .pp-wrap hr { margin-left: 0; }
  .pp-wrap .sec-head { gap: 12px; }
  .pp-wrap .toc ol { columns: 1; }
}

/* ── intellectual-property-policy ── */
/* ── Reset site container so .pp-wrap can expand seamlessly ── */
/* Prevent global layout color leaks */
.pp-wrap h1, .pp-wrap h2, .pp-wrap h3, .pp-wrap h4, .pp-wrap h5, .pp-wrap h6 {
  color: inherit !important;
  font-family: inherit;
}
.pp-wrap a { color: inherit; text-decoration: none; }

/* ====================================================
   IGURUS PREMIUM DOCUMENT DESIGN MODULE
==================================================== */
.pp-wrap {
  --violet-950: #2B0510;
  --violet-900: #4A0A1D;
  --violet-800: #A41034; 
  --violet-700: #A41034;
  --violet-600: #A41034;
  --violet-500: #D45A76;
  --violet-300: #FFFFFF;
  --violet-200: #F6D9DF;
  --violet-100: #FBEEF0;
  --violet-50:  #FDF5F6;
  --ink:        #221A38;
  --ink-soft:   #4A4063;
  --ink-faint:  #7C7494;
  --line:       #E7E1F5;
  --paper:      #FBFAFF;
  --paper-card: #FFFFFF;
  --serif: "Plus Jakarta Sans", sans-serif;
  --sans:  "Plus Jakarta Sans", sans-serif;
  --maxw:  1180px;
  --radius: 18px;

  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pp-wrap *, .pp-wrap *::before, .pp-wrap *::after { box-sizing: border-box; }
.pp-wrap ::selection { background: var(--violet-200); color: var(--violet-900); }

/* ── HERO BANNER ── */
.pp-wrap .hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 12% 0%, #6B0E29 0%, var(--violet-900) 45%, var(--violet-950) 100%);
  color: #fff;
}
.pp-wrap .hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(164,16,52,.45), transparent 70%),
    radial-gradient(500px 280px at 100% 90%, rgba(196,181,253,.22), transparent 70%);
  pointer-events: none;
}
.pp-wrap .hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
}
.pp-wrap .hero-inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 86px 32px 120px;
}
.pp-wrap .eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet-300);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.pp-wrap .eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--violet-300); display: inline-block;
}
.pp-wrap .hero h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(42px, 6.5vw, 76px);
  line-height: 1.02; letter-spacing: -.03em;
  margin: 22px 0 0; color: #fff;
}
.pp-wrap .hero h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--violet-300);
}
.pp-wrap .hero-lede {
  max-width: 680px; margin: 24px 0 0;
  font-size: 21px; line-height: var(--lh-normal); color: #E9E3FB;
}
.pp-wrap .hero-meta {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--violet-200);
}
.pp-wrap .hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.pp-wrap .hero-meta dt { color: var(--violet-300); opacity: .75; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.pp-wrap .hero-meta dd { margin: 0; color: #fff; font-size: var(--fs-base); font-weight: 500; }

/* ── CONTEXTUAL OVERLAY SUMMARY ── */
.pp-wrap .summary-wrap {
  max-width: var(--maxw); margin: -72px auto 0;
  padding: 0 32px; position: relative; z-index: 5;
}
.pp-wrap .summary-card {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -34px rgba(46,16,101,.45);
  padding: 38px 44px;
  display: grid; grid-template-columns: 168px 1fr; gap: 36px;
}
.pp-wrap .summary-tag {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600);
}
.pp-wrap .summary-tag .tldr {
  display: block; font-size: var(--fs-4xl); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
  margin-top: 8px; text-transform: none;
}
.pp-wrap .summary-card p {
  margin: 0; font-size: var(--fs-lg); line-height: 1.72; color: var(--ink-soft);
}
.pp-wrap .summary-card strong { color: var(--ink); font-weight: 600; }

/* ── STRUCTURAL TWO-COLUMN GRID ── */
.pp-wrap .layout {
  max-width: var(--maxw); margin: 0 auto;
  padding: 72px 32px 40px;
  display: grid; grid-template-columns: 260px 1fr;
  gap: 64px; align-items: start;
}

/* TRACKING NAVIGATION SIDEBAR */
.pp-wrap .toc { position: sticky; top: 96px; font-family: var(--sans); }
.pp-wrap .toc-title {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 18px; padding-left: 14px;
}
.pp-wrap .toc ol { list-style: none; margin: 0; padding: 0; }
.pp-wrap .toc li { margin: 0; }
.pp-wrap .toc a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 14px; border-left: 2px solid var(--line);
  color: var(--ink-faint); text-decoration: none;
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  transition: color .15s, border-color .15s, background .15s;
}
.pp-wrap .toc a .num { font-size: var(--fs-xs); font-weight: 600; opacity: .7; min-width: 18px; }
.pp-wrap .toc a:hover { color: var(--violet-700); border-color: var(--violet-300); }
.pp-wrap .toc a.active {
  color: var(--violet-800); border-color: var(--violet-600);
  background: var(--violet-50); font-weight: 600;
}
.pp-wrap .toc a.active .num { opacity: 1; color: var(--violet-600); }

/* CONTENT MODULES */
.pp-wrap .content { min-width: 0; max-width: 760px; }
.pp-wrap section.policy { scroll-margin-top: 96px; padding-bottom: 64px; }
.pp-wrap section.policy + section.policy { border-top: 1px solid var(--line); padding-top: 56px; }

.pp-wrap .sec-head { display: flex; align-items: baseline; gap: 20px; margin: 0 0 16px; }
.pp-wrap .sec-num {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-xl);
  color: var(--violet-600); letter-spacing: .02em; flex-shrink: 0;
  line-height: 1;
}
.pp-wrap .sec-head h2 {
  font-family: var(--sans) !important; font-weight: 600 !important;
  font-size: clamp(24px, 3.2vw, 30px) !important;
  line-height: 1.15 !important; letter-spacing: -.02em !important;
  margin: 0 !important; color: var(--ink) !important;
}
.pp-wrap .sec-intro {
  margin: 0 0 26px 35px; color: var(--ink-soft); font-size: var(--fs-lg); max-width: 640px;
}
.pp-wrap .content p { margin: 0 0 18px 35px; max-width: 660px; }
.pp-wrap .content ul, .pp-wrap .content ol { margin: 12px 0 24px 35px; padding-left: 20px; color: var(--ink-soft); }
.pp-wrap .content li { margin-bottom: 10px; }
.pp-wrap .content strong { color: var(--ink); }

/* PREMIUM CARD COMPONENT BLOCK FOR INNER TEXT SUBSECTIONS */
.pp-wrap .sub-block-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0 24px 35px;
}
.pp-wrap .sub-block-card h3, .pp-wrap .sub-block-card h4 {
  font-family: var(--sans) !important;
  font-size: var(--fs-lg) !important;
  font-weight: 600 !important;
  color: var(--violet-900) !important;
  margin: 0 0 12px 0 !important;
}
.pp-wrap .sub-block-card h4 { font-size: var(--fs-md) !important; color: var(--violet-700) !important; }
.pp-wrap .sub-block-card p { margin-left: 0 !important; font-size: var(--fs-md); color: var(--ink-soft); }
.pp-wrap .sub-block-card p:last-child { margin-bottom: 0; }
.pp-wrap .sub-block-card ul, .pp-wrap .sub-block-card ol { margin-left: 0; padding-left: 18px; }

/* CALLOUT MESSAGE CONTAINERS */
.pp-wrap .callout {
  margin: 18px 0 24px 35px; padding: 22px 26px; border-radius: 14px;
  background: linear-gradient(120deg, var(--violet-50), #fff);
  border: 1px solid var(--violet-200);
  display: flex; gap: 16px; align-items: flex-start;
}
.pp-wrap .callout .ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--violet-600); color: #fff; display: grid; place-items: center;
}
.pp-wrap .callout p { margin: 0; font-size: var(--fs-md); color: var(--ink); margin-left: 0 !important; }
.pp-wrap .callout strong { color: var(--violet-800); }

/* STRUCTURED TERMINOLOGY GLOSSARIES */
.pp-wrap .deflist { margin: 0 0 8px 35px; padding: 0; list-style: none; display: grid; gap: 2px; }
.pp-wrap .deflist li {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 8px 28px; padding: 15px 4px;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.pp-wrap .deflist li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .deflist dt {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-base);
  color: var(--violet-800); letter-spacing: -.01em;
}
.pp-wrap .deflist dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-md); line-height: var(--lh-normal); }

/* Horizontal Dividers */
.pp-wrap hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0 32px 35px; }

/* ── RESPONSIVE ADAPTATIONS ── */
@media (max-width: 920px) {
  .pp-wrap .layout { grid-template-columns: 1fr; gap: 32px; }
  .pp-wrap .toc { position: static; border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper-card); }
  .pp-wrap .toc ol { columns: 2; column-gap: 24px; }
  .pp-wrap .summary-card { grid-template-columns: 1fr; gap: 16px; padding: 30px 26px; }
  .pp-wrap .summary-tag .tldr { font-size: 34px; }
}
@media (max-width: 640px) {
  .pp-wrap { font-size: var(--fs-md); }
  .pp-wrap .hero-inner { padding: 60px 22px 96px; }
  .pp-wrap .summary-wrap, .pp-wrap .layout { padding-left: 20px; padding-right: 20px; }
  .pp-wrap .deflist li { grid-template-columns: 1fr; gap: 4px; }
  .pp-wrap .content p, .pp-wrap .sec-intro, .pp-wrap .deflist, .pp-wrap .sub-block-card,
  .pp-wrap .callout, .pp-wrap .content ul, .pp-wrap .content ol, .pp-wrap hr { margin-left: 0; }
  .pp-wrap .sec-head { gap: 12px; }
  .pp-wrap .toc ol { columns: 1; }
}

/* ── igurus-api-license-agreement ── */
/* ── Reset site container so .pp-wrap can expand seamlessly ── */
/* Prevent global layout color leaks */
.pp-wrap h1, .pp-wrap h2, .pp-wrap h3, .pp-wrap h4, .pp-wrap h5, .pp-wrap h6 {
  color: inherit !important;
  font-family: inherit;
}
.pp-wrap a { color: inherit; text-decoration: none; }

/* ====================================================
   IGURUS PREMIUM DOCUMENT DESIGN MODULE
==================================================== */
.pp-wrap {
  --violet-950: #2B0510;
  --violet-900: #4A0A1D;
  --violet-800: #A41034; 
  --violet-700: #A41034;
  --violet-600: #A41034;
  --violet-500: #D45A76;
  --violet-300: #FFFFFF;
  --violet-200: #F6D9DF;
  --violet-100: #FBEEF0;
  --violet-50:  #FDF5F6;
  --ink:        #221A38;
  --ink-soft:   #4A4063;
  --ink-faint:  #7C7494;
  --line:       #E7E1F5;
  --paper:      #FBFAFF;
  --paper-card: #FFFFFF;
  --serif: "Plus Jakarta Sans", sans-serif;
  --sans:  "Plus Jakarta Sans", sans-serif;
  --maxw:  1180px;
  --radius: 18px;

  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pp-wrap *, .pp-wrap *::before, .pp-wrap *::after { box-sizing: border-box; }
.pp-wrap ::selection { background: var(--violet-200); color: var(--violet-900); }

/* ── HERO BANNER ── */
.pp-wrap .hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 12% 0%, #6B0E29 0%, var(--violet-900) 45%, var(--violet-950) 100%);
  color: #fff;
}
.pp-wrap .hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(164,16,52,.45), transparent 70%),
    radial-gradient(500px 280px at 100% 90%, rgba(196,181,253,.22), transparent 70%);
  pointer-events: none;
}
.pp-wrap .hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
}
.pp-wrap .hero-inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 86px 32px 120px;
}
.pp-wrap .eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet-300);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.pp-wrap .eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--violet-300); display: inline-block;
}
.pp-wrap .hero h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(42px, 6.5vw, 76px);
  line-height: 1.02; letter-spacing: -.03em;
  margin: 22px 0 0; color: #fff;
}
.pp-wrap .hero h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--violet-300);
}
.pp-wrap .hero-lede {
  max-width: 680px; margin: 24px 0 0;
  font-size: 21px; line-height: var(--lh-normal); color: #E9E3FB;
}
.pp-wrap .hero-meta {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--violet-200);
}
.pp-wrap .hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.pp-wrap .hero-meta dt { color: var(--violet-300); opacity: .75; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.pp-wrap .hero-meta dd { margin: 0; color: #fff; font-size: var(--fs-base); font-weight: 500; }

/* ── CONTEXTUAL OVERLAY SUMMARY ── */
.pp-wrap .summary-wrap {
  max-width: var(--maxw); margin: -72px auto 0;
  padding: 0 32px; position: relative; z-index: 5;
}
.pp-wrap .summary-card {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -34px rgba(46,16,101,.45);
  padding: 38px 44px;
  display: grid; grid-template-columns: 168px 1fr; gap: 36px;
}
.pp-wrap .summary-tag {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600);
}
.pp-wrap .summary-tag .tldr {
  display: block; font-size: var(--fs-4xl); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
  margin-top: 8px; text-transform: none;
}
.pp-wrap .summary-card p {
  margin: 0; font-size: var(--fs-lg); line-height: 1.72; color: var(--ink-soft);
}
.pp-wrap .summary-card strong { color: var(--ink); font-weight: 600; }

/* ── STRUCTURAL TWO-COLUMN GRID ── */
.pp-wrap .layout {
  max-width: var(--maxw); margin: 0 auto;
  padding: 72px 32px 40px;
  display: grid; grid-template-columns: 260px 1fr;
  gap: 64px; align-items: start;
}

/* TRACKING NAVIGATION SIDEBAR */
.pp-wrap .toc { position: sticky; top: 96px; font-family: var(--sans); }
.pp-wrap .toc-title {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 18px; padding-left: 14px;
}
.pp-wrap .toc ol { list-style: none; margin: 0; padding: 0; }
.pp-wrap .toc li { margin: 0; }
.pp-wrap .toc a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 14px; border-left: 2px solid var(--line);
  color: var(--ink-faint); text-decoration: none;
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  transition: color .15s, border-color .15s, background .15s;
}
.pp-wrap .toc a .num { font-size: var(--fs-xs); font-weight: 600; opacity: .7; min-width: 18px; }
.pp-wrap .toc a:hover { color: var(--violet-700); border-color: var(--violet-300); }
.pp-wrap .toc a.active {
  color: var(--violet-800); border-color: var(--violet-600);
  background: var(--violet-50); font-weight: 600;
}
.pp-wrap .toc a.active .num { opacity: 1; color: var(--violet-600); }

/* CONTENT MODULES */
.pp-wrap .content { min-width: 0; max-width: 760px; }
.pp-wrap section.policy { scroll-margin-top: 96px; padding-bottom: 64px; }
.pp-wrap section.policy + section.policy { border-top: 1px solid var(--line); padding-top: 56px; }

.pp-wrap .sec-head { display: flex; align-items: baseline; gap: 20px; margin: 0 0 16px; }
.pp-wrap .sec-num {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-xl);
  color: var(--violet-600); letter-spacing: .02em; flex-shrink: 0;
  line-height: 1;
}
.pp-wrap .sec-head h2 {
  font-family: var(--sans) !important; font-weight: 600 !important;
  font-size: clamp(24px, 3.2vw, 30px) !important;
  line-height: 1.15 !important; letter-spacing: -.02em !important;
  margin: 0 !important; color: var(--ink) !important;
}
.pp-wrap .sec-intro {
  margin: 0 0 26px 35px; color: var(--ink-soft); font-size: var(--fs-lg); max-width: 640px;
}
.pp-wrap .content p { margin: 0 0 18px 35px; max-width: 660px; }
.pp-wrap .content ul, .pp-wrap .content ol { margin: 12px 0 24px 35px; padding-left: 20px; color: var(--ink-soft); }
.pp-wrap .content li { margin-bottom: 10px; }
.pp-wrap .content strong { color: var(--ink); }

/* PREMIUM CARD COMPONENT BLOCK FOR INNER TEXT SUBSECTIONS */
.pp-wrap .sub-block-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0 24px 35px;
}
.pp-wrap .sub-block-card h3, .pp-wrap .sub-block-card h4 {
  font-family: var(--sans) !important;
  font-size: var(--fs-lg) !important;
  font-weight: 600 !important;
  color: var(--violet-900) !important;
  margin: 0 0 12px 0 !important;
}
.pp-wrap .sub-block-card h4 { font-size: var(--fs-md) !important; color: var(--violet-700) !important; }
.pp-wrap .sub-block-card p { margin-left: 0 !important; font-size: var(--fs-md); color: var(--ink-soft); }
.pp-wrap .sub-block-card p:last-child { margin-bottom: 0; }
.pp-wrap .sub-block-card ul, .pp-wrap .sub-block-card ol { margin-left: 0; padding-left: 18px; }

/* CALLOUT MESSAGE CONTAINERS */
.pp-wrap .callout {
  margin: 18px 0 24px 35px; padding: 22px 26px; border-radius: 14px;
  background: linear-gradient(120deg, var(--violet-50), #fff);
  border: 1px solid var(--violet-200);
  display: flex; gap: 16px; align-items: flex-start;
}
.pp-wrap .callout .ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--violet-600); color: #fff; display: grid; place-items: center;
}
.pp-wrap .callout p { margin: 0; font-size: var(--fs-md); color: var(--ink); margin-left: 0 !important; }
.pp-wrap .callout strong { color: var(--violet-800); }

/* STRUCTURED TERMINOLOGY GLOSSARIES */
.pp-wrap .deflist { margin: 0 0 8px 35px; padding: 0; list-style: none; display: grid; gap: 2px; }
.pp-wrap .deflist li {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 8px 28px; padding: 15px 4px;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.pp-wrap .deflist li:first-child { border-top: 1px solid var(--line); }
.pp-wrap .deflist dt {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-base);
  color: var(--violet-800); letter-spacing: -.01em;
}
.pp-wrap .deflist dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-md); line-height: var(--lh-normal); }

/* Horizontal Dividers */
.pp-wrap hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0 32px 35px; }

/* ── RESPONSIVE ADAPTATIONS ── */
@media (max-width: 920px) {
  .pp-wrap .layout { grid-template-columns: 1fr; gap: 32px; }
  .pp-wrap .toc { position: static; border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper-card); }
  .pp-wrap .toc ol { columns: 2; column-gap: 24px; }
  .pp-wrap .summary-card { grid-template-columns: 1fr; gap: 16px; padding: 30px 26px; }
  .pp-wrap .summary-tag .tldr { font-size: 34px; }
}
@media (max-width: 640px) {
  .pp-wrap { font-size: var(--fs-md); }
  .pp-wrap .hero-inner { padding: 60px 22px 96px; }
  .pp-wrap .summary-wrap, .pp-wrap .layout { padding-left: 20px; padding-right: 20px; }
  .pp-wrap .deflist li { grid-template-columns: 1fr; gap: 4px; }
  .pp-wrap .content p, .pp-wrap .sec-intro, .pp-wrap .deflist, .pp-wrap .sub-block-card,
  .pp-wrap .callout, .pp-wrap .content ul, .pp-wrap .content ol, .pp-wrap hr { margin-left: 0; }
  .pp-wrap .sec-head { gap: 12px; }
  .pp-wrap .toc ol { columns: 1; }
}

/* ── legal-page ── */
:root {
  --cp-violet-950:#2B0510;--cp-violet-900:#4A0A1D;--cp-violet-800:#6B0E29;
  --cp-violet-700:#7A0D27;--cp-violet-600:#A41034;--cp-violet-500:#A41034;
  --cp-violet-400:#D45A76;--cp-violet-300:#FFFFFF;--cp-violet-200:#FFFFFF;
  --cp-violet-100:#FBEEF0;--cp-violet-50:#FDF5F6;
  --cp-ink:#1c1630;--cp-ink-2:#403955;--cp-ink-3:#6b6582;
  --cp-line:#e9e4f5;--cp-line-2:#f1edfa;--cp-bg:#faf9fe;--cp-card:#ffffff;
  --cp-serif:"Plus Jakarta Sans", sans-serif;
  --cp-sans:"Plus Jakarta Sans", sans-serif;
  --cp-display:"Plus Jakarta Sans", sans-serif;
  --cp-maxw:1200px;
}
.cp-scope *{box-sizing:border-box;}
.cp-scope{font-family:var(--cp-serif);color:var(--cp-ink-2);background:var(--cp-bg);}
.cp-shell{max-width:var(--cp-maxw);margin:0 auto;padding:0 32px;}
#cp-progress{position:fixed;top:0;left:0;z-index:9999;height:3px;width:0%;background:linear-gradient(90deg,var(--cp-violet-600),var(--cp-violet-300));transition:width .1s linear;}
.cp-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(120% 130% at 8% 0%,rgba(164,16,52,.55) 0%,transparent 55%),radial-gradient(90% 100% at 100% 90%,rgba(164,16,52,.32) 0%,transparent 55%),linear-gradient(160deg,var(--cp-violet-950) 0%,#4A0A1D 48%,#1C0509 100%);}
.cp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 110% 100% at 50% 0%,#000 38%,transparent 82%);mask-image:radial-gradient(ellipse 110% 100% at 50% 0%,#000 38%,transparent 82%);}
.cp-hero__inner{position:relative;z-index:2;padding-top:60px;padding-bottom:84px;}
.cp-crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--cp-sans);font-size:12.5px;font-weight:500;color:rgba(255,255,255,.5);margin:0 0 30px;padding:0;list-style:none;}
.cp-crumb a{color:var(--cp-violet-200);text-decoration:none;transition:color .2s;}
.cp-crumb a:hover{color:#fff;}
.cp-crumb .sep{opacity:.5;font-size:10px;}
.cp-eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--cp-sans);font-size: var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--cp-violet-300);margin:0 0 20px;}
.cp-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--cp-violet-300);}
.cp-title{font-family:var(--cp-display);font-weight:800;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;letter-spacing:-0.035em;color:#fff;margin:0 0 22px;max-width:14ch;text-wrap:balance;}
.cp-title .accent{background:linear-gradient(100deg,var(--cp-violet-200),#93c5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.cp-lede{font-family:var(--cp-serif);font-size:1.2rem;line-height: var(--lh-normal);color:rgba(255,255,255,.7);max-width:600px;margin:0 0 32px;}
.cp-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.cp-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:7px 15px;font-family:var(--cp-sans);font-size:12.5px;color:rgba(255,255,255,.72);}
.cp-chip svg{width:13px;height:13px;color:var(--cp-violet-300);flex:none;}
.cp-chip strong{color:#fff;font-weight:600;}
.cp-actions{display:flex;gap:11px;margin-top:32px;flex-wrap:wrap;}
.cp-btn{display:inline-flex;align-items:center;gap:8px;border-radius:11px;padding:11px 22px;font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:transform .18s,box-shadow .18s,background .2s,opacity .2s;}
.cp-btn svg{width:15px;height:15px;}
.cp-btn:hover{transform:translateY(-2px);text-decoration:none;}
.cp-btn--primary{background:linear-gradient(135deg,var(--cp-violet-500),var(--cp-violet-700));color:#fff;box-shadow:0 6px 22px rgba(164,16,52,.42);}
.cp-btn--primary:hover{color:#fff;box-shadow:0 10px 28px rgba(164,16,52,.5);}
.cp-btn--ghost{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);color:rgba(255,255,255,.85);}
.cp-btn--ghost:hover{color:#fff;background:rgba(255,255,255,.13);}
.cp-body{padding:0 0 96px;}
.cp-layout{display:grid;grid-template-columns:268px 1fr;gap:56px;align-items:start;padding-top:48px;}
.cp-layout.cp-solo{grid-template-columns:minmax(0,820px);justify-content:center;}
.cp-layout.cp-solo .cp-toc-wrap{display:none;}
.cp-toc-wrap{position:sticky;top:32px;}
.cp-toc-toggle{display:none;width:100%;text-align:left;align-items:center;justify-content:space-between;gap:10px;background:var(--cp-card);border:1.5px solid var(--cp-line);border-radius:13px;padding:13px 18px;font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:600;color:var(--cp-ink-2);cursor:pointer;box-shadow:0 2px 10px rgba(40,16,80,.05);}
.cp-toc-toggle svg{width:13px;height:13px;color:var(--cp-violet-500);transition:transform .25s;}
.cp-toc-toggle.open svg.chev{transform:rotate(180deg);}
.cp-toc-card{background:var(--cp-card);border:1.5px solid var(--cp-line);border-radius:18px;overflow:hidden;box-shadow:0 6px 24px rgba(40,16,80,.06);}
.cp-toc-head{display:flex;align-items:center;gap:10px;padding:16px 20px 14px;border-bottom:1px solid var(--cp-line-2);}
.cp-toc-head-label{font-family:var(--cp-sans);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--cp-ink-3);white-space:nowrap;}
.cp-toc-prog{flex:1;height:3px;background:var(--cp-line);border-radius:3px;overflow:hidden;}
.cp-toc-prog-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--cp-violet-500),var(--cp-violet-300));transition:width .12s;}
.cp-toc-list{list-style:none;padding:10px 0;margin:0;max-height:62vh;overflow-y:auto;}
.cp-toc-list::-webkit-scrollbar{width:4px;}
.cp-toc-list::-webkit-scrollbar-thumb{background:var(--cp-violet-200);border-radius:4px;}
.cp-toc-list a{display:flex;align-items:baseline;gap:10px;padding:7px 20px;font-family:var(--cp-sans);font-size:12.5px;line-height:1.42;color:var(--cp-ink-3);text-decoration:none;border-left:2px solid transparent;transition:color .15s,background .15s,border-color .15s;}
.cp-toc-list a .num{font-size:10px;font-weight:700;color:var(--cp-violet-300);min-width:18px;flex:none;}
.cp-toc-list a.sub{padding-left:38px;font-size: var(--fs-xs);}
.cp-toc-list a.sub .num{display:none;}
.cp-toc-list a:hover{color:var(--cp-violet-700);background:var(--cp-violet-50);border-left-color:var(--cp-violet-200);}
.cp-toc-list a.active{color:var(--cp-violet-800);background:var(--cp-violet-50);border-left-color:var(--cp-violet-600);font-weight:600;}
.cp-toc-list a.active .num{color:var(--cp-violet-600);}
.cp-toc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 20px;border-top:1px solid var(--cp-line-2);}
.cp-toc-back{display:inline-flex;align-items:center;gap:7px;font-family:var(--cp-sans);font-size: var(--fs-xs);font-weight:600;color:var(--cp-violet-600);text-decoration:none;padding:6px 10px;border-radius:8px;transition:background .15s;}
.cp-toc-back svg{width:12px;height:12px;}
.cp-toc-back:hover{background:var(--cp-violet-50);text-decoration:none;}
.cp-toc-count{font-family:var(--cp-sans);font-size: var(--fs-xs);color:var(--cp-ink-3);background:var(--cp-violet-50);padding:3px 10px;border-radius:999px;}
.cp-article{min-width:0;}
.cp-prose{font-family:var(--cp-serif);font-size: var(--fs-lg);line-height: var(--lh-relaxed);color:var(--cp-ink-2);max-width:760px;}
.cp-prose ::selection{background:var(--cp-violet-100);color:var(--cp-violet-900);}
.cp-prose p{margin:0 0 1.15em;}
.cp-prose p strong,.cp-prose li strong{color:var(--cp-ink);font-weight:600;}
.cp-prose a{color:var(--cp-violet-600);font-weight:500;text-decoration:underline;text-decoration-color:var(--cp-violet-200);text-underline-offset:2px;transition:color .15s;word-break:break-word;}
.cp-prose a:hover{color:var(--cp-violet-800);text-decoration-color:var(--cp-violet-500);}
.cp-prose h1,.cp-prose h2,.cp-prose .ig-sh1{display:flex;align-items:baseline;gap:16px;font-family:var(--cp-display);font-weight:800;font-size:clamp(1.45rem,3vw,2rem);line-height:1.15;letter-spacing:-0.025em;color:var(--cp-ink);margin:0;padding:1.9em 0 .5em;border-top:1px solid var(--cp-line);scroll-margin-top:32px;text-wrap:balance;}
.cp-prose > :is(h1,h2,.ig-sh1):first-child,.cp-prose .ig-sh1.is-first{border-top:none;padding-top:.2em;}
.ig-sh1-num{font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:700;color:var(--cp-violet-400);min-width:26px;flex:none;line-height:2.2;}
.cp-prose h3,.cp-prose .ig-sh2{font-family:var(--cp-display);font-weight:700;font-size:1.18rem;color:var(--cp-ink);line-height: var(--lh-snug);margin:1.7em 0 .5em;padding:9px 16px;background:linear-gradient(120deg,var(--cp-violet-50),#fff);border-left:3px solid var(--cp-violet-500);border-radius:0 10px 10px 0;scroll-margin-top:32px;}
.cp-prose h4,.cp-prose .ig-sh3{font-family:var(--cp-sans);font-weight:600;font-size:1rem;color:var(--cp-ink-2);margin:1.4em 0 .4em;padding:0 0 0 13px;border-left:2px solid var(--cp-violet-200);scroll-margin-top:32px;}
.cp-prose h5,.cp-prose h6{font-family:var(--cp-sans);font-weight:600;font-size:.95rem;color:var(--cp-ink-2);margin:1.3em 0 .35em;}
.cp-prose .ig-slabel{font-family:var(--cp-sans);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--cp-violet-500);margin:1.6em 0 .35em;}
.cp-prose .ig-smixed{margin-bottom:.9em;}
.cp-prose .ig-smixed > strong:first-child{font-family:var(--cp-sans);font-size:1rem;font-weight:700;color:var(--cp-ink);display:block;margin-bottom:.15em;}
.cp-prose ul,.cp-prose ol{margin:.4em 0 1.2em;padding-left:1.6em;}
.cp-prose li{margin-bottom:.45em;font-size: var(--fs-md);line-height: var(--lh-relaxed);}
.cp-prose ul li::marker{color:var(--cp-violet-400);}
.cp-prose ol li::marker{color:var(--cp-violet-500);font-weight:700;font-family:var(--cp-sans);}
.cp-prose ul ul,.cp-prose ol ol,.cp-prose ul ol,.cp-prose ol ul{margin:.4em 0 .5em;}
.cp-prose span[style*="mso-list: Ignore"],.cp-prose span[style*="mso-list:Ignore"]{display:none;}
.cp-prose hr{border:none;height:1px;margin:2.4em 0;background:linear-gradient(90deg,transparent,var(--cp-violet-200) 22%,var(--cp-violet-100) 50%,var(--cp-violet-200) 78%,transparent);}
.cp-prose blockquote{border-left:4px solid var(--cp-violet-500);margin:1.8em 0;padding:16px 24px;background:var(--cp-violet-50);border-radius:0 13px 13px 0;color:var(--cp-ink-2);font-style:italic;}
.cp-prose blockquote p:last-child{margin-bottom:0;}
.cp-prose .cp-table-wrap{overflow-x:auto;margin:1.5em 0;border:1px solid var(--cp-line);border-radius:13px;}
.cp-prose table{border-collapse:collapse;width:100%;font-family:var(--cp-sans);font-size: var(--fs-sm);}
.cp-prose th,.cp-prose td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--cp-line);vertical-align:top;}
.cp-prose thead th{background:var(--cp-violet-50);color:var(--cp-violet-800);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;}
.cp-prose tbody tr:last-child td{border-bottom:none;}
.cp-prose tbody tr:hover{background:var(--cp-line-2);}
.cp-prose img{max-width:100%;height:auto;border-radius:13px;margin:1.2em 0;border:1px solid var(--cp-line);}
.cp-prose figure{margin:1.5em 0;}
.cp-prose figcaption{font-family:var(--cp-sans);font-size: var(--fs-sm);color:var(--cp-ink-3);text-align:center;margin-top:8px;}
.cp-prose code{font-family:"Plus Jakarta Sans", sans-serif;font-size:.88em;background:var(--cp-violet-50);color:var(--cp-violet-800);padding:2px 7px;border-radius:6px;border:1px solid var(--cp-line);}
.cp-prose pre{background:var(--cp-violet-950);color:#e9e3fb;padding:18px 22px;border-radius:13px;overflow-x:auto;margin:1.5em 0;font-size: var(--fs-sm);line-height: var(--lh-normal);}
.cp-prose pre code{background:none;border:none;color:inherit;padding:0;}
.cp-prose dl{margin:1.2em 0;}
.cp-prose dt{font-family:var(--cp-sans);font-weight:700;color:var(--cp-ink);margin-top:1em;}
.cp-prose dd{margin:.2em 0 0;padding-left:0;}
.cp-prose p:empty{display:none;}
.ig-built-toc{background:linear-gradient(135deg,var(--cp-violet-50),#eef4ff);border:1px solid rgba(164,16,52,.14);border-radius:16px;padding:22px 26px;margin:1.4em 0 2.2em;}
.ig-built-toc > :is(.ig-sh1,h1,h2){font-family:var(--cp-sans);font-size: var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--cp-violet-500);border-top:none;padding:0 0 12px;margin:0 0 6px;}
.ig-built-toc .ig-sh1-num{display:none;}
.ig-built-toc ol,.ig-built-toc ul{display:grid;grid-template-columns:1fr 1fr;gap:.5em 2.4em;margin:0;padding:0;list-style:none;counter-reset:igtoc;}
.ig-built-toc li{font-size: var(--fs-sm);color:var(--cp-ink-2);line-height:1.45;padding-left:1.9em;position:relative;}
.ig-built-toc ol li{counter-increment:igtoc;}
.ig-built-toc ol li::before{content:counter(igtoc)".";position:absolute;left:0;top:0;font-family:var(--cp-sans);font-weight:700;color:var(--cp-violet-400);font-size: var(--fs-xs);}
.ig-built-toc ul li::before{content:"";position:absolute;left:.5em;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--cp-violet-300);}
@media(max-width:560px){.ig-built-toc ol,.ig-built-toc ul{grid-template-columns:1fr;}}
.ig-pledge{display:flex;gap:15px;align-items:flex-start;background:linear-gradient(120deg,#FDF5F6,#fff);border:1px solid var(--cp-violet-100);border-radius:15px;padding:18px 22px;margin:1.3em 0;}
.ig-pledge::before{content:"";width:34px;height:34px;flex:none;border-radius:10px;margin-top:2px;background:var(--cp-violet-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/18px no-repeat;}
.ig-pledge p{margin:0!important;font-size:16.5px!important;color:var(--cp-ink)!important;}
.cp-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-top:52px;max-width:760px;background:linear-gradient(135deg,var(--cp-violet-950),var(--cp-violet-900));border:1px solid rgba(167,139,250,.2);border-radius:20px;padding:30px 34px;}
.cp-cta__text strong{display:block;font-family:var(--cp-display);font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:5px;}
.cp-cta__text span{font-family:var(--cp-sans);font-size: var(--fs-sm);color:rgba(255,255,255,.55);}
.cp-cta__btn{display:inline-flex;align-items:center;gap:9px;flex:none;white-space:nowrap;background:linear-gradient(135deg,var(--cp-violet-500),var(--cp-violet-700));color:#fff;border-radius:11px;padding:13px 26px;font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:700;text-decoration:none;box-shadow:0 6px 22px rgba(164,16,52,.4);transition:transform .18s,opacity .2s;}
.cp-cta__btn svg{width:15px;height:15px;}
.cp-cta__btn:hover{transform:translateY(-2px);opacity:.92;color:#fff;text-decoration:none;}
.cp-pagefoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;border-top:1px solid var(--cp-line);margin-top:36px;padding-top:28px;max-width:760px;}
.cp-foot-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:600;color:var(--cp-violet-700);text-decoration:none;padding:10px 18px;border:1.5px solid var(--cp-line);border-radius:11px;transition:all .18s;}
.cp-foot-back svg{width:14px;height:14px;}
.cp-foot-back:hover{border-color:var(--cp-violet-300);background:var(--cp-violet-50);color:var(--cp-violet-800);text-decoration:none;}
.cp-foot-date{font-family:var(--cp-sans);font-size: var(--fs-xs);color:var(--cp-ink-3);display:flex;align-items:center;gap:7px;}
.cp-foot-date svg{width:13px;height:13px;color:var(--cp-violet-400);}
#cp-totop{position:fixed;right:26px;bottom:26px;z-index:60;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--cp-violet-500),var(--cp-violet-700));color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(164,16,52,.45);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s;}
#cp-totop.show{opacity:1;visibility:visible;transform:translateY(0);}
#cp-totop:hover{transform:translateY(-3px);}
#cp-totop svg{width:18px;height:18px;}
@media(max-width:1024px){.cp-layout{grid-template-columns:228px 1fr;gap:36px;}}
@media(max-width:860px){.cp-layout,.cp-layout.cp-solo{grid-template-columns:1fr;padding-top:30px;}.cp-toc-wrap{position:static;margin-bottom:8px;}.cp-layout.cp-solo .cp-toc-wrap{display:none;}.cp-toc-toggle{display:flex;}.cp-toc-card{display:none;margin-top:-1px;border-radius:0 0 13px 13px;box-shadow:none;}.cp-toc-card.open{display:block;}.cp-toc-list{max-height:50vh;}}
@media(max-width:540px){.cp-shell{padding:0 20px;}.cp-hero__inner{padding-top:46px;padding-bottom:60px;}.cp-prose{font-size:16.5px;}.cp-cta{flex-direction:column;align-items:flex-start;padding:24px;}#cp-totop{right:16px;bottom:16px;}}
@media print{#cp-progress,#cp-totop,.cp-actions,.cp-toc-wrap,.cp-cta,.cp-foot-back{display:none!important;}.cp-layout{grid-template-columns:1fr!important;padding-top:16px!important;}.cp-hero{background:#fff!important;color:#000!important;}.cp-hero::after{display:none!important;}.cp-hero__inner{padding-top:0!important;padding-bottom:18px!important;}.cp-title,.cp-eyebrow,.cp-lede,.cp-crumb{color:#000!important;}.cp-title .accent{-webkit-text-fill-color:#000!important;color:#000!important;}.cp-chip{color:#000!important;border-color:#999!important;background:none!important;}.cp-prose{font-size:11.5pt;max-width:none;color:#000;}a{color:#000!important;}.cp-scope{background:#fff!important;}}

/* ── custom-page ── */
/* ═══════════════════════════════════════════════════════════════
   iGURUS · Custom Page  —  robust, adaptive design for ANY DB content
   Brand: violet editorial.  Works for legal docs, About, FAQ, etc.
═══════════════════════════════════════════════════════════════ */

:root {
  --cp-violet-950:#2B0510;
  --cp-violet-900:#4A0A1D;
  --cp-violet-800:#6B0E29;
  --cp-violet-700:#7A0D27;
  --cp-violet-600:#A41034;
  --cp-violet-500:#A41034;
  --cp-violet-400:#D45A76;
  --cp-violet-300:#FFFFFF;
  --cp-violet-200:#FFFFFF;
  --cp-violet-100:#FBEEF0;
  --cp-violet-50:#FDF5F6;

  --cp-ink:#1c1630;
  --cp-ink-2:#403955;
  --cp-ink-3:#6b6582;
  --cp-line:#e9e4f5;
  --cp-line-2:#f1edfa;
  --cp-bg:#faf9fe;
  --cp-card:#ffffff;

  --cp-serif:"Newsreader","Lora",Georgia,serif;
  --cp-sans:"Space Grotesk","Inter",system-ui,sans-serif;
  --cp-display:"Outfit","Space Grotesk",system-ui,sans-serif;

  --cp-maxw:1200px;
}

/* ── reset within our scope ──────────────────────────────────── */
.cp-scope *{box-sizing:border-box;}
.cp-scope{
  font-family:var(--cp-serif);
  color:var(--cp-ink-2);
  background:var(--cp-bg);
}
.cp-shell{max-width:var(--cp-maxw);margin:0 auto;padding:0 32px;}

/* ── reading progress bar ────────────────────────────────────── */
#cp-progress{
  position:fixed;top:0;left:0;z-index:9999;height:3px;width:0%;
  background:linear-gradient(90deg,var(--cp-violet-600),var(--cp-violet-300));
  transition:width .1s linear;
}

/* ═══ HERO ════════════════════════════════════════════════════ */
.cp-hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(120% 130% at 8% 0%,  rgba(164,16,52,.55) 0%, transparent 55%),
    radial-gradient(90% 100% at 100% 90%, rgba(164,16,52,.32) 0%, transparent 55%),
    linear-gradient(160deg, var(--cp-violet-950) 0%, #4A0A1D 48%, #1C0509 100%);
}
.cp-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 110% 100% at 50% 0%,#000 38%,transparent 82%);
  mask-image:radial-gradient(ellipse 110% 100% at 50% 0%,#000 38%,transparent 82%);
}
.cp-hero__inner{position:relative;z-index:2;padding-top:60px;padding-bottom:84px;}

.cp-crumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--cp-sans);font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.5);margin:0 0 30px;padding:0;list-style:none;
}
.cp-crumb a{color:var(--cp-violet-200);text-decoration:none;transition:color .2s;}
.cp-crumb a:hover{color:#fff;}
.cp-crumb .sep{opacity:.5;font-size:10px;}

.cp-eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--cp-sans);font-size: var(--fs-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--cp-violet-300);
  margin:0 0 20px;
}
.cp-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--cp-violet-300);}

.cp-title{
  font-family:var(--cp-display);font-weight:800;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;
  letter-spacing:-0.035em;color:#fff;margin:0 0 22px;max-width:14ch;
  text-wrap:balance;
}
.cp-title .accent{
  background:linear-gradient(100deg,var(--cp-violet-200),#93c5fd);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.cp-lede{
  font-family:var(--cp-serif);font-size:1.2rem;line-height: var(--lh-normal);
  color:rgba(255,255,255,.7);max-width:600px;margin:0 0 32px;
}

.cp-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.cp-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:999px;padding:7px 15px;
  font-family:var(--cp-sans);font-size:12.5px;color:rgba(255,255,255,.72);
}
.cp-chip svg{width:13px;height:13px;color:var(--cp-violet-300);flex:none;}
.cp-chip strong{color:#fff;font-weight:600;}

.cp-actions{display:flex;gap:11px;margin-top:32px;flex-wrap:wrap;}
.cp-btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:11px;
  padding:11px 22px;font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:600;
  text-decoration:none;cursor:pointer;border:none;
  transition:transform .18s,box-shadow .18s,background .2s,opacity .2s;
}
.cp-btn svg{width:15px;height:15px;}
.cp-btn:hover{transform:translateY(-2px);text-decoration:none;}
.cp-btn--primary{
  background:linear-gradient(135deg,var(--cp-violet-500),var(--cp-violet-700));
  color:#fff;box-shadow:0 6px 22px rgba(164,16,52,.42);
}
.cp-btn--primary:hover{color:#fff;box-shadow:0 10px 28px rgba(164,16,52,.5);}
.cp-btn--ghost{
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);
}
.cp-btn--ghost:hover{color:#fff;background:rgba(255,255,255,.13);}

/* ═══ BODY LAYOUT ════════════════════════════════════════════ */
.cp-body{padding:0 0 96px;}
.cp-layout{
  display:grid;grid-template-columns:268px 1fr;gap:56px;
  align-items:start;padding-top:48px;
}
/* single-column mode (short pages / no TOC) */
.cp-layout.cp-solo{grid-template-columns:minmax(0,820px);justify-content:center;}
.cp-layout.cp-solo .cp-toc-wrap{display:none;}

/* ── TOC sidebar ─────────────────────────────────────────────── */
.cp-toc-wrap{position:sticky;top:32px;}
.cp-toc-toggle{
  display:none;width:100%;text-align:left;align-items:center;justify-content:space-between;gap:10px;
  background:var(--cp-card);border:1.5px solid var(--cp-line);border-radius:13px;
  padding:13px 18px;font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:600;
  color:var(--cp-ink-2);cursor:pointer;box-shadow:0 2px 10px rgba(40,16,80,.05);
}
.cp-toc-toggle svg{width:13px;height:13px;color:var(--cp-violet-500);transition:transform .25s;}
.cp-toc-toggle.open svg.chev{transform:rotate(180deg);}

.cp-toc-card{
  background:var(--cp-card);border:1.5px solid var(--cp-line);border-radius:18px;
  overflow:hidden;box-shadow:0 6px 24px rgba(40,16,80,.06);
}
.cp-toc-head{
  display:flex;align-items:center;gap:10px;padding:16px 20px 14px;
  border-bottom:1px solid var(--cp-line-2);
}
.cp-toc-head-label{
  font-family:var(--cp-sans);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--cp-ink-3);white-space:nowrap;
}
.cp-toc-prog{flex:1;height:3px;background:var(--cp-line);border-radius:3px;overflow:hidden;}
.cp-toc-prog-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--cp-violet-500),var(--cp-violet-300));transition:width .12s;}

.cp-toc-list{list-style:none;padding:10px 0;margin:0;max-height:62vh;overflow-y:auto;}
.cp-toc-list::-webkit-scrollbar{width:4px;}
.cp-toc-list::-webkit-scrollbar-thumb{background:var(--cp-violet-200);border-radius:4px;}
.cp-toc-list a{
  display:flex;align-items:baseline;gap:10px;padding:7px 20px;
  font-family:var(--cp-sans);font-size:12.5px;line-height:1.42;
  color:var(--cp-ink-3);text-decoration:none;
  border-left:2px solid transparent;transition:color .15s,background .15s,border-color .15s;
}
.cp-toc-list a .num{font-size:10px;font-weight:700;color:var(--cp-violet-300);min-width:18px;flex:none;}
.cp-toc-list a.sub{padding-left:38px;font-size: var(--fs-xs);}
.cp-toc-list a.sub .num{display:none;}
.cp-toc-list a:hover{color:var(--cp-violet-700);background:var(--cp-violet-50);border-left-color:var(--cp-violet-200);}
.cp-toc-list a.active{color:var(--cp-violet-800);background:var(--cp-violet-50);border-left-color:var(--cp-violet-600);font-weight:600;}
.cp-toc-list a.active .num{color:var(--cp-violet-600);}

.cp-toc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:13px 20px;border-top:1px solid var(--cp-line-2);
}
.cp-toc-back{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--cp-sans);
  font-size: var(--fs-xs);font-weight:600;color:var(--cp-violet-600);text-decoration:none;
  padding:6px 10px;border-radius:8px;transition:background .15s;
}
.cp-toc-back svg{width:12px;height:12px;}
.cp-toc-back:hover{background:var(--cp-violet-50);text-decoration:none;}
.cp-toc-count{font-family:var(--cp-sans);font-size: var(--fs-xs);color:var(--cp-ink-3);background:var(--cp-violet-50);padding:3px 10px;border-radius:999px;}

/* ═══ ARTICLE / PROSE ════════════════════════════════════════ */
.cp-article{min-width:0;}
.cp-prose{
  font-family:var(--cp-serif);font-size: var(--fs-lg);line-height: var(--lh-relaxed);color:var(--cp-ink-2);
  max-width:760px;
}
.cp-prose ::selection{background:var(--cp-violet-100);color:var(--cp-violet-900);}

/* paragraphs */
.cp-prose p{margin:0 0 1.15em;}
.cp-prose p strong,.cp-prose li strong{color:var(--cp-ink);font-weight:600;}
.cp-prose a{color:var(--cp-violet-600);font-weight:500;text-decoration:underline;text-decoration-color:var(--cp-violet-200);text-underline-offset:2px;transition:color .15s;word-break:break-word;}
.cp-prose a:hover{color:var(--cp-violet-800);text-decoration-color:var(--cp-violet-500);}

/* native + detected SECTION headings (level 1) */
.cp-prose h1,.cp-prose h2,.cp-prose .ig-sh1{
  display:flex;align-items:baseline;gap:16px;
  font-family:var(--cp-display);font-weight:800;
  font-size:clamp(1.45rem,3vw,2rem);line-height:1.15;letter-spacing:-0.025em;
  color:var(--cp-ink);margin:0;padding:1.9em 0 .5em;
  border-top:1px solid var(--cp-line);scroll-margin-top:32px;text-wrap:balance;
}
.cp-prose > :is(h1,h2,.ig-sh1):first-child,
.cp-prose .ig-sh1.is-first{border-top:none;padding-top:.2em;}
.ig-sh1-num{
  font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:700;
  color:var(--cp-violet-400);min-width:26px;flex:none;line-height:2.2;
}

/* sub-section (level 2) */
.cp-prose h3,.cp-prose .ig-sh2{
  font-family:var(--cp-display);font-weight:700;font-size:1.18rem;
  color:var(--cp-ink);line-height: var(--lh-snug);margin:1.7em 0 .5em;
  padding:9px 16px;background:linear-gradient(120deg,var(--cp-violet-50),#fff);
  border-left:3px solid var(--cp-violet-500);border-radius:0 10px 10px 0;
  scroll-margin-top:32px;
}

/* deep sub (level 3) */
.cp-prose h4,.cp-prose .ig-sh3{
  font-family:var(--cp-sans);font-weight:600;font-size:1rem;color:var(--cp-ink-2);
  margin:1.4em 0 .4em;padding:0 0 0 13px;border-left:2px solid var(--cp-violet-200);
  scroll-margin-top:32px;
}
.cp-prose h5,.cp-prose h6{
  font-family:var(--cp-sans);font-weight:600;font-size:.95rem;color:var(--cp-ink-2);
  margin:1.3em 0 .35em;
}

/* inline bold "label" line */
.cp-prose .ig-slabel{
  font-family:var(--cp-sans);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--cp-violet-500);
  margin:1.6em 0 .35em;
}
/* bold-lead mixed paragraph */
.cp-prose .ig-smixed{margin-bottom:.9em;}
.cp-prose .ig-smixed > strong:first-child{
  font-family:var(--cp-sans);font-size:1rem;font-weight:700;color:var(--cp-ink);
  display:block;margin-bottom:.15em;
}

/* lists */
.cp-prose ul,.cp-prose ol{margin:.4em 0 1.2em;padding-left:1.6em;}
.cp-prose li{margin-bottom:.45em;font-size: var(--fs-md);line-height: var(--lh-relaxed);}
.cp-prose ul li::marker{color:var(--cp-violet-400);}
.cp-prose ol li::marker{color:var(--cp-violet-500);font-weight:700;font-family:var(--cp-sans);}
.cp-prose ul ul,.cp-prose ol ol,.cp-prose ul ol,.cp-prose ol ul{margin:.4em 0 .5em;}
/* strip MSO faux-bullet spans if any survive */
.cp-prose span[style*="mso-list: Ignore"],.cp-prose span[style*="mso-list:Ignore"]{display:none;}

/* horizontal rule → soft violet divider */
.cp-prose hr{
  border:none;height:1px;margin:2.4em 0;
  background:linear-gradient(90deg,transparent,var(--cp-violet-200) 22%,var(--cp-violet-100) 50%,var(--cp-violet-200) 78%,transparent);
}

/* blockquote / callout */
.cp-prose blockquote{
  border-left:4px solid var(--cp-violet-500);margin:1.8em 0;padding:16px 24px;
  background:var(--cp-violet-50);border-radius:0 13px 13px 0;color:var(--cp-ink-2);
  font-style:italic;
}
.cp-prose blockquote p:last-child{margin-bottom:0;}

/* tables */
.cp-prose .cp-table-wrap{overflow-x:auto;margin:1.5em 0;border:1px solid var(--cp-line);border-radius:13px;}
.cp-prose table{border-collapse:collapse;width:100%;font-family:var(--cp-sans);font-size: var(--fs-sm);}
.cp-prose th,.cp-prose td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--cp-line);vertical-align:top;}
.cp-prose thead th{background:var(--cp-violet-50);color:var(--cp-violet-800);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;}
.cp-prose tbody tr:last-child td{border-bottom:none;}
.cp-prose tbody tr:hover{background:var(--cp-line-2);}

/* images & figures */
.cp-prose img{max-width:100%;height:auto;border-radius:13px;margin:1.2em 0;border:1px solid var(--cp-line);}
.cp-prose figure{margin:1.5em 0;}
.cp-prose figcaption{font-family:var(--cp-sans);font-size: var(--fs-sm);color:var(--cp-ink-3);text-align:center;margin-top:8px;}

/* code */
.cp-prose code{font-family:"Plus Jakarta Sans", sans-serif;font-size:.88em;background:var(--cp-violet-50);color:var(--cp-violet-800);padding:2px 7px;border-radius:6px;border:1px solid var(--cp-line);}
.cp-prose pre{background:var(--cp-violet-950);color:#e9e3fb;padding:18px 22px;border-radius:13px;overflow-x:auto;margin:1.5em 0;font-size: var(--fs-sm);line-height: var(--lh-normal);}
.cp-prose pre code{background:none;border:none;color:inherit;padding:0;}

/* definition lists */
.cp-prose dl{margin:1.2em 0;}
.cp-prose dt{font-family:var(--cp-sans);font-weight:700;color:var(--cp-ink);margin-top:1em;}
.cp-prose dd{margin:.2em 0 0;padding-left:0;}

/* generic empty-paragraph trim */
.cp-prose p:empty{display:none;}

/* ── injected: built-in "Table of Contents" block inside content ── */
.ig-built-toc{
  background:linear-gradient(135deg,var(--cp-violet-50),#eef4ff);
  border:1px solid rgba(164,16,52,.14);border-radius:16px;
  padding:22px 26px;margin:1.4em 0 2.2em;
}
.ig-built-toc > :is(.ig-sh1,h1,h2){
  font-family:var(--cp-sans);font-size: var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--cp-violet-500);border-top:none;padding:0 0 12px;margin:0 0 6px;
}
.ig-built-toc .ig-sh1-num{display:none;}
.ig-built-toc ol,.ig-built-toc ul{
  display:grid;grid-template-columns:1fr 1fr;gap:.5em 2.4em;
  margin:0;padding:0;list-style:none;counter-reset:igtoc;
}
.ig-built-toc li{
  font-size: var(--fs-sm);color:var(--cp-ink-2);line-height:1.45;
  padding-left:1.9em;position:relative;
}
.ig-built-toc ol li{counter-increment:igtoc;}
.ig-built-toc ol li::before{
  content:counter(igtoc)".";position:absolute;left:0;top:0;
  font-family:var(--cp-sans);font-weight:700;color:var(--cp-violet-400);font-size: var(--fs-xs);
}
.ig-built-toc ul li::before{
  content:"";position:absolute;left:.5em;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--cp-violet-300);
}
@media (max-width:560px){.ig-built-toc ol,.ig-built-toc ul{grid-template-columns:1fr;}}

/* ── injected: "we never sell your data" pledge callout ──────── */
.ig-pledge{
  display:flex;gap:15px;align-items:flex-start;
  background:linear-gradient(120deg,#FDF5F6,#fff);
  border:1px solid var(--cp-violet-100);border-radius:15px;
  padding:18px 22px;margin:1.3em 0;
}
.ig-pledge::before{
  content:"";width:34px;height:34px;flex:none;border-radius:10px;margin-top:2px;
  background:var(--cp-violet-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/18px no-repeat;
}
.ig-pledge p{margin:0!important;font-size:16.5px!important;color:var(--cp-ink)!important;}

/* ═══ CTA CARD ═══════════════════════════════════════════════ */
.cp-cta{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
  margin-top:52px;max-width:760px;
  background:linear-gradient(135deg,var(--cp-violet-950),var(--cp-violet-900));
  border:1px solid rgba(167,139,250,.2);border-radius:20px;padding:30px 34px;
}
.cp-cta__text strong{display:block;font-family:var(--cp-display);font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:5px;}
.cp-cta__text span{font-family:var(--cp-sans);font-size: var(--fs-sm);color:rgba(255,255,255,.55);}
.cp-cta__btn{
  display:inline-flex;align-items:center;gap:9px;flex:none;white-space:nowrap;
  background:linear-gradient(135deg,var(--cp-violet-500),var(--cp-violet-700));
  color:#fff;border-radius:11px;padding:13px 26px;
  font-family:var(--cp-sans);font-size: var(--fs-sm);font-weight:700;text-decoration:none;
  box-shadow:0 6px 22px rgba(164,16,52,.4);transition:transform .18s,opacity .2s;
}
.cp-cta__btn svg{width:15px;height:15px;}
.cp-cta__btn:hover{transform:translateY(-2px);opacity:.92;color:#fff;text-decoration:none;}

/* ═══ PAGE FOOTER ROW ════════════════════════════════════════ */
.cp-pagefoot{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  border-top:1px solid var(--cp-line);margin-top:36px;padding-top:28px;max-width:760px;
}
.cp-foot-back{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--cp-sans);
  font-size: var(--fs-sm);font-weight:600;color:var(--cp-violet-700);text-decoration:none;
  padding:10px 18px;border:1.5px solid var(--cp-line);border-radius:11px;transition:all .18s;
}
.cp-foot-back svg{width:14px;height:14px;}
.cp-foot-back:hover{border-color:var(--cp-violet-300);background:var(--cp-violet-50);color:var(--cp-violet-800);text-decoration:none;}
.cp-foot-date{font-family:var(--cp-sans);font-size: var(--fs-xs);color:var(--cp-ink-3);display:flex;align-items:center;gap:7px;}
.cp-foot-date svg{width:13px;height:13px;color:var(--cp-violet-400);}

/* ═══ BACK TO TOP ════════════════════════════════════════════ */
#cp-totop{
  position:fixed;right:26px;bottom:26px;z-index:60;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--cp-violet-500),var(--cp-violet-700));
  color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(164,16,52,.45);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s,transform .25s,visibility .25s;
}
#cp-totop.show{opacity:1;visibility:visible;transform:translateY(0);}
#cp-totop:hover{transform:translateY(-3px);}
#cp-totop svg{width:18px;height:18px;}

/* ═══ RESPONSIVE ═════════════════════════════════════════════ */
@media (max-width:1024px){.cp-layout{grid-template-columns:228px 1fr;gap:36px;}}
@media (max-width:860px){
  .cp-layout,.cp-layout.cp-solo{grid-template-columns:1fr;padding-top:30px;}
  .cp-toc-wrap{position:static;margin-bottom:8px;}
  .cp-layout.cp-solo .cp-toc-wrap{display:none;}
  .cp-toc-toggle{display:flex;}
  .cp-toc-card{display:none;margin-top:-1px;border-radius:0 0 13px 13px;box-shadow:none;}
  .cp-toc-card.open{display:block;}
  .cp-toc-list{max-height:50vh;}
}
@media (max-width:540px){
  .cp-shell{padding:0 20px;}
  .cp-hero__inner{padding-top:46px;padding-bottom:60px;}
  .cp-prose{font-size:16.5px;}
  .cp-cta{flex-direction:column;align-items:flex-start;padding:24px;}
  #cp-totop{right:16px;bottom:16px;}
}

/* ═══ PRINT ══════════════════════════════════════════════════ */
@media print{
  #cp-progress,#cp-totop,.cp-actions,.cp-toc-wrap,.cp-cta,.cp-foot-back{display:none!important;}
  .cp-layout{grid-template-columns:1fr!important;padding-top:16px!important;}
  .cp-hero{background:#fff!important;color:#000!important;}
  .cp-hero::after{display:none!important;}
  .cp-hero__inner{padding-top:0!important;padding-bottom:18px!important;}
  .cp-title,.cp-eyebrow,.cp-lede,.cp-crumb{color:#000!important;}
  .cp-title .accent{-webkit-text-fill-color:#000!important;color:#000!important;}
  .cp-chip{color:#000!important;border-color:#999!important;background:none!important;}
  .cp-prose{font-size:11.5pt;max-width:none;color:#000;}
  .cp-prose :is(h1,h2,.ig-sh1){break-after:avoid;}
  a{color:#000!important;}
  .cp-scope{background:#fff!important;}
}


/* ════════════════════════════════════════════════════════════
   CC3 — Course Content Builder (Step 3)
   Namespace: .cc3
════════════════════════════════════════════════════════════ */

/* ── Card shell ─────────────────────────────────────────── */
.cc3-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(164,16,52,.09), 0 1px 4px rgba(0,0,0,.05);
    border: 1px solid rgba(164,16,52,.1);
    margin-bottom: 24px;
}

/* ── Card header ────────────────────────────────────────── */
.cc3-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: #A41034;
    border-bottom: 3px solid rgba(164,16,52,.22);
    border-radius: 18px 18px 0 0;
    gap: 16px;
}
.cc3-card-head-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cc3-card-head-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: #1C1514;
    border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: #FFFFFF; font-size: var(--fs-md); flex-shrink: 0;
}
.cc3-card-head-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem; font-weight: 800;
    color: #fff; letter-spacing: .01em; display: block;
}
.cc3-card-head-sub {
    font-size: 11.5px; color: rgba(255,255,255,.4);
    font-weight: 500; display: block; margin-top: 1px;
}
.cc3-add-chapter-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: #1C1514;
    color: #fff; border: none; border-radius: 10px;
    padding: 9px 18px; font-size: var(--fs-sm); font-weight: 700;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(164,16,52,.35);
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
}
.cc3-add-chapter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(164,16,52,.5);
    color: #fff;
}

/* ── Card body ──────────────────────────────────────────── */
.cc3-card-body {
    padding: 24px 28px;
    background: #faf9ff;
    min-height: 120px;
}

/* ── Card footer ────────────────────────────────────────── */
.cc3-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-top: 1px solid rgba(164,16,52,.1);
    background: #fff;
    border-radius: 0 0 18px 18px;
}

/* ── Empty state ────────────────────────────────────────── */
.cc3-empty {
    text-align: center;
    padding: 48px 24px;
}
.cc3-empty-icon {
    width: 64px; height: 64px; border-radius: 18px;
    background: rgba(164,16,52,.08);
    border: 1px solid rgba(164,16,52,.12);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-2xl); color: #A41034; margin-bottom: 16px;
}
.cc3-empty h4 {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem;
    font-weight: 700; color: #1e1240; margin-bottom: 6px;
}
.cc3-empty p {
    font-size: var(--fs-sm); color: #6b7280; margin-bottom: 20px;
}

/* ── Chapter accordion item ─────────────────────────────── */
.cc3-chapter {
    border: 1.5px solid rgba(164,16,52,.12);
    border-radius: 14px;
    margin-bottom: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(164,16,52,.05);
    transition: box-shadow .2s, border-color .2s;
    position: relative;
}
.cc3-chapter:hover {
    border-color: rgba(164,16,52,.25);
    box-shadow: 0 4px 16px rgba(164,16,52,.1);
}

.cc3-chapter-head {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #faf8ff;
    border-bottom: 1px solid rgba(164,16,52,.08);
    padding: 0 16px 0 0;
    border-radius: 12px 12px 0 0;
    overflow: visible;
}

.cc3-chapter-toggle {
    flex: 1;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    background: transparent !important;
    border: none !important;
    color: #1e1240 !important;
    font-size: var(--fs-sm) !important;
    text-align: left !important;
    cursor: pointer !important;
    width: auto !important;
}
.cc3-chapter-toggle::after { display: none !important; }
.cc3-chapter-toggle.collapsed .cc3-chapter-icon { color: #6b7280; }
.cc3-chapter-toggle:not(.collapsed) { color: #A41034 !important; background: rgba(164,16,52,.04) !important; }
.cc3-chapter-toggle:focus { box-shadow: none !important; outline: none !important; }

.cc3-chapter-icon { color: #A41034; font-size: var(--fs-base); flex-shrink: 0; }
.cc3-chapter-label { font-size: var(--fs-xs); font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.cc3-chapter-name { font-weight: 700; color: inherit; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc3-chapter-count { font-size: var(--fs-xs); font-weight: 600; color: #9ca3af; background: #f3f4f6; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }

/* ── Chapter action buttons ─────────────────────────────── */
.cc3-chapter-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.cc3-action-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); cursor: pointer;
    border: none; background: transparent;
    transition: background .15s, color .15s;
    text-decoration: none;
    flex-shrink: 0;
}
.cc3-action-btn--add { color: #A41034; background: rgba(164,16,52,.08); }
.cc3-action-btn--add:hover { background: #A41034; color: #fff; }
.cc3-action-btn--edit { color: #374151; }
.cc3-action-btn--edit:hover { background: rgba(164,16,52,.1); color: #A41034; }
.cc3-action-btn--delete { color: #6b7280; }
.cc3-action-btn--delete:hover { background: rgba(239,68,68,.1); color: #ef4444; }
.cc3-action-btn--drag { color: #d1d5db; cursor: grab; }
.cc3-action-btn--drag:hover { color: #9ca3af; background: #f3f4f6; }

/* ── Items list ─────────────────────────────────────────── */
.cc3-items-list {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f9f8fe;
    border-radius: 0 0 12px 12px;
}

/* ── Item row ───────────────────────────────────────────── */
.cc3-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border: 1.5px solid #ede9f8;
    border-radius: 10px;
    padding: 10px 14px;
    transition: border-color .15s, box-shadow .15s;
}
.cc3-item:hover {
    border-color: rgba(164,16,52,.22);
    box-shadow: 0 2px 8px rgba(164,16,52,.07);
}
.cc3-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* ── Type badges ────────────────────────────────────────── */
.cc3-item-badge {
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); flex-shrink: 0;
}
.cc3-item-badge--video  { background: rgba(59,130,246,.12); color: #3b82f6; }
.cc3-item-badge--live   { background: rgba(16,185,129,.12); color: #10b981; }
.cc3-item-badge--doc    { background: rgba(239,68,68,.1);   color: #ef4444; }
.cc3-item-badge--quiz   { background: rgba(245,158,11,.12); color: #f59e0b; }
.cc3-item-badge--short  { background: rgba(164,16,52,.1);  color: #A41034; }

.cc3-item-type {
    font-size: 10.5px; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .07em;
    white-space: nowrap;
}
.cc3-item-title {
    font-size: var(--fs-sm); font-weight: 600; color: #1e1240;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc3-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.cc3-item-stat {
    font-size: var(--fs-xs); color: #6b7280; font-weight: 500;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px; background: #f3f4f6;
}
.cc3-item-stat i { font-size: 10px; }
.cc3-item-price {
    font-size: var(--fs-xs); font-weight: 700; color: #A41034;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px;
    background: rgba(164,16,52,.07);
}

/* ── Quiz item ──────────────────────────────────────────── */
.cc3-item--quiz {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-radius: 10px;
    overflow: visible;
}
.cc3-item--quiz > .cc3-item-quiz-head {
    border-radius: 10px;
    overflow: hidden;
}
.cc3-item--quiz > .accordion-collapse > .cc3-quiz-questions {
    border-radius: 0 0 10px 10px;
}
.cc3-item-quiz-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
}
.cc3-item-quiz-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    color: #1e1240 !important;
    font-size: var(--fs-sm) !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-align: left !important;
    flex: 1;
}
.cc3-item-quiz-toggle::after { display: none !important; }
.cc3-item-quiz-toggle:focus { box-shadow: none !important; outline: none !important; }
.cc3-item-count {
    font-size: 10.5px; font-weight: 700; color: #9ca3af;
    background: #f3f4f6; padding: 2px 7px; border-radius: 20px;
}

/* ── Quiz questions ─────────────────────────────────────── */
.cc3-quiz-questions {
    border-top: 1px solid #f0ecff;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #faf8ff;
}
.cc3-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border: 1px solid #ede9f8;
    border-radius: 8px;
    padding: 8px 12px;
}
.cc3-question-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.cc3-question-icon { color: #f59e0b; font-size: var(--fs-sm); }
.cc3-question-title {
    font-size: var(--fs-sm); font-weight: 600; color: #374151;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Empty chapter / inline empty ─────────────────────── */
.cc3-empty-chapter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: #9ca3af;
    font-size: var(--fs-sm);
    border: 1.5px dashed #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}
.cc3-empty-chapter i { color: #d1d5db; font-size: var(--fs-base); }
.cc3-empty-chapter strong { color: #A41034; }
.cc3-empty-inline {
    text-align: center;
    color: #9ca3af;
    font-size: 12.5px;
    margin: 4px 0;
}

/* ── Dropdown menu ──────────────────────────────────────── */
.cc3-dropdown {
    border: 1px solid #ede9f8 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(164,16,52,.12) !important;
    padding: 6px !important;
    min-width: 160px !important;
    z-index: 1055 !important;
}
.cc3-dropdown .dropdown-item {
    border-radius: 7px !important;
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #374151 !important;
}
.cc3-dropdown .dropdown-item:hover {
    background: rgba(164,16,52,.07) !important;
    color: #A41034 !important;
}
.cc3-dropdown .dropdown-item i { color: #A41034; font-size: var(--fs-xs); width: 14px; }

/* ── Modal ──────────────────────────────────────────────── */
.cc3-modal {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(164,16,52,.2) !important;
}
.cc3-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #A41034;
    border-bottom: 2px solid rgba(164,16,52,.25);
}
.cc3-modal-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .98rem; font-weight: 800;
    color: #fff; margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.cc3-modal-title i { color: #FFFFFF; }
.cc3-modal-body { padding: 20px; background: #fff; }
.cc3-form-grp { margin-bottom: 16px; }
.cc3-form-grp label {
    display: block;
    font-size: 12.5px; font-weight: 700;
    color: #A41034; margin-bottom: 8px;
    letter-spacing: .01em;
}
.cc3-form-grp label code { color: #ef4444; background: none; padding: 0; font-size: var(--fs-sm); font-weight: bold; }
.cc3-form-grp input {
    width: 100% !important; height: 44px !important;
    padding: 10px 14px !important;
    border: 1.5px solid #dcd7eb !important;
    border-radius: 10px !important;
    font-size: var(--fs-sm) !important; color: #1e1240 !important;
    background: #faf9ff !important;
    outline: none !important; transition: all .2s !important;
    text-align: left !important; direction: ltr !important;
    font-family: "Plus Jakarta Sans", sans-serif;
}
.cc3-form-grp input:focus {
    border-color: #A41034 !important;
    box-shadow: 0 0 0 3px rgba(164,16,52,.12) !important;
    background: #fff !important;
}
.cc3-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #f0ecff;
    margin-top: 4px;
}
.cc3-modal-btn {
    border-radius: 8px;
    font-size: var(--fs-sm); font-weight: 700;
    padding: 8px 18px; cursor: pointer;
    border: none; transition: all .2s;
}
.cc3-modal-btn--cancel {
    background: #f3f4f6; color: #374151;
    border: 1px solid #e5e7eb;
}
.cc3-modal-btn--cancel:hover { background: #e5e7eb; }
.cc3-modal-btn--submit {
    background: linear-gradient(135deg,#A41034,#A41034);
    color: #fff;
    box-shadow: 0 4px 14px rgba(164,16,52,.35);
}
.cc3-modal-btn--submit:hover {
    box-shadow: 0 6px 20px rgba(164,16,52,.5);
    transform: translateY(-1px);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .cc3-card-head { flex-direction: column; align-items: flex-start; padding: 16px 20px; }
    .cc3-card-body { padding: 16px; }
    .cc3-footer { padding: 14px 20px; }
    .cc3-chapter-toggle { padding: 12px !important; }
    .cc3-item-stat { display: none; }
    .cc3-chapter-head { flex-wrap: wrap; }
    .cc3-chapter-label { display: none; }
}




/* ── CC3 Inline Add-Chapter Form (replaces modal) ────────── */
.cc3-inline-form {
    background: linear-gradient(135deg, #FDF5F6 0%, #FBEEF0 100%);
    border-bottom: 2px solid rgba(164,16,52,.15);
    padding: 18px 28px;
    animation: cc3SlideDown .22s ease;
}
@keyframes cc3SlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cc3-inline-form-body {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}
.cc3-inline-form-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: rgba(164,16,52,.10);
    border: 1px solid rgba(164,16,52,.2);
    display: flex; align-items: center; justify-content: center;
    color: #A41034; font-size: var(--fs-md); flex-shrink: 0;
    margin-bottom: 1px;
}
.cc3-inline-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .cc3-inline-form { padding: 16px; }
    .cc3-inline-form-body { flex-direction: column; align-items: stretch; }
    .cc3-inline-form-icon { display: none; }
    .cc3-inline-form-actions { justify-content: flex-end; }
}


.klip-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 24px !important;
    background: linear-gradient(135deg, #100822 0%, #1e1040 60%, #0c0518 100%) !important;
    border-bottom: 3px solid rgba(164,16,52,.35) !important;
    border-radius: 0 !important;
}
.klip-modal-body {
    padding: 20px 24px !important;
    background: #faf9ff !important;
}
.klip-modal-head-left { display: flex; align-items: center; gap: 12px; }
.klip-modal-head-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: #FFFFFF; font-size: var(--fs-md);
}
.klip-modal-title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1rem; font-weight: 800;
    color: #fff; margin: 0; letter-spacing: .01em;
}
.klip-modal-sub { font-size: var(--fs-xs); color: rgba(255,255,255,.4); font-weight: 500; display: block; margin-top: 1px; }

/* Notice */
.klip-notice {
    display: flex; align-items: center; gap: 9px;
    background: rgba(164,16,52,.05); border-left: 3px solid #A41034;
    border-radius: 6px; padding: 9px 13px; margin-bottom: 18px;
    font-size: 12.5px; font-weight: 500; color: #475569;
}
.klip-notice i { color: #A41034; font-size: var(--fs-sm); flex-shrink: 0; }

/* Layout */
.klip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.klip-row--3 { grid-template-columns: 1fr auto 1fr; align-items: end; }
.klip-col--sm { min-width: 120px; }
.klip-col--xs { min-width: 90px; }

/* Field */
.klip-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.klip-field--center { align-items: center; }
.klip-label {
    font-size: 12.5px !important; font-weight: 700 !important;
    color: #A41034 !important; letter-spacing: .01em; margin: 0 !important;
    display: flex !important; align-items: center; gap: 4px;
}
.klip-label code { color: #ef4444 !important; background: none !important; padding: 0 !important; font-size: var(--fs-sm) !important; font-weight: bold !important; }
.klip-hint { font-size: 10.5px; font-weight: 500; color: #9ca3af; }

/* Inputs */
.klip-input, .klip-select, .klip-textarea {
    width: 100% !important; padding: 9px 13px !important;
    border: 1.5px solid #dcd7eb !important; border-radius: 9px !important;
    font-size: var(--fs-sm) !important; color: #1e1240 !important;
    background: #fff !important; outline: none !important;
    transition: border-color .2s, box-shadow .2s !important;
    font-family: "Plus Jakarta Sans", sans-serif;
    text-align: left !important; direction: ltr !important;
}
.klip-input:focus, .klip-select:focus, .klip-textarea:focus {
    border-color: #A41034 !important;
    box-shadow: 0 0 0 3px rgba(164,16,52,.12) !important;
}
.klip-input--readonly { background: #F3F4F6 !important; color: #6b7280 !important; cursor: default; }
.klip-textarea { height: 88px !important; resize: vertical !important; padding-top: 10px !important; }
.klip-select { height: 42px !important; cursor: pointer; }
.klip-char-hint { font-size: var(--fs-xs); color: #9ca3af; text-align: right; }

/* File input */
.klip-file-wrap { position: relative; }
.klip-file-hidden { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.klip-file-label {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 13px; border: 1.5px solid #dcd7eb; border-radius: 9px;
    background: #fff; color: #6b7280; font-size: var(--fs-sm); font-weight: 600;
    cursor: pointer; transition: border-color .2s, color .2s; overflow: hidden;
}
.klip-file-label i { color: #A41034; font-size: var(--fs-base); flex-shrink: 0; }
.klip-file-label:hover { border-color: #A41034; color: #A41034; }
.klip-file-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Dropzone */
.klip-dropzone {
    border: 2px dashed #dcd7eb !important; border-radius: 10px !important;
    background: #f9f7ff !important; min-height: 96px !important;
    transition: border-color .2s, background .2s !important;
    margin-bottom: 14px;
}
.klip-dropzone:hover, .klip-dropzone.dz-drag-hover {
    border-color: #A41034 !important; background: #f0ebff !important;
}
.klip-dropzone .dz-message { color: #9ca3af !important; font-size: var(--fs-sm) !important; font-weight: 600 !important; }
.klip-dropzone--docs { min-height: 72px !important; }

/* Toggle switch */
.klip-toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; margin: 0; }
.klip-toggle input { opacity: 0; width: 0; height: 0; }
.klip-toggle-slider {
    position: absolute; inset: 0; border-radius: 24px;
    background: #e5e7eb; transition: .25s;
}
.klip-toggle-slider::before {
    content: ''; position: absolute;
    width: 18px; height: 18px; border-radius: 50%;
    left: 3px; top: 3px; background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: .25s;
}
.klip-toggle input:checked + .klip-toggle-slider { background: linear-gradient(135deg,#A41034,#A41034); }
.klip-toggle input:checked + .klip-toggle-slider::before { transform: translateX(20px); }

/* Footer */
.klip-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding-top: 10px; margin-top: 2px;
    border-top: 1px solid rgba(164,16,52,.12);
}
.klip-btn {
    border-radius: 9px; font-size: var(--fs-sm); font-weight: 700;
    padding: 9px 20px; cursor: pointer; border: none;
    transition: all .2s; display: inline-flex; align-items: center; gap: 7px;
}
.klip-btn--cancel { background: #f3f4f6; color: #374151; border: 1.5px solid #e5e7eb; }
.klip-btn--cancel:hover { background: #e5e7eb; }
.klip-btn--submit {
    background: linear-gradient(135deg,#A41034,#A41034); color: #fff;
    box-shadow: 0 4px 14px rgba(164,16,52,.35);
}
.klip-btn--submit:hover {color: #FFFFFF; box-shadow: 0 6px 20px rgba(164,16,52,.5); transform: translateY(-1px); }

/* Validation error */
.klip-input.error, .klip-select.error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important; }
label.error { font-size: 11.5px !important; color: #ef4444 !important; font-weight: 600 !important; margin-top: 3px !important; display: block !important; }

@media (max-width: 576px) {
    .klip-row, .klip-row--3 { grid-template-columns: 1fr; }
    .klip-modal-body { padding: 16px; }
}
/* ════════════════════════════════════════════════════════════
   CC4 — Finish & Publish (Step 4)
   Namespace: .cc4
════════════════════════════════════════════════════════════ */

/* ── Card ───────────────────────────────────────────────── */
.cc4-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(164,16,52,.09), 0 1px 4px rgba(0,0,0,.05);
    border: 1px solid rgba(164,16,52,.1);
    margin-bottom: 24px;
    overflow: visible;
}
.cc4-card-head {
    display: flex; align-items: center; gap: 16px;
    padding: 22px 30px;
    background: #A41034;
    border-bottom: 3px solid rgba(164,16,52,.22);
    border-radius: 18px 18px 0 0;
}
.cc4-card-head-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: #FFFFFF; font-size: var(--fs-lg);
}
.cc4-card-head-title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem; font-weight: 800;
    color: #fff; margin: 0; letter-spacing: .01em;
}
.cc4-card-head-sub { font-size: var(--fs-xs); color: rgba(255,255,255,.45); margin: 2px 0 0; }

.cc4-card-body { padding: 30px 32px; background: #fff; border-radius: 0 0 18px 18px; }

/* ── Field ──────────────────────────────────────────────── */
.cc4-field { margin-bottom: 24px; }
.cc4-field--half { max-width: 100%; }

.cc4-label {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-sm) !important; font-weight: 700 !important;
    color: #A41034 !important; margin-bottom: 10px !important;
    letter-spacing: .01em;
}
.cc4-label-hint {
    font-size: var(--fs-xs); font-weight: 500; color: #9ca3af;
    background: #f3f4f6; padding: 2px 8px; border-radius: 20px;
}
.cc4-req { color: #ef4444 !important; background: none !important; padding: 0 !important; font-size: var(--fs-sm) !important; font-weight: bold !important; }

/* ── Textarea ───────────────────────────────────────────── */
.cc4-textarea {
    width: 100% !important; min-height: 120px !important;
    padding: 12px 16px !important;
    border: 1.5px solid #dcd7eb !important; border-radius: 10px !important;
    font-size: var(--fs-sm) !important; color: #1e1240 !important;
    background: #fff !important; outline: none !important;
    resize: vertical !important; font-family: "Plus Jakarta Sans", sans-serif;
    text-align: left !important; direction: ltr !important;
    transition: border-color .2s, box-shadow .2s !important;
    line-height: var(--lh-relaxed) !important;
}
.cc4-textarea:focus {
    border-color: #A41034 !important;
    box-shadow: 0 0 0 4px rgba(164,16,52,.1) !important;
}
.cc4-textarea::placeholder { color: #9ca3af !important; }

/* ── Status cards ───────────────────────────────────────── */
.cc4-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.cc4-status-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb; border-radius: 12px;
    background: #fff; cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s;
    position: relative;
}
.cc4-status-card input[type="radio"] {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0;
}
.cc4-status-card:hover {
    border-color: rgba(164,16,52,.3);
    box-shadow: 0 2px 10px rgba(164,16,52,.08);
}
.cc4-status-card--active {
    border-color: #A41034 !important;
    background: rgba(164,16,52,.03) !important;
    box-shadow: 0 0 0 3px rgba(164,16,52,.1) !important;
}
.cc4-status-card-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-base);
}
.cc4-status-card-icon--publish   { background: rgba(16,185,129,.1);  color: #10b981; }
.cc4-status-card-icon--draft     { background: rgba(245,158,11,.1);  color: #f59e0b; }
.cc4-status-card-icon--unpublish { background: rgba(107,114,128,.1); color: #6b7280; }
.cc4-status-card--active .cc4-status-card-icon--publish   { background: rgba(16,185,129,.18); }
.cc4-status-card--active .cc4-status-card-icon--draft     { background: rgba(245,158,11,.18); }
.cc4-status-card--active .cc4-status-card-icon--unpublish { background: rgba(107,114,128,.18); }
.cc4-status-card-title {
    display: block; font-size: var(--fs-sm); font-weight: 700; color: #1e1240; line-height: var(--lh-snug);
}
.cc4-status-card--active .cc4-status-card-title { color: #A41034; }
.cc4-status-card-desc { display: block; font-size: var(--fs-xs); color: #9ca3af; margin-top: 1px; }

/* ── Footer ─────────────────────────────────────────────── */
.cc4-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 24px; margin-top: 8px;
    border-top: 1px solid rgba(164,16,52,.1);
}
.cc4-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 10px;
    border: 1.5px solid rgba(164,16,52,.25); color: #A41034;
    font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
    background: #fff; transition: all .2s;
}
.cc4-back-btn:hover { border-color: #A41034; background: rgba(164,16,52,.04); color: #A41034; text-decoration: none; }
.cc4-back-btn i { font-size: .8rem; }
.cc4-save-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 10px; border: none; cursor: pointer;
    background: linear-gradient(135deg,#A41034,#A41034);
    color: #fff; font-size: var(--fs-sm); font-weight: 700;
    box-shadow: 0 4px 16px rgba(164,16,52,.35);
    transition: transform .2s, box-shadow .2s;
}
.cc4-save-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(164,16,52,.45); }
.cc4-save-btn i { font-size: .85rem; }

@media (max-width: 640px) {
    .cc4-status-grid { grid-template-columns: 1fr; }
    .cc4-card-body { padding: 20px; }
    .cc4-card-head { padding: 18px 20px; }
}

/* ════════════════════════════════════════════════════════════
   OC — My Courses (Instructor Dashboard)
   Namespace: .oc-scope
════════════════════════════════════════════════════════════ */

.oc-scope { font-family:"Plus Jakarta Sans", sans-serif; }

/* ── Alert ──────────────────────────────────────────────── */
.oc-alert {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fffbeb; border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b; border-radius: 12px;
    padding: 14px 18px; margin-bottom: 22px;
    font-size: var(--fs-sm); color: #78350f;
}
.oc-alert__icon { color: #f59e0b; font-size: var(--fs-md); flex-shrink: 0; margin-top: 1px; }
.oc-alert__body { flex: 1; }
.oc-alert__body strong { display: block; font-weight: 700; margin-bottom: 4px; }
.oc-alert__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.oc-alert__tag {
    font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px;
    background: #fef3c7; border: 1px solid #fde68a;
    border-radius: 20px; color: #92400e;
}

/* ── Hero Banner ────────────────────────────────────────── */
.oc-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #2B0510 0%, #A41034 50%, #A41034 100%);
    border-radius: 18px; padding: 28px 32px;
    margin-bottom: 22px;
    box-shadow: 0 8px 32px rgba(17,2,44,.4);
}
.oc-hero__shine {
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    pointer-events: none;
}
.oc-hero__blob {
    position: absolute; width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.07), transparent 65%);
    top: -130px; right: 10px; pointer-events: none;
}
.oc-hero__inner {
    display: flex; align-items: center; gap: 20px;
    position: relative; z-index: 1;
}
.oc-hero__icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.3rem;
}
.oc-hero__text { flex: 1; }
.oc-hero__eyebrow {
    font-size: .62rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 4px;
}
.oc-hero__title {
    font-family:"Plus Jakarta Sans", sans-serif; font-size: 1.6rem; font-weight: 800;
    color: #fff; margin: 0; letter-spacing: -.02em; line-height: var(--lh-tight);
}
.oc-hero__sub { font-size: .78rem; color: rgba(255,255,255,.42); margin: 5px 0 0; }
.oc-hero__cta {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28);
    color: #fff; padding: 10px 20px; border-radius: 10px;
    font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
    backdrop-filter: blur(6px);
    transition: background .2s, border-color .2s;
}
.oc-hero__cta:hover {
    background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.45);
    color: #fff; text-decoration: none;
}

/* ── Stats Strip ────────────────────────────────────────── */
.oc-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}
.oc-stat-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border-radius: 14px;
    padding: 18px 20px;
    border: 1.5px solid rgba(164,16,52,.1);
    box-shadow: 0 2px 10px rgba(164,16,52,.06);
    transition: box-shadow .2s, transform .2s;
}
.oc-stat-card:hover { box-shadow: 0 6px 20px rgba(164,16,52,.12); transform: translateY(-2px); }
.oc-stat-card__icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-lg);
}
.oc-stat-card--1 .oc-stat-card__icon { background: rgba(164,16,52,.1);  color: #A41034; }
.oc-stat-card--2 .oc-stat-card__icon { background: rgba(16,185,129,.1);   color: #10b981; }
.oc-stat-card--3 .oc-stat-card__icon { background: rgba(245,158,11,.1);   color: #f59e0b; }
.oc-stat-card--4 .oc-stat-card__icon { background: rgba(59,130,246,.1);   color: #3b82f6; }
.oc-stat-card__info { display: flex; flex-direction: column; }
.oc-stat-card__val {
    font-family:"Plus Jakarta Sans", sans-serif; font-size: 1.35rem; font-weight: 800;
    color: #1e1240; line-height: var(--lh-tight);
}
.oc-stat-card__lbl { font-size: var(--fs-xs); font-weight: 500; color: #9ca3af; margin-top: 2px; }

/* ── Toolbar ────────────────────────────────────────────── */
.oc-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.oc-toolbar__count { font-size: var(--fs-sm); color: #6b7280; margin: 0; font-weight: 500; }
.oc-toolbar__count strong { color: #1e1240; font-weight: 700; }

/* ── Course Grid ────────────────────────────────────────── */
.oc-course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

/* ── Course Card ────────────────────────────────────────── */
.oc-course-card {
    background: #fff; border-radius: 16px;
    border: 1.5px solid rgba(164,16,52,.1);
    box-shadow: 0 2px 12px rgba(164,16,52,.07);
    overflow: hidden;
    transition: box-shadow .25s, transform .25s, border-color .25s;
    display: flex; flex-direction: column;
}
.oc-course-card:hover {
    box-shadow: 0 10px 32px rgba(164,16,52,.14);
    transform: translateY(-4px);
    border-color: rgba(164,16,52,.22);
}

/* Thumbnail */
.oc-course-card__thumb {
    position: relative; height: 170px; overflow: hidden; flex-shrink: 0;
}
.oc-course-card__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.oc-course-card:hover .oc-course-card__thumb img { transform: scale(1.05); }
.oc-course-card__thumb-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(15,7,35,.7));
    pointer-events: none;
}

/* Status badge */
.oc-status-badge {
    position: absolute; top: 12px; left: 12px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    padding: 3px 9px; border-radius: 20px;
    backdrop-filter: blur(8px); text-transform: uppercase;
}
.oc-status-badge--published  { background: rgba(16,185,129,.85);  color: #fff; }
.oc-status-badge--pending    { background: rgba(245,158,11,.85);  color: #fff; }
.oc-status-badge--rejected   { background: rgba(239,68,68,.85);   color: #fff; }
.oc-status-badge--inactive   { background: rgba(107,114,128,.85); color: #fff; }
.oc-status-badge--draft      { background: rgba(164,16,52,.7);      color: #e9d5ff; }

/* Price chip */
.oc-thumb-price {
    position: absolute; bottom: 10px; right: 12px;
    font-size: var(--fs-xs); font-weight: 800; color: #fff;
    background: rgba(164,16,52,.75); backdrop-filter: blur(6px);
    padding: 3px 9px; border-radius: 8px;
}

/* Action buttons (show on hover) */
.oc-card-actions {
    position: absolute; top: 10px; right: 10px;
    display: flex; flex-direction: column; gap: 5px;
    opacity: 0; transition: opacity .2s;
}
.oc-course-card:hover .oc-card-actions { opacity: 1; }
.oc-card-act-btn {
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    color: #1e1240; font-size: var(--fs-sm); text-decoration: none;
    border: 1px solid rgba(0,0,0,.08);
    transition: background .15s, color .15s;
}
.oc-card-act-btn:hover { background: #A41034; color: #fff; text-decoration: none; }
.oc-card-act-btn--view:hover  { background: #10b981; color: #fff; }
.oc-card-act-btn--delete:hover { background: #ef4444; color: #fff; }

/* Body */
.oc-course-card__body {
    padding: 16px 18px 14px; display: flex; flex-direction: column; flex: 1;
}
.oc-course-card__cat {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #A41034;
    background: rgba(164,16,52,.08); padding: 2px 8px;
    border-radius: 20px; display: inline-block; margin-bottom: 7px;
}
.oc-course-card__title {
    font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; font-weight: 700;
    color: #1e1240; margin: 0 0 10px; line-height: var(--lh-snug);
}
.oc-course-card__title a { color: inherit; text-decoration: none; }
.oc-course-card__title a:hover { color: #A41034; }

/* Meta row */
.oc-meta-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.oc-instructor-chip {
    display: flex; align-items: center; gap: 7px;
    font-size: var(--fs-xs); font-weight: 600; color: #374151;
}
.oc-instructor-chip img {
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
    border: 1.5px solid rgba(164,16,52,.2);
}
.oc-stars {
    display: flex; align-items: center; gap: 4px;
    font-size: var(--fs-xs); font-weight: 700; color: #f59e0b;
}
.oc-stars span { color: #374151; }

/* Footer stats */
.oc-card-footer {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
    margin-top: auto;
}
.oc-card-stat {
    display: flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: 600; color: #6b7280;
}
.oc-card-stat i { font-size: var(--fs-xs); color: #9ca3af; }
.oc-earnings-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: 700; color: #10b981;
    background: rgba(16,185,129,.1); padding: 2px 9px;
    border-radius: 20px; margin-left: auto;
}
.oc-earnings-chip i { font-size: var(--fs-xs); }

/* ── Empty State ────────────────────────────────────────── */
.oc-empty {
    grid-column: 1 / -1;
    text-align: center; padding: 64px 24px;
    background: #fff; border-radius: 16px;
    border: 1.5px dashed rgba(164,16,52,.2);
}
.oc-empty__circle {
    width: 72px; height: 72px; border-radius: 20px;
    background: rgba(164,16,52,.08); border: 1px solid rgba(164,16,52,.15);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-3xl); color: #A41034; margin-bottom: 20px;
}
.oc-empty__title {
    font-family:"Plus Jakarta Sans", sans-serif;font-size: 1.2rem; font-weight: 800;
    color: #1e1240; margin-bottom: 8px;
}
.oc-empty__desc { font-size: var(--fs-sm); color: #6b7280; max-width: 420px; margin: 0 auto 24px; line-height: var(--lh-relaxed); }

/* ── Primary Button ─────────────────────────────────────── */
.oc-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg,#A41034,#A41034);
    color: #fff; border-radius: 10px; padding: 11px 22px;
    font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 14px rgba(164,16,52,.35);
    transition: transform .2s, box-shadow .2s;
}
.oc-btn-primary:hover {
    transform: translateY(-1px); box-shadow: 0 6px 22px rgba(164,16,52,.45);
    color: #fff; text-decoration: none;
}

/* ── Pagination ─────────────────────────────────────────── */
.oc-pagination { display: flex; justify-content: center; margin-top: 8px; }
.oc-pagination .pagination { gap: 4px; }
.oc-pagination .page-link {
    border-radius: 8px !important; font-size: var(--fs-sm); font-weight: 600;
    color: #A41034; border-color: rgba(164,16,52,.2);
    padding: 7px 13px;
}
.oc-pagination .page-item.active .page-link {
    background: #A41034 !important; border-color: #A41034 !important; color: #fff !important;
}
.oc-pagination .page-link:hover { background: rgba(164,16,52,.08); }

/* ── Delete Modal ───────────────────────────────────────── */
.oc-delete-modal-content {
    border: none !important; border-radius: 16px !important; overflow: hidden;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .oc-course-grid { grid-template-columns: repeat(2, 1fr); }
    .oc-stats-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .oc-course-grid { grid-template-columns: 1fr; }
    .oc-stats-strip { grid-template-columns: repeat(2, 1fr); }
    .oc-hero { padding: 20px; }
    .oc-hero__inner { flex-wrap: wrap; }
    .oc-hero__cta { width: 100%; justify-content: center; }
    .oc-hero__title { font-size: 1.3rem; }
}



/* ════════════════════════════════════════════════════════════
   SD-FRAME — Student Dashboard Premium Wireframe
════════════════════════════════════════════════════════════ */

/* Outer frame shell */
.sd-frame {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #1C1514;
    border: 1.5px solid #1C1514;
    
}

/* Animated shimmer line across very top */
.sd-frame::before {
    content: "";
    display: block;
    height: 2px;
     
    background-size: 200% auto;
    animation: sdShimmer 4s linear infinite;
    flex-shrink: 0;
}
@keyframes sdShimmer {
    0%   { background-position: -100% center; }
    100% { background-position:  300% center; }
}

/* Inner glow border overlay */
.sd-frame::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 22px;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(196,181,253,.15),
                inset 0 -1px 0 rgba(164,16,52,.1);
    z-index: 10;
}

/* ── Top bar ────────────────────────────────────────────── */
.sd-frame__top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    height: 38px;
    padding: 0 20px;
    background: #1C1514;
    border-bottom: 1px solid rgba(164,16,52,.18);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}
/* suppress leftover pseudo content */
.sd-frame__top-bar::before,
.sd-frame__top-bar::after { display: none; }

/* Brand pill — left */
.sd-frame__brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family:"Plus Jakarta Sans", sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -.01em;
    flex-shrink: 0;
}
.sd-frame__brand i {
    width: 20px; height: 20px;
    border-radius: 6px;
    background: #1C1514;
    display: inline-flex; align-items: center; justify-content: center;
    color: #FFFFFF; font-size: 9px;
}

/* Centre breadcrumb */
.sd-frame__label {
    flex: 1;
    text-align: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255,255,255,.25);
    letter-spacing: .1em;
    text-transform: uppercase;
    user-select: none;
}

/* Live indicator — right */
.sd-frame__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.3);
    letter-spacing: .06em;
    flex-shrink: 0;
}
.sd-frame__status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 5px rgba(16,185,129,.8);
    animation: sdPulse 2.5s ease-in-out infinite;
}
@keyframes sdPulse {
    0%, 100% { opacity: 1;  box-shadow: 0 0 5px  rgba(16,185,129,.8); }
    50%       { opacity: .4; box-shadow: 0 0 10px rgba(16,185,129,.3); }
}

/* ── Body grid ──────────────────────────────────────────── */
.sd-frame__body {
    display: flex;
    padding: 0;
    position: relative;
    z-index: 1;
}

/* Left sidebar column */
.sd-frame__sidebar-col {
    padding: 20px 0 20px 20px !important;
}

/* Right content column — subtle left divider */
.sd-frame__content-col {
    padding: 20px !important;
    border-left: 1px solid rgba(164,16,52,.1);
    background: rgba(255,255,255,.55);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991px) {
    .sd-frame { border-radius: 16px; }
    .sd-frame__sidebar-col { padding: 14px 14px 0 14px !important; }
    .sd-frame__content-col { padding: 14px !important; border-left: none !important; border-top: 1px solid rgba(164,16,52,.12); }
    .sd-frame__label { display: none; }
}
@media (max-width: 768px) {
    .sd-frame { border-radius: 14px; }
    .sd-frame__body { padding: 10px 4px; }
    .sd-frame__label { display: none; }
}

/* ── SD-FRAME section spacing fix ──────────────────────── */
.dashboard__area {
    margin-top: 0 !important;
    padding-top: 28px !important;
    padding-bottom: 48px !important;
}

/* ════════════════════════════════════════════════════════════════
   COURSES PAGE — CARD & FILTER REDESIGN
   Overrides the earlier ig-cr-* / ig-cc-* blocks via cascade.
════════════════════════════════════════════════════════════════ */

/* ── Page body ── */
.ig-cr-body {   padding: 36px 0 72px; min-height: 60vh; }

/* ══ SIDEBAR / FILTER ══ */
.ig-cr-sidebar { position: sticky; top: 92px; }

.ig-cr-filter-card {
    
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(164,16,52,.10);
    box-shadow: 0 4px 28px rgba(28,21,20,.08);
}

.ig-cr-filter-header {
    background: linear-gradient(135deg, #A41034 0%, #8b0a28 100%);
    padding: 15px 20px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: none;
}
.ig-cr-filter-title {
    font-size: var(--fs-sm); font-weight: 700; color: #fff;
    display: flex; align-items: center; gap: 8px; letter-spacing: .2px;
}
.ig-cr-filter-title i { color: #FFFFFF; font-size: var(--fs-sm); }
.ig-cr-clear-all {
    font-size: var(--fs-xs); font-weight: 600; color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.15); border: none; border-radius: 6px;
    padding: 3px 10px; cursor: pointer; transition: background .18s, color .18s;
}
.ig-cr-clear-all:hover { background: rgba(255,255,255,.28); color: #fff; text-decoration: none; }

.ig-cr-widget {
    padding: 15px 20px;
    border-bottom: 1px solid #f0eced;
    transition: background .15s;
}
.ig-cr-widget:last-child { border-bottom: none; }
.ig-cr-widget:hover { background: #fafaf9; }

.ig-cr-widget-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.ig-cr-widget-label {
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.1px; color: #A41034;
}
.ig-cr-clear-btn {
    font-size: 10.5px; font-weight: 600; color: #9ca3af;
    background: rgba(164,16,52,.06); border: none; border-radius: 5px;
    padding: 2px 8px; cursor: pointer; display: none;
    transition: background .15s, color .15s;
}
.ig-cr-clear-btn:hover { background: rgba(164,16,52,.12); color: #A41034; }

/* Custom radio */
.ig-cr-radio-dot {
    width: 17px; height: 17px; border-radius: 50%;
    border: 2px solid #d1d5db; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .18s;
}
.ig-cr-check input:checked ~ .ig-cr-radio-dot { border-color: #A41034; }
.ig-cr-check input:checked ~ .ig-cr-radio-dot::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: #A41034; display: block;
}

/* Custom checkbox */
.ig-cr-check-box {
    width: 17px; height: 17px; border-radius: 5px;
    border: 2px solid #d1d5db; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .18s, background .18s;
}
.ig-cr-check input:checked ~ .ig-cr-check-box { background: #A41034; border-color: #A41034; }
.ig-cr-check input:checked ~ .ig-cr-check-box::after {
    content: '✓'; color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
}

/* Item row */
.ig-cr-check {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 6px; border-radius: 8px; cursor: pointer;
    transition: background .15s;
}
.ig-cr-check:hover { background: #fdf8f8; }
.ig-cr-check input[type=checkbox],
.ig-cr-check input[type=radio] { display: none; }

.ig-cr-check-label {
    font-size: var(--fs-sm); color: #4b5563; line-height: var(--lh-snug); transition: color .15s;
}
.ig-cr-check:hover .ig-cr-check-label { color: #A41034; }
.ig-cr-check input:checked ~ .ig-cr-check-label { color: #A41034; font-weight: 700; }

/* Stars */
.ig-cr-star-row { display: flex; align-items: center; gap: 4px; }
.ig-cr-stars { display: flex; align-items: center; gap: 2px; }
.ig-cr-stars i { color: #f59e0b; font-size: var(--fs-xs); }
.ig-cr-stars i.empty { color: #e5e7eb; }
.ig-cr-rating-text { font-size: var(--fs-xs); color: #6b7280; margin-left: 4px; }

/* Sub-cat separator */
.sub-category-holder .ig-cr-widget { border-top: 1px solid #f0eced; }

/* ══ TOP BAR ══ */
.ig-cr-topbar {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border-radius: 12px; padding: 12px 18px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(28,21,20,.06);
    border: 1px solid rgba(164,16,52,.07);
}
.ig-cr-count { font-size: var(--fs-sm); color: #6b7280; }
.ig-cr-count strong { color: #A41034; font-weight: 800; }
.ig-cr-sort { display: flex; align-items: center; gap: 10px; }
.ig-cr-sort-label { font-size: 12.5px; color: #9ca3af; font-weight: 500; white-space: nowrap; }
.ig-cr-sort select.orderby {
    -webkit-appearance: none; appearance: none;
    padding: 7px 32px 7px 12px;
    border: 1.5px solid #e5e7eb; border-radius: 9px;
    font-size: 12.5px; font-weight: 500; color: #374151;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 10px center;
    cursor: pointer; outline: none;
    transition: border-color .18s, box-shadow .18s;
}
.ig-cr-sort select.orderby:focus { border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.08); }

/* ══ COURSE CARD ══ */
.ig-course-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #FFFFFF;
    box-shadow: 0 2px 12px rgba(28,21,20,.06);
    height: 100%;
    display: flex; flex-direction: column;
    position: relative;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s;
}
.ig-course-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,#A41034,#8b0a28,#FFFFFF);
    opacity: 0; transition: opacity .22s; z-index: 2;
}
.ig-course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(28,21,20,.14);
    border-color: rgba(164,16,52,.22);
}
.ig-course-card:hover::before { opacity: 1; }

/* Thumbnail */
.ig-cc-thumb {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 9; flex-shrink: 0;
    background: #f5e5e8;
}
.ig-cc-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .45s ease;
}
.ig-course-card:hover .ig-cc-thumb img { transform: scale(1.06); }

/* Hover play overlay */
.ig-cc-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,rgba(20,0,5,.15) 0%,rgba(20,0,5,.72) 100%);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .28s ease;
}
.ig-course-card:hover .ig-cc-overlay { opacity: 1; }
.ig-cc-view-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; background: #fff; color: #A41034;
    border-radius: 100px; font-size: var(--fs-sm); font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    transform: translateY(8px);
    transition: background .18s, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.ig-course-card:hover .ig-cc-view-btn { transform: translateY(0); }
.ig-cc-view-btn:hover { background: #fdf8f8; color: #A41034; text-decoration: none; }

/* Badges */
.ig-cc-badge-row {
    position: absolute; top: 10px; left: 10px;
    display: flex; gap: 5px; flex-wrap: wrap; z-index: 3;
}
.ig-cc-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 100px;
    font-size: 10px; font-weight: 800; letter-spacing: .5px; line-height: var(--lh-normal);
}
.ig-cc-badge.free { background: rgba(22,163,74,.92); color: #fff; }
.ig-cc-badge.paid { background: #A41034; color: #fff; }
.ig-cc-badge.cert { background: rgba(245,158,11,.92); color: #fff; }
.ig-cc-badge.new  { background: linear-gradient(135deg,#db2777,#f472b6); color: #fff; }

/* Card body — explicit white background */
.ig-cc-body {
    background: #ffffff;
    padding: 16px 18px 14px;
    flex: 1; display: flex; flex-direction: column;
}

/* Category chip */
.ig-cc-cat {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: #A41034; background: rgba(164,16,52,.08);
    border-radius: 6px; padding: 2px 9px;
    margin-bottom: 8px;
    max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

/* Title */
.ig-cc-title {
    font-size: var(--fs-sm); font-weight: 700; color: #111827;
    line-height: 1.45; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    flex-shrink: 0;
}
.ig-cc-title a { color: inherit; text-decoration: none; }
.ig-cc-title a:hover { color: #A41034; }

/* Instructor row */
.ig-cc-instructor {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.ig-cc-inst-img {
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0; border: 2px solid #FFFFFF;
}
.ig-cc-inst-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: #A41034;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.ig-cc-inst-name { font-size: var(--fs-xs); color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-cc-inst-name a { color: #374151; font-weight: 600; text-decoration: none; }
.ig-cc-inst-name a:hover { color: #A41034; }

/* Meta pills */
.ig-cc-meta {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px; flex-wrap: wrap;
}
.ig-cc-rating {
    display: inline-flex; align-items: center; gap: 3px;
    background: #fffbeb; border-radius: 6px; padding: 3px 8px;
    font-size: var(--fs-xs); font-weight: 700; color: #d97706;
}
.ig-cc-rating i { color: #f59e0b; font-size: 10px; }
.ig-cc-rating span { color: #9ca3af; font-weight: 400; font-size: var(--fs-xs); margin-left: 2px; }
.ig-cc-dur {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; color: #6b7280;
    background: #f9fafb; border-radius: 6px; padding: 3px 8px;
}
.ig-cc-dur i { color: #FFFFFF; font-size: 10px; }
.ig-cc-level {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; color: #6b7280;
    background: #f9fafb; border-radius: 6px; padding: 3px 8px;
}
.ig-cc-level i { color: #A41034; font-size: 10px; }

/* Enrollment count */
.ig-cc-enroll-count {
    font-size: 11.5px; color: #9ca3af;
    display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
}
.ig-cc-enroll-count i { font-size: var(--fs-xs); color: #FFFFFF; }

/* Footer */
.ig-cc-footer {
    margin-top: auto; padding-top: 12px;
    border-top: 1px solid #FFFFFF;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ig-cc-price-wrap { display: flex; align-items: baseline; gap: 6px; }
.ig-cc-price { font-size: 1.15rem; font-weight: 800; color: #111827; }
.ig-cc-price.free { font-size: 1rem; font-weight: 700; color: #16a34a; }
.ig-cc-price-orig { font-size: 11.5px; color: #d1d5db; text-decoration: line-through; }

.ig-cc-cart-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 15px;
    background: #A41034;
    color: #fff; border-radius: 9px;
    font-size: var(--fs-xs); font-weight: 700;
    cursor: pointer; border: none; text-decoration: none;
    box-shadow: 0 2px 8px rgba(164,16,52,.30);
    transition: opacity .18s, transform .18s, box-shadow .18s;
    white-space: nowrap;
}
.ig-cc-cart-btn:hover {
    opacity: .92; transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(164,16,52,.40);
    color: #fff; text-decoration: none;
}
.ig-cc-enrolled-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 15px; background: #dcfce7; color: #15803d;
    border-radius: 9px; font-size: var(--fs-xs); font-weight: 700;
    text-decoration: none; white-space: nowrap; border: 1px solid #bbf7d0;
}
.ig-cc-enrolled-btn:hover { background: #bbf7d0; color: #15803d; text-decoration: none; }
.ig-cc-booked-btn {
    padding: 8px 15px; background: #f9fafb; color: #d1d5db;
    border-radius: 9px; font-size: var(--fs-xs); font-weight: 700;
    white-space: nowrap; border: 1px solid #e5e7eb;
}

/* Share */
.ig-cc-share-wrap { position: absolute; top: 10px; right: 10px; z-index: 5; }
.ig-cc-share-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.92); border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); color: #374151; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    transition: background .18s, color .18s; backdrop-filter: blur(6px);
}
.ig-cc-share-btn:hover { background: #fff; color: #A41034; }
.ig-cc-share-dropdown {
    position: absolute; top: 40px; right: 0;
    background: #fff; border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 8px;
    display: flex; flex-direction: column; gap: 4px;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px) scale(.96);
    transition: all .18s ease; z-index: 20;
    min-width: 42px; align-items: center;
    border: 1px solid #FFFFFF;
}
.ig-cc-share-wrap:hover .ig-cc-share-dropdown,
.ig-cc-share-wrap.open .ig-cc-share-dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ig-cc-share-link {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); text-decoration: none; border: none; cursor: pointer; transition: all .15s;
}
.ig-share-fb { background:#e8f0fe; color:#1877f2; } .ig-share-fb:hover { background:#1877f2; color:#fff; }
.ig-share-tw { background:#e8f5fe; color:#000; }    .ig-share-tw:hover { background:#000; color:#fff; }
.ig-share-li { background:#e8f0fe; color:#0a66c2; } .ig-share-li:hover { background:#0a66c2; color:#fff; }
.ig-share-wa { background:#e8fde8; color:#25d366; } .ig-share-wa:hover { background:#25d366; color:#fff; }
.ig-share-copy { background:#f9f9f9; color:#374151; } .ig-share-copy:hover { background:#A41034; color:#fff; }

/* Empty state */
.ig-cr-empty {
    text-align: center; padding: 72px 24px;
    background: #fff; border-radius: 16px; border: 1px dashed #FFFFFF;
}
.ig-cr-empty-icon {
    width: 76px; height: 76px; border-radius: 50%;
    background: rgba(164,16,52,.07);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px; font-size: var(--fs-3xl); color: #A41034;
    box-shadow: 0 4px 16px rgba(164,16,52,.15);
}
.ig-cr-empty h5 { font-size: 1.1rem; font-weight: 800; color: #1C1514; margin-bottom: 8px; }
.ig-cr-empty p { font-size: var(--fs-sm); color: #9ca3af; }

/* Pagination */
.pagination-wrap { margin-top: 32px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.pagination .page-item .page-link {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 9px;
    background: #fff; border: 1.5px solid #e5e7eb;
    color: #374151; font-size: var(--fs-sm); font-weight: 600;
    text-decoration: none; transition: all .15s;
}
.pagination .page-item.active .page-link { background: #A41034; border-color: transparent; color: #fff; }
.pagination .page-item .page-link:hover:not(.active) { border-color: #A41034; color: #A41034; }

/* Responsive */
@media (max-width: 991px) {
    .ig-cr-sidebar { position: static; margin-bottom: 20px; }
    .ig-cr-filter-card { max-height: none; }
}
@media (max-width: 575px) {
    .ig-cr-topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ig-cc-body { padding: 14px 14px 12px; }
}

/* ════════════════════════════════════════════════════════════
   STUDENT DASHBOARD — FULL PREMIUM REDESIGN
   Scoped overrides so they don't bleed into other pages
════════════════════════════════════════════════════════════ */

/* ── 1. PAGE BACKGROUND ─────────────────────────────────── */
.dashboard__area {
    background: linear-gradient(160deg, #f0eefa 0%, #e8e4f5 100%) !important;
}

/* ── 2. FRAME — refined app window ─────────────────────── */
.sd-frame {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #1C1514;
    border: 1.5px solid #1C1514;
    
}
.sd-frame::before {
    height: 3px !important; 
    background-size: 200% auto !important;
}
.sd-frame::after {
    border: none !important;
    box-shadow: none !important;
}

/* ── 3. TOP BAR ─────────────────────────────────────────── */
.sd-frame__top-bar {
    height: 40px !important;
    padding: 0 24px !important;
    background: #1C1514 !important;
    border-bottom: 1px solid rgba(164,16,52,.2) !important;
}
.sd-frame__brand {
    font-size: var(--fs-sm) !important;
    color: #FFFFFF !important;
    gap: 8px !important;
}
.sd-frame__brand i {
    background: #1C1514 !important; 
}
.sd-frame__label {
    font-size: 10px !important;
    color: rgba(255,255,255,.22) !important;
    letter-spacing: .12em !important;
}
.sd-frame__status { color: rgba(255,255,255,.3) !important; }

/* ── 4. LAYOUT COLUMNS ──────────────────────────────────── */
.sd-frame__sidebar-col {
    padding: 20px 0 24px 20px !important;
    background: transparent !important;
}
.sd-frame__content-col {
    padding: 24px !important;
    background: #faf8ff !important;
    border-left: 1px solid rgba(164,16,52,.1) !important;
    border-radius: 0 0 24px 0 !important;
}

/* ── 5. SIDEBAR ─────────────────────────────────────────── */
.student-sidebar {
    margin-top: 0 !important;
    background: #1C1514 !important;
    border-radius: 18px !important;
    box-shadow:
        0 0 0 1px rgba(164,16,52,.2),
        0 8px 32px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(167,139,250,.1) !important;
}
.ss-name   { color: #fff !important; font-size: 1rem !important; }
.ss-email  { color: rgba(255,255,255,.32) !important; }
.ss-switch {
    background:#A41034 !important;
    border-color: #A41034 !important;
    color: #fff !important;
}
.ss-nav ul li a {
    font-size: .83rem !important;
    color: rgba(255,255,255,.5) !important;
    border-radius: 12px !important;
    transition: all .2s !important;
}
.ss-nav ul li a:hover {
  background: linear-gradient(135deg, #A41034 0%, #3d0613 50%, #1a1a1a 100%);
    color: rgba(255, 255, 255, 0.9); 
    text-decoration: none;
    padding-left: 14px;
}
.ss-nav ul li.active a {
    background: #A41034 !important;
    color: #e9d5ff !important;
    border-left-color: #FFFFFF !important;
    font-weight: 700 !important;
}
.ss-section {
    color: rgba(255,255,255,.2) !important;
    font-size: .58rem !important;
    letter-spacing: .16em !important;
}
.ss-divider { background: rgba(255,255,255,.06) !important; }

/* ── 6. SD TOKEN OVERRIDES (light content context) ──────── */
.sd-frame__content-col .sd,
.sd-frame__content-col {
    --card:       #ffffff;
    --card-alt:   #f5f2ff;
    --border:     rgba(164,16,52,.12);
    --text:       #1a0f3e;
    --text-sub:   #5b4d7a;
    --text-muted: #9b8ec4;
    --radius:     16px;
    --radius-sm:  10px;
}

/* ── 7. HERO ────────────────────────────────────────────── */
.sd-hero {
    background: #A41034;
    border-radius: 20px !important;
    padding: 32px 36px !important;
    box-shadow:
        0 0 0 1px rgba(164,16,52,.25),
        0 12px 40px rgba(164,16,52,.3) !important;
    margin-bottom: 22px !important;
}
.sd-hero__greeting { color: #FFFFFF !important; font-size: .68rem !important; }
.sd-hero__name { font-size: 2.1rem !important; }
.sd-hero__name span {
    background: #A41034 !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.sd-hero__sub { color: rgba(255,255,255,.55) !important; font-size: .85rem !important; }
.sd-hero__badge {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(196,181,253,.25) !important;
    border-radius: 14px !important;
    padding: 16px 22px !important;
}
.sd-hero__badge-val { font-size: 1.5rem !important; }
.sd-hero__badge-lbl { color: #FFFFFF !important; font-size: .65rem !important; }

/* ── 8. STAT CARDS ──────────────────────────────────────── */
.sd-stats { gap: 14px !important; margin-bottom: 22px !important; }
.sd-stat {
    background: #fff !important;
    border: 1px solid rgba(164,16,52,.1) !important;
    border-left-width: 4px !important;
    border-radius: 14px !important;
    padding: 18px 18px 18px 16px !important;
    box-shadow: 0 2px 12px rgba(164,16,52,.07), 0 1px 3px rgba(0,0,0,.04) !important;
    transition: transform .22s, box-shadow .22s !important;
}
.sd-stat:hover {
    transform: translateY(-3px) !important;
}
.sd-stat--courses:hover { box-shadow: 0 8px 28px rgba(164,16,52,.14) !important; }
.sd-stat--klips:hover   { box-shadow: 0 8px 28px rgba(6,182,212,.14) !important; }
.sd-stat--quiz:hover    { box-shadow: 0 8px 28px rgba(245,158,11,.14) !important; }
.sd-stat--reviews:hover { box-shadow: 0 8px 28px rgba(244,63,94,.14) !important; }
.sd-stat--credit:hover  { box-shadow: 0 8px 28px rgba(16,185,129,.14) !important; }
.sd-stat--streak:hover  { box-shadow: 0 8px 28px rgba(249,115,22,.14) !important; }

.sd-stat__icon {
    width: 46px !important; height: 46px !important;
    border-radius: 12px !important; font-size: 1.15rem !important;
}
.sd-stat--courses .sd-stat__icon { background: #FBEEF0 !important; color: #A41034 !important; }
.sd-stat--klips   .sd-stat__icon { background: #cffafe !important; color: #0891b2 !important; }
.sd-stat--quiz    .sd-stat__icon { background: #fef3c7 !important; color: #d97706 !important; }
.sd-stat--reviews .sd-stat__icon { background: #ffe4e6 !important; color: #e11d48 !important; }
.sd-stat--credit  .sd-stat__icon { background: #d1fae5 !important; color: #059669 !important; }
.sd-stat--streak  .sd-stat__icon { background: #ffedd5 !important; color: #ea580c !important; }

.sd-stat__val {
    font-size: 1.75rem !important;
    color: #1a0f3e !important;
    margin-bottom: 3px !important;
}
.sd-stat__lbl { color: #9b8ec4 !important; font-size: .69rem !important; }

/* ── 9. SECTION LABEL ───────────────────────────────────── */
.sd-label {
    color: #7c6aaa !important;
    font-size: .65rem !important;
    letter-spacing: .14em !important;
    margin-bottom: 14px !important;
    margin-top: 22px !important;
}
.sd-label::after { background: linear-gradient(90deg,rgba(164,16,52,.2),transparent) !important; }

/* ── 10. QUICK ACCESS LINKS ─────────────────────────────── */
.sd-links { gap: 12px !important; margin-bottom: 22px !important; }
.sd-link {
    background: #fff !important;
    border: 1px solid rgba(164,16,52,.1) !important;
    border-radius: 16px !important;
    padding: 22px 14px 18px !important;
    box-shadow: 0 2px 10px rgba(164,16,52,.06) !important;
    transition: transform .22s, box-shadow .22s, border-color .22s !important;
}
.sd-link:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(164,16,52,.22) !important;
}
.sd-link--enrolled:hover { box-shadow: 0 10px 28px rgba(164,16,52,.14) !important; }
.sd-link--klips:hover    { box-shadow: 0 10px 28px rgba(6,182,212,.14) !important; }
.sd-link--wishlist:hover { box-shadow: 0 10px 28px rgba(244,63,94,.14) !important; }
.sd-link--quiz:hover     { box-shadow: 0 10px 28px rgba(245,158,11,.14) !important; }
.sd-link--certs:hover    { box-shadow: 0 10px 28px rgba(16,185,129,.14) !important; }
.sd-link--orders:hover   { box-shadow: 0 10px 28px rgba(249,115,22,.14) !important; }
.sd-link--profile:hover  { box-shadow: 0 10px 28px rgba(164,16,52,.14) !important; }
.sd-link--shorts:hover   { box-shadow: 0 10px 28px rgba(6,182,212,.14) !important; }

.sd-link__icon {
    width: 52px !important; height: 52px !important;
    border-radius: 14px !important; font-size: 1.2rem !important;
}
.sd-link--enrolled .sd-link__icon { background: #FBEEF0 !important; color: #A41034 !important; }
.sd-link--klips    .sd-link__icon { background: #cffafe !important; color: #0891b2 !important; }
.sd-link--wishlist .sd-link__icon { background: #ffe4e6 !important; color: #e11d48 !important; }
.sd-link--quiz     .sd-link__icon { background: #fef3c7 !important; color: #d97706 !important; }
.sd-link--certs    .sd-link__icon { background: #d1fae5 !important; color: #059669 !important; }
.sd-link--orders   .sd-link__icon { background: #ffedd5 !important; color: #ea580c !important; }
.sd-link--profile  .sd-link__icon { background: #FBEEF0 !important; color: #A41034 !important; }
.sd-link--shorts   .sd-link__icon { background: #cffafe !important; color: #0891b2 !important; }

.sd-link__lbl { color: #1a0f3e !important; font-size: .78rem !important; font-weight: 600 !important; }

/* ── 11. ORDERS CARD & TABLE ────────────────────────────── */
.sd-card {
    background: #fff !important;
    border: 1px solid rgba(164,16,52,.1) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(164,16,52,.07) !important;
    margin-bottom: 0 !important;
}
.sd-card__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(164,16,52,.08) !important;
    background: #faf8ff !important;
}
.sd-card__title { color: #1a0f3e !important; font-size: .9rem !important; font-weight: 700 !important; }
.sd-card__title i { color: #A41034 !important; margin-right: 6px; }
.sd-card__link {
    font-size: .78rem !important; font-weight: 600 !important;
    color: #A41034 !important; text-decoration: none !important;
    display: inline-flex; align-items: center; gap: 5px;
    transition: gap .2s;
}
.sd-card__link:hover { gap: 8px !important; color: #A41034 !important; }
.sd-table { width: 100%; border-collapse: collapse; }
.sd-table thead tr { background: #f5f2ff !important; }
.sd-table th {
    padding: 10px 16px !important;
    font-size: .67rem !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: .08em !important;
    color: #A41034 !important; text-align: left !important;
    border-bottom: 1px solid rgba(164,16,52,.1) !important;
    white-space: nowrap;
}
.sd-table tbody tr { border-bottom: 1px solid rgba(164,16,52,.06) !important; }
.sd-table tbody tr:last-child { border-bottom: none !important; }
.sd-table tbody tr:hover { background: #faf8ff !important; }
.sd-table td {
    padding: 12px 16px !important;
    font-size: .84rem !important;
    color: #1a0f3e !important;
    vertical-align: middle !important;
}
.sd-invoice { font-weight: 700; color: #A41034 !important; }
.sd-amount  { font-weight: 700; color: #1a0f3e !important; }
.sd-currency { font-size:1rem !important; color: #9b8ec4 !important; margin-left: 3px; }
.sd-gateway {
    display: inline-flex; align-items: center;
    background: #f5f2ff !important; color: #A41034 !important;
    font-size:1rem !important; font-weight: 600 !important;
    padding: 3px 10px !important; border-radius: 20px !important;
}
.sd-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem !important; font-weight: 700 !important;
    padding: 3px 10px !important; border-radius: 20px !important;
    white-space: nowrap;
}
.sd-badge--success { background: #d1fae5 !important; color: #065f46 !important; }
.sd-badge--info    { background: #dbeafe !important; color: #1e40af !important; }
.sd-badge--danger  { background: #ffe4e6 !important; color: #9f1239 !important; }
.sd-badge--warn    { background: #fef3c7 !important; color: #92400e !important; }
.sd-view-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size:1rem !important; font-weight: 700 !important;
    color: #A41034 !important; text-decoration: none !important;
    background: #FBEEF0 !important; padding: 4px 12px !important;
    border-radius: 8px !important; transition: background .15s !important;
}
.sd-view-btn:hover { background: #F6D9DF !important; color: #7A0D27 !important; text-decoration: none !important; }
.sd-empty { text-align: center; padding: 32px 20px !important; }
.sd-empty__icon { font-size: 2rem !important; color: #FFFFFF !important; margin-bottom: 10px; }
.sd-empty__text { font-size: .85rem !important; color: #9b8ec4 !important; }

/* ── 12. RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 991px) {
    .sd-frame__sidebar-col { padding: 16px 16px 0 !important; }
    .sd-frame__content-col { padding: 16px !important; border-left: none !important; border-top: 1px solid rgba(164,16,52,.1) !important; }
    .sd-hero { padding: 24px !important; }
    .sd-hero__name { font-size: 1.6rem !important; }
}

/* ════════════════════════════════════════════════════════════
   ID-FRAME — Instructor Dashboard Premium Frame
   Mirrors sd-frame but with the instructor gold/purple palette
════════════════════════════════════════════════════════════ */

/* ── 1. PAGE BACKGROUND ─────────────────────────────────── */
.instructor-pg {
    background: linear-gradient(160deg, #f0eefa 0%, #e8e4f5 100%) !important;
    padding-top: 28px !important;
    padding-bottom: 48px !important;
    margin-top: 0 !important;
}

/* ── 2. FRAME SHELL ─────────────────────────────────────── */
.id-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #f0eefa;
    border: 1.5px solid rgba(164,16,52,.22);
    box-shadow:
        0 0 0 4px rgba(164,16,52,.05),
        0 20px 60px rgba(164,16,52,.13),
        0 4px 12px rgba(0,0,0,.07);
}

/* Animated shimmer top line */
.id-frame::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        #f59e0b 10%, #FFFFFF 35%, #FFFFFF 50%,
        #FFFFFF 65%, #f59e0b 90%,
        transparent 100%);
    background-size: 200% auto;
    animation: idShimmer 4s linear infinite;
    flex-shrink: 0;
}
@keyframes idShimmer {
    0%   { background-position: -100% center; }
    100% { background-position:  300% center; }
}

/* Inner edge highlight */
.id-frame::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 24px;
    pointer-events: none;
    box-shadow:
        inset 0 1px 0 rgba(245,158,11,.1),
        inset 0 -1px 0 rgba(164,16,52,.08);
    z-index: 10;
}

/* ── 3. TOP BAR ─────────────────────────────────────────── */
.id-frame__top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 24px;
    background: #1C1514;
    border-bottom: 1px solid rgba(245,158,11,.15);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}
.id-frame__top-bar::before,
.id-frame__top-bar::after { display: none; }

.id-frame__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-sm);
    font-weight: 800;
    color: #fcd34d;
    letter-spacing: -.01em;
    flex-shrink: 0;
}
.id-frame__brand i {
    width: 20px; height: 20px;
    border-radius: 6px;
    background: linear-gradient(135deg,#92400e,#d97706);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fef3c7; font-size: 9px;
    box-shadow: 0 2px 8px rgba(217,119,6,.4);
}

.id-frame__label {
    flex: 1;
    text-align: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #A41034;
    letter-spacing: .12em;
    text-transform: uppercase;
    user-select: none;
}

.id-frame__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.28);
    letter-spacing: .06em;
    flex-shrink: 0;
}
.id-frame__status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 5px rgba(16,185,129,.8);
    animation: idPulse 2.5s ease-in-out infinite;
}
@keyframes idPulse {
    0%, 100% { opacity: 1;  box-shadow: 0 0 5px  rgba(16,185,129,.8); }
    50%       { opacity: .4; box-shadow: 0 0 10px rgba(16,185,129,.3); }
}

/* ── 4. LAYOUT COLUMNS ──────────────────────────────────── */
.id-frame__sidebar-col {
    padding: 20px 0 24px 20px !important;
}
.id-frame__content-col {
    padding: 24px !important;
    background: #faf8ff !important;
    border-left: 1px solid rgba(164,16,52,.1);
    border-radius: 0 0 24px 0;
}

/* ── 5. SIDEBAR REFRESH ─────────────────────────────────── */
.id-sidebar {
    margin-top: 0 !important;
    top: 80px !important;
    background: #1C1514 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(164,16,52,.2) !important;
    box-shadow:
        0 0 0 1px rgba(245,158,11,.08),
        0 8px 32px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(245,158,11,.06) !important;
}
.id-sb-name { color: #fff !important; }
.id-sb-role {
    background: rgba(245,158,11,.15) !important;
    border-color: rgba(245,158,11,.3) !important;
    color: #fcd34d !important;
}
.id-sb-rating { color: #fbbf24 !important; }
.id-sb-cta {
    background: linear-gradient(135deg,#A41034,#A41034) !important;
    box-shadow: 0 4px 16px rgba(164,16,52,.45) !important;
}
.id-sb-switch {
    background: rgba(245,158,11,.1) !important;
    border-color: rgba(245,158,11,.22) !important;
    color: rgba(253,211,77,.7) !important;
}
.id-sb-switch:hover { background: rgba(245,158,11,.18) !important; color: #fcd34d !important; }
.id-sb-section { color: rgba(245,158,11,.4) !important; }
.id-sb-section::after { background: rgba(245,158,11,.1) !important; }
.id-sb-divider { background: linear-gradient(90deg,transparent,rgba(245,158,11,.12),transparent) !important; }
.id-sb-link {
    border-radius: 12px !important;
    color: rgba(255,255,255,.5) !important;
    font-size: .83rem !important;
}
.id-sb-link:hover {
    background: linear-gradient(135deg, #A41034 0%, #3d0613 50%, #1a1a1a 100%) !important;
    color: rgba(255,255,255,.9) !important;
    padding-left: 14px !important;
}
.id-sb-link--active {
    background: #A41034 !important;
    color: #e9d5ff !important;
    border-left-color: #FFFFFF !important;
    font-weight: 700 !important;
}
.id-sb-link--active .id-sb-icon { background: rgba(255,255,255,.15) !important; color: #fff !important; }
.id-sb-logout { color: rgba(244,63,94,.65) !important; border-radius: 12px !important; }
.id-sb-logout:hover { background: rgba(244,63,94,.1) !important; color: #fda4af !important; }

/* ── 6. CONTENT TOKEN OVERRIDES ─────────────────────────── */
.id-frame__content-col {
    --card:       #ffffff;
    --card-alt:   #f5f2ff;
    --border:     rgba(164,16,52,.12);
    --text:       #1a0f3e;
    --text-sub:   #5b4d7a;
    --text-muted: #9b8ec4;
    --radius:     16px;
    --radius-sm:  10px;
}

/* ── 7. FORM INPUTS IN CONTENT AREA ─────────────────────── */
.id-frame__content-col .form-grp label,
.id-frame__content-col .cc-card .form-grp label,
.id-frame__content-col .ci-card label {
    color: #A41034 !important;
}
.id-frame__content-col .form-grp input[type="text"],
.id-frame__content-col .form-grp input[type="email"],
.id-frame__content-col .form-grp input[type="number"],
.id-frame__content-col .form-grp select,
.id-frame__content-col .form-grp textarea,
.id-frame__content-col .cc-card .form-grp input,
.id-frame__content-col .cc-card .form-grp select,
.id-frame__content-col .cc-card .form-grp textarea {
    background: #fff !important;
    color: #1a0f3e !important;
    border-color: #dcd7eb !important;
    text-align: left !important;
    direction: ltr !important;
}
.id-frame__content-col .form-grp input:focus,
.id-frame__content-col .form-grp select:focus,
.id-frame__content-col .form-grp textarea:focus {
    border-color: #A41034 !important;
    box-shadow: 0 0 0 3px rgba(164,16,52,.1) !important;
    background: #fff !important;
}

/* ── 8. PAGE TITLE HEADERS (ic-pg-h) ────────────────────── */
.id-frame__content-col .ic-pg-h {
    background: #A41034 !important;
    box-shadow: 0 0 0 1px rgba(164,16,52,.2),0 8px 32px rgba(164,16,52,.25) !important;
}

/* ── 9. CARDS (cc-card, ci-card) ────────────────────────── */
.id-frame__content-col .cc-card,
.id-frame__content-col .ci-card {
    background: #fff !important;
    border: 1px solid rgba(164,16,52,.1) !important;
    box-shadow: 0 2px 12px rgba(164,16,52,.07), 0 1px 3px rgba(0,0,0,.04) !important;
}
.id-frame__content-col .cc-card__body,
.id-frame__content-col .ci-card-body { background: #fff !important; }

/* ── 10. STEP NAV TABS ───────────────────────────────────── */
.id-frame__content-col .ic-pg .nav-tabs {
    background: #A41034 !important;
    border-color: rgba(164,16,52,.22) !important;
}

/* ── 11. OC-SCOPE (My Courses page) ─────────────────────── */
.id-frame__content-col .oc-hero { box-shadow: 0 0 0 1px rgba(164,16,52,.2),0 12px 40px rgba(164,16,52,.3) !important; }
.id-frame__content-col .oc-stat-card { background: #fff !important; box-shadow: 0 2px 12px rgba(164,16,52,.07) !important; }
.id-frame__content-col .oc-stat-card__val { color: #1a0f3e !important; }
.id-frame__content-col .oc-stat-card__lbl { color: #9b8ec4 !important; }
.id-frame__content-col .oc-course-card { background: #fff !important; border-color: rgba(164,16,52,.1) !important; box-shadow: 0 2px 12px rgba(164,16,52,.07) !important; }
.id-frame__content-col .oc-course-card__title a { color: #1a0f3e !important; }
.id-frame__content-col .oc-course-card__cat { background: #FBEEF0 !important; color: #A41034 !important; }
.id-frame__content-col .oc-card-stat { color: #6b7280 !important; }
.id-frame__content-col .oc-card-footer { border-top-color: #f3f4f6 !important; }
.id-frame__content-col .oc-toolbar__count { color: #6b7280 !important; }
.id-frame__content-col .oc-toolbar__count strong { color: #1a0f3e !important; }

/* ── 12. CC3 (Course Content Builder) ────────────────────── */
.id-frame__content-col .cc3-card { box-shadow: 0 4px 24px rgba(164,16,52,.09) !important; }
.id-frame__content-col .cc3-card-body { background: #faf9ff !important; }
.id-frame__content-col .cc3-chapter { background: #fff !important; }
.id-frame__content-col .cc3-chapter-head { background: #faf8ff !important; }
.id-frame__content-col .cc3-item { background: #fff !important; }
.id-frame__content-col .cc3-item-title { color: #1e1240 !important; }
.id-frame__content-col .cc3-item-type { color: #9ca3af !important; }
.id-frame__content-col .cc3-label { color: #A41034 !important; }
.id-frame__content-col .cc3-inline-form { background: linear-gradient(135deg,#FDF5F6,#FBEEF0) !important; }

/* ── 13. CC4 (Finish page) ───────────────────────────────── */
.id-frame__content-col .cc4-card { background: #fff !important; }
.id-frame__content-col .cc4-card-body { background: #faf9ff !important; }
.id-frame__content-col .cc4-textarea {
    background: #fff !important; color: #1e1240 !important; border-color: #dcd7eb !important;
}
.id-frame__content-col .cc4-status-card { background: #fff !important; border-color: #e5e7eb !important; }
.id-frame__content-col .cc4-label { color: #A41034 !important; }
.id-frame__content-col .cc4-label-hint { color: #9ca3af !important; background: #f3f4f6 !important; }

/* ── 14. RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 991px) {
    .id-frame { border-radius: 16px; }
    .id-frame__sidebar-col { padding: 14px 14px 0 14px !important; }
    .id-frame__content-col { padding: 14px !important; border-left: none !important; border-top: 1px solid rgba(164,16,52,.1); }
    .id-frame__label { display: none; }
}

/* ── Quiz Modal ── */
.ig-quiz-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: var(--tg-theme-primary, #A41034);
    border-radius: 8px 8px 0 0;
}
.ig-quiz-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
}
.ig-quiz-modal-title i {
    margin-right: 8px;
    opacity: 0.85;
}
.ig-quiz-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    color: #ffffff;
    font-size: var(--fs-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.ig-quiz-close-btn:hover {
    background: rgba(255,255,255,0.3);
}
.ig-quiz-modal-body {
    padding: 24px;
    background: #ffffff;
}
.ig-quiz-label {
    color: var(--tg-theme-primary, #A41034) !important;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 6px;
    display: block;
}
.ig-quiz-req {
    color: var(--tg-theme-primary, #A41034);
    font-style: normal;
}
.ig-quiz-hint {
    color: #888;
    font-weight: 400;
    font-size: 0.78rem;
}
.ig-quiz-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    background: #ffffff;
    border-top: 1px solid #e9e9e9;
    border-radius: 0 0 8px 8px;
}
.ig-quiz-cancel-btn {
    padding: 9px 22px;
    border: 1.5px solid #A41034;
    background: #ffffff;
    color: #A41034;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.ig-quiz-cancel-btn:hover {
    color: #FFFFFF;
    background: #A41034;
}
.ig-quiz-submit-btn {
    padding: 9px 24px;
    border: none;
    background: #A41034;
    color: #ffffff;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    
}
.ig-quiz-submit-btn:hover {
    color: #FFFFFF;
    opacity: 0.9;
}


/* ==========================================================================
   iGurus Premium Card — Redesigned
   ========================================================================== */

/* ── Card Shell ── */
.ig-premium-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #ede9f8;
    box-shadow: 0 1px 3px rgba(164,16,52, 0.04), 0 6px 24px rgba(164,16,52, 0.06);
    position: relative;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: "Plus Jakarta Sans", sans-serif;
}

.ig-premium-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 6px rgba(164,16,52, 0.05), 0 20px 48px rgba(164,16,52, 0.12);
}

/* ── Thumbnail ── */
.premium-media-box {
    position: relative;
    padding-top: 56.25%;
    width: 100%;
    overflow: hidden;
    background: #f3f0fb;
}

.premium-media-link {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.premium-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
    display: block;
}

.ig-premium-card:hover .premium-img {
    transform: scale(1.05);
}

/* Gradient overlay for legibility */
.premium-media-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(15, 5, 40, 0.45) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ── Badges ── */
.premium-tags {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.badge-free-glass {
    display: inline-block;
    background: #A41034;
    color: #ffffff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 4px 10px;
    border-radius: 6px;
   box-shadow: rgba(164, 16, 52, 0.45) 0px 4px 12px;
}

.badge-price-glass {
    display: inline-block;
    background: #ffffff;
    color: #A41034;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ── Duration Pill ── */
.premium-timestamp {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(10, 5, 30, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 4px 10px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: #ffffff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.02em;
}

/* ── Wishlist Button ── */
.floating-wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    color: #A41034;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    flex-shrink: 0;
    padding: 0 !important;
    line-height: 1;
}

.floating-wishlist-btn:hover {
    background: #ffffff;
    transform: scale(1.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.floating-wishlist-btn.is-active {
    color: #ef4444;
    background: #fff0f0;
}

/* ── Card Body ── */
.premium-content-area {
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* ── Category + Rating ── */
.premium-top-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.premium-cat-badge a {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #A41034;
    text-decoration: none;
   background: rgba(164, 16, 52, 0.08);
    padding: 4px 10px;
    border-radius: 5px;
    transition: background 0.2s, color 0.2s;
}

.premium-cat-badge a:hover {
   background: rgba(164, 16, 52, 0.08);
    color: #A41034;
}

.premium-star-rating {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #d97706;
    display: flex;
    align-items: center;
    gap: 4px;
}

.premium-star-rating i {
    font-size: var(--fs-xs);
}

/* ── Title (marquee on hover) ── */
.premium-title-marquee-window {
    height: 50px;
    overflow: hidden;
    position: relative;
    margin-bottom: 14px;
    display: block !important;
}

.marquee-scroll-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s ease;
}

.premium-scrolling-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-md) !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    color: #1e0b4b !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.5s ease-in-out;
}

.premium-scrolling-title a {
    color: #1e0b4b !important;
    text-decoration: none;
    transition: color 0.2s;
}

.premium-scrolling-title a:hover {
    color: #A41034 !important;
}

.ig-premium-card:hover .premium-scrolling-title {
    animation: smoothVerticalMarquee 6s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes smoothVerticalMarquee {
    0%, 15%   { transform: translateY(0); }
    45%, 60%  { transform: translateY(-24px); }
    90%, 100% { transform: translateY(0); }
}

/* ── Instructor Row ── */
.premium-instructor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f6ff;
    padding: 20px 22px;
    border-radius: 12px;
    margin-bottom: 14px;
    border: 1px solid #ede9f8;
    transition: background 0.2s;
}

.ig-premium-card:hover .premium-instructor-row {
    background: #f3effb;
}

.premium-avatar-link {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(164,16,52, 0.15);
    transition: box-shadow 0.2s;
}

.premium-avatar-link:hover {
    box-shadow: 0 4px 14px rgba(164,16,52, 0.25);
}

.premium-avatar-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50% !important;
    display: block;
}

.premium-instructor-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.instructor-label {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 9px !important;
    color: #1C1514;
    text-transform: uppercase;
    font-weight: 700 !important;
    letter-spacing: 0.07em;
    line-height: var(--lh-tight) !important;
}

.instructor-name-link {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-sm) !important;
    color: #A41034;
    font-weight: 600 !important;
    text-decoration: none;
    line-height: var(--lh-snug) !important;
    transition: color 0.2s;
}

.instructor-name-link:hover {
    color: #A41034;
    text-decoration: none;
}

/* ── Stats Ribbon ── */
.premium-stats-ribbon {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid #ede9f8;
    padding-top: 12px;
    margin-bottom: 16px;
}

.stat-node {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 11.5px;
    color: #64748b;
    font-weight: 500;
}

.stat-node i {
    font-size: var(--fs-xs);
    color: #FFFFFF;
}

/* ── CTA Button ── */
.premium-footer-action {
    margin-top: auto;
}

.premium-btn-theme {
    width: 100%;
    background: linear-gradient(135deg, #A41034 0%, #7A0D27 100%) !important;
    color: #ffffff !important;
    border: none;
    padding: 11px 16px;
    border-radius: 10px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    box-shadow: 0 4px 14px rgba(164,16,52, 0.25);
    line-height: 1 !important;
}

.premium-btn-theme:hover {
    background: linear-gradient(135deg, #1e054a 0%, #3b0764 100%) !important;
    box-shadow: 0 8px 22px rgba(164,16,52, 0.38);
    transform: translateY(-1px);
    color: #ffffff !important;
    text-decoration: none !important;
}

.premium-btn-theme i {
    font-size: var(--fs-xs);
    transition: transform 0.2s ease;
}

.premium-btn-theme:hover i {
    transform: translateX(3px);
}

/* ── Responsive ── */
@media (max-width: 576px) {
    .premium-content-area {
        padding: 16px 16px 14px;
    }
    .premium-scrolling-title {
        font-size: var(--fs-base);
    }
    .premium-btn-theme {
        font-size: var(--fs-sm);
        padding: 10px 14px;
    }
}

/* ================================================================
   LESSON / COURSE CARD  —  additions for ig-premium-card
   PASTE AT THE BOTTOM of page-components.css
   These rules add only what is missing:
     1. Outlined CTA button  (.premium-btn-outline)
     2. Avatar initial fallback  (.premium-avatar-initial)
   Everything else (card shell, thumbnail, badges, instructor row,
   stats ribbon, filled button) already exists above.
================================================================ */

/* ── Outlined "View Course / Resume Learning" button ── */
.premium-btn-outline {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1.5px solid #e0daf0;
    background: #ffffff;
    color: #1e0b4b;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s,
                box-shadow 0.2s, transform 0.15s;
    line-height: 1 !important;
    box-sizing: border-box;
}

.premium-btn-outline:hover {
    border-color: #A41034;
    background: #f8f5ff;
    color: #A41034 !important;
    box-shadow: 0 4px 16px rgba(164,16,52, 0.10);
    transform: translateY(-1px);
    text-decoration: none !important;
}

.premium-btn-outline i {
    font-size: var(--fs-xs);
    transition: transform 0.2s ease;
}

.premium-btn-outline:hover i {
    transform: translateX(3px);
}

/* ── Avatar initial fallback (when no image) ── */
.premium-avatar-initial {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #A41034, #A41034);
    color: #ffffff !important;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-base);
    font-weight: 800;
    text-decoration: none;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(164,16,52, 0.20);
    transition: box-shadow 0.2s;
}

.premium-avatar-initial:hover {
    box-shadow: 0 4px 14px rgba(164,16,52, 0.32);
}

/* ================================================================
   LESSON CARD — EQUAL HEIGHT + VERIFIED BADGE FIXES
   PASTE AT THE VERY BOTTOM of page-components.css
   These rules override only what needs changing.
================================================================ */

/* ── 1. Equal card height in Bootstrap row ──────────────────
   The Bootstrap col already has d-flex align-items-stretch,
   so the card just needs height:100% to fill it.          */
.ig-premium-card {
    height: 100%;
}

/* ── 2. Card body stretches to fill remaining space ─────── */
.premium-content-area {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* ── 3. Fixed-height top-meta row so long category names
        never push the rating onto a second line           */
.premium-top-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;        /* locks this row to a stable height */
    margin-bottom: 10px;
}

/* Category badge — truncate at 120px so it never wraps */
.premium-cat-badge {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.premium-cat-badge a {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--lh-normal);
}

/* Rating always on the same line, never shrinks */
.premium-star-rating {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── 4. Fixed title area — 2 lines always, no more, no less */
.premium-title-marquee-window {
    height: 52px !important;   /* exactly 2 lines at 16px/1.45 */
    overflow: hidden;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.premium-scrolling-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 100%;
}

/* Disable marquee animation when clamped — let clamp handle overflow */
.ig-premium-card:hover .premium-scrolling-title {
    animation: none;
}

/* ── 5. Instructor row — fixed height so it never grows ──── */
.premium-instructor-row {
    flex-shrink: 0;
}

/* ── 6. Stats ribbon — fixed height ─────────────────────── */
.premium-stats-ribbon {
    flex-shrink: 0;
}

/* ── 7. Footer always pinned to bottom ──────────────────── */
.premium-footer-action {
    margin-top: auto;
    padding-top: 4px;
    flex-shrink: 0;
}

/* ================================================================
   VERIFIED BADGE  — replaces the plain "Verified" text+circle
   Usage in blade: swap the stat-node for .stat-verified-badge
================================================================ */
.stat-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #065f46;
    border: 1px solid #6ee7b7;
    border-radius: 20px;
    padding: 3px 9px 3px 5px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.stat-verified-badge .vb-icon {
    width: 16px;
    height: 16px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-verified-badge .vb-icon i {
    font-size: 8px;
    color: #ffffff;
    line-height: 1;
}

/* ── Outlined CTA button (if not already in your file) ───── */
.premium-btn-outline {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1.5px solid #e0daf0;
    background: #ffffff;
    color: #1e0b4b;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s,
                box-shadow 0.2s, transform 0.15s;
    line-height: 1 !important;
    box-sizing: border-box;
}

.premium-btn-outline:hover {
    border-color: #A41034;
    background: #f8f5ff;
    color: #A41034 !important;
    box-shadow: 0 4px 16px rgba(164,16,52, 0.10);
    transform: translateY(-1px);
    text-decoration: none !important;
}

.premium-btn-outline i {
    font-size: var(--fs-xs);
    transition: transform 0.2s ease;
}

.premium-btn-outline:hover i {
    transform: translateX(3px);
}

/* ── Avatar initial fallback ─────────────────────────────── */
.premium-avatar-initial {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #A41034, #A41034);
    color: #ffffff !important;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-base);
    font-weight: 800;
    text-decoration: none;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(164,16,52, 0.20);
    transition: box-shadow 0.2s;
}

.premium-avatar-initial:hover {
    box-shadow: 0 4px 14px rgba(164,16,52, 0.32);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 576px) {
    .premium-title-marquee-window {
        height: 48px !important;
    }
    .premium-top-meta {
        min-height: 34px;
    }
}

/* ================================================================
   LESSON CARD — CLEAN REDESIGN  (final override, highest priority)
   Fixes: white body, flexible title, refined instructor row.
================================================================ */

/* ── Card shell ── */
.ig-premium-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #ebe5ff !important;
    box-shadow: 0 2px 8px rgba(164,16,52,.06), 0 8px 28px rgba(164,16,52,.07) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s !important;
}
.ig-premium-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 4px 12px rgba(164,16,52,.08), 0 24px 48px rgba(164,16,52,.13) !important;
    border-color: rgba(164,16,52,.25) !important;
}

/* Top accent line on hover */
.ig-premium-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #A41034, #A41034, #60a5fa);
    opacity: 0; transition: opacity .3s; z-index: 3;
}
.ig-premium-card:hover::before { opacity: 1; }

/* ── Thumbnail ── */
.premium-media-box {
    position: relative !important;
    padding-top: 56.25% !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #FBEEF0 !important;
    flex-shrink: 0;
}
.premium-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    transition: transform .5s cubic-bezier(.25,1,.5,1) !important;
}
.ig-premium-card:hover .premium-img { transform: scale(1.05) !important; }

/* ── Card body — explicit white ── */
.premium-content-area {
    background: #ffffff !important;
    padding: 16px 18px 14px !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ── Category + Rating row ── */
.premium-top-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    min-height: unset !important;
}
.premium-cat-badge { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.premium-cat-badge a {
    display: inline-block;
    font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: .06em;
    color: #A41034 !important; background: rgba(164, 16, 52, .16) !important;
    padding: 3px 9px !important; border-radius: 5px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; text-decoration: none;
    transition: background .2s, color .2s;
}
.premium-cat-badge a:hover {background: rgba(164, 16, 52, .16) !important;color: #A41034 !important; }
.premium-star-rating {
    flex-shrink: 0; white-space: nowrap;
    display: inline-flex !important; align-items: center !important; gap: 3px !important;
    font-size: var(--fs-xs) !important; font-weight: 700 !important; color: #d97706 !important;
}
.premium-star-rating i { font-size: 10px; color: #f59e0b !important; }

/* ── Title — flexible height, 2-line clamp ── */
.premium-title-marquee-window {
    height: auto !important;
    min-height: unset !important;
    overflow: visible !important;
    margin-bottom: 12px !important;
    flex-shrink: 0;
}
.marquee-scroll-container { width: 100%; }
.premium-scrolling-title {
    font-size: var(--fs-sm) !important; font-weight: 700 !important;
    line-height: 1.45 !important; color: #1a0b3e !important;
    margin: 0 !important; padding: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    animation: none !important;
}
.ig-premium-card:hover .premium-scrolling-title { animation: none !important; }
.premium-scrolling-title a { color: inherit !important; text-decoration: none; }
.premium-scrolling-title a:hover { color: #A41034 !important; }

/* ── Instructor row — clean, no inner box ── */
.premium-instructor-row {
    display: flex !important; align-items: center !important; gap: 8px !important;
    background: transparent !important;
    border: none !important; border-radius: 0 !important;
    padding: 0 0 20px !important;
    margin-bottom: 0 !important;
     
    flex-shrink: 0;
}
.ig-premium-card:hover .premium-instructor-row { background: transparent !important; }

.premium-avatar-link,
.premium-avatar-initial {
    width: 28px !important; height: 28px !important;
    border-radius: 50% !important; flex-shrink: 0;
    overflow: hidden; border: 2px solid #FBEEF0 !important;
    box-shadow: 0 1px 4px rgba(164,16,52,.15);
    font-size: var(--fs-xs) !important; font-weight: 800;
    text-decoration: none;
}
.premium-avatar-initial {
    background: linear-gradient(135deg,#A41034,#A41034) !important;
    color: #fff !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.premium-instructor-info { display: flex; flex-direction: column; gap: 0; }
.instructor-label { font-size: 9px !important; color: #1C1514 !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; line-height: var(--lh-tight) !important; }
.instructor-name-link { font-size: 12.5px !important; color: #A41034 !important; font-weight: 600 !important; text-decoration: none; line-height: var(--lh-snug) !important; }
.instructor-name-link:hover { color: #A41034 !important; }

/* ── Stats ribbon ── */
.premium-stats-ribbon {
    display: flex !important; align-items: center !important; gap: 10px !important;
    border-top: none !important;
    padding-top: 10px !important; margin-bottom: 12px !important;
    flex-shrink: 0;
}
.stat-node {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-xs) !important; color: #9ca3af !important; font-weight: 500 !important;
}
.stat-node i { font-size: 10px !important; color: #FFFFFF !important; }

/* ── Footer ── */
.premium-footer-action {
    margin-top: auto !important; padding-top: 10px !important; flex-shrink: 0;
}

/* ── CTA buttons ── */
.premium-btn-outline {
    width: 100% !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    padding: 10px 16px !important; border-radius: 10px !important;
    border: 1.5px solid #e0d9f5 !important;
    background: #ffffff !important; color: #A41034 !important;
    font-size: var(--fs-sm) !important; font-weight: 600 !important;
    text-decoration: none !important; cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s, transform .15s !important;
    box-sizing: border-box;
}
.premium-btn-outline:hover {
    border-color: #A41034 !important; background: #f5f1ff !important;
    color: #A41034 !important; text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(164,16,52,.12) !important; transform: translateY(-1px) !important;
}
.premium-btn-outline i { font-size: var(--fs-xs); transition: transform .2s; }
.premium-btn-outline:hover i { transform: translateX(3px); }

.premium-btn-theme {
    width: 100% !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    padding: 10px 16px !important; border-radius: 10px !important; border: none !important;
    background: linear-gradient(135deg,#A41034 0%,#7A0D27 100%) !important;
    color: #fff !important; font-size: var(--fs-sm) !important; font-weight: 600 !important;
    cursor: pointer; text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(164,16,52,.25) !important;
    transition: box-shadow .2s, transform .15s !important;
}
.premium-btn-theme:hover {
    box-shadow: 0 8px 22px rgba(164,16,52,.38) !important; transform: translateY(-1px) !important;
    color: #fff !important; text-decoration: none !important;
}

/* ── Responsive ── */
@media (max-width: 576px) {
    .premium-content-area { padding: 14px 14px 12px !important; }
    .premium-title-marquee-window { height: auto !important; }
}



/* iGURUS LEARNING PLAYER - REDESIGN (3-color system: #A41034 / #3B2C2F / #FFFFFF only) */
.wsus__course_video{
  --bg:rgba(59,44,47,.03);--card:#FFFFFF;--ink:#3B2C2F;--ink-2:rgba(59,44,47,.85);--muted:rgba(59,44,47,.6);--faint:rgba(59,44,47,.4);
  --line:rgba(59,44,47,.14);--line-2:rgba(59,44,47,.07);--accent:#A41034;--accent-hover:#7C0C28;--accent-soft:rgba(164,16,52,.10);--accent-tint:rgba(164,16,52,.05);
  --gold:var(--accent);--gold-soft:var(--accent-soft);--chrome:#3B2C2F;--r-sm:8px;--r:12px;--r-lg:16px;
  --shadow-lg:0 18px 48px rgba(59,44,47,.16);--header-h:66px;--sidebar-w:380px;
  --font-ui:"Hanken Grotesk",system-ui,-apple-system,sans-serif;--font-display:"Newsreader",Georgia,serif;
  display:flex!important;align-items:flex-start!important;padding:0!important;padding-top:var(--header-h)!important;
  min-height:100vh!important;background:var(--bg)!important;position:relative;color:var(--ink)!important;font-family:var(--font-ui)!important;
  }
.wsus__course_video *,.wsus__course_video *::before,.wsus__course_video *::after{box-sizing:border-box;}
.wsus__course_video a{text-decoration:none;}
.wsus__course_video img{max-width:100%;}
.wsus__course_header{position:fixed!important;top:0;left:0;right:0;z-index:1000;height:var(--header-h)!important;background:rgba(255,255,255,.88)!important;backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:16px!important;padding:0 22px!important;flex-wrap:nowrap!important;}
.wsus__course_header>a:first-child{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px!important;border-radius:999px!important;background:var(--bg)!important;border:1px solid var(--line)!important;font-weight:600;font-size: var(--fs-sm)!important;color:var(--ink-2)!important;flex-shrink:0;transition:.18s;}
.wsus__course_header>a:first-child:hover{background:rgba(59,44,47,.08)!important;color:var(--ink)!important;}
.wsus__course_header>a:first-child i{font-size: var(--fs-xs);}
.wsus__course_header .current_lesson_title{flex:1;min-width:0;margin:0!important;padding:0!important;font-family:var(--font-display)!important;font-size: var(--fs-lg)!important;font-weight:600!important;color:var(--ink)!important;line-height: var(--lh-tight)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:600px;}
.wsus__course_header .tgmenu__action{background:none!important;box-shadow:none!important;flex-shrink:0;}
.wsus__course_header .tgmenu__action ul.list-wrap{display:flex!important;align-items:center!important;gap:10px!important;list-style:none!important;margin:0!important;padding:0!important;flex-wrap:nowrap!important;}
.wsus__course_header .tgmenu__action>ul.list-wrap>li{padding:0!important;margin:0!important;position:relative;}
.leave_ratings{display:inline-flex!important;align-items:center!important;gap:7px!important;height:40px;padding:0 15px!important;border-radius:999px!important;background:transparent!important;border:1.5px solid var(--accent-hover)!important;color:var(--accent-hover)!important;font-weight:700;font-size: var(--fs-sm)!important;cursor:pointer;margin:0;transition:.18s;}
.leave_ratings:hover{background:var(--accent-hover)!important;color:#fff!important;}
.progress_data{display:inline-flex!important;align-items:center!important;height:40px;padding:0 16px!important;border-radius:999px!important;background:var(--accent-tint)!important;border:1px solid var(--accent-soft)!important;font-size: var(--fs-sm)!important;font-weight:600;color:var(--accent)!important;white-space:nowrap;margin:0;}
.wsus__course_header .cart-count{display:inline-flex!important;align-items:center!important;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--bg)!important;border:1px solid var(--line)!important;color:var(--ink-2)!important;font-size: var(--fs-base)!important;position:relative;transition:.18s;}
.wsus__course_header .cart-count:hover{background:rgba(59,44,47,.08)!important;color:var(--ink)!important;}
.wsus__course_header .mini-cart-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;background:var(--accent);color:#fff;border-radius:999px;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}
.user_icon>a{display:inline-flex!important;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px; border:1px solid var(--line)!important;color:var(--ink-2)!important;font-size: var(--fs-base);transition:.18s;}
.user_icon>a:hover{ color:var(--ink)!important;}
.menu_user_list{position:absolute;right:0;top:48px;min-width:248px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:8px;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:1200;}
.user_icon:hover .menu_user_list,.user_icon.active .menu_user_list{opacity:1;visibility:visible;transform:translateY(0);}
.menu_user_list>li{padding:0;}
.menu_user_list>li>a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size: var(--fs-sm);font-weight:500;color:var(--ink-2);}
.menu_user_list>li>a:hover{background:var(--accent-tint);color:var(--accent);}
.menu_user_list>li>a i{width:16px;text-align:center;color:var(--faint);}
.menu_user_list .borderli{border-top:1px solid var(--line);margin:6px 0;}
.menu_user_list .inputcheckbox{display:flex;align-items:center;gap:9px;padding:8px 12px;font-size: var(--fs-sm);color:var(--ink-2);}
.menu_user_list .extra_info{padding:8px 12px;font-size: var(--fs-xs);color:var(--faint);}
.menu_user_list .extra_instructor__social .list-wrap{display:flex!important;gap:7px!important;margin:8px 0 0!important;padding:0!important;}
.menu_user_list .extra_instructor__social .list-wrap a{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent);font-size: var(--fs-xs);}
.menu_user_list .extra_instructor__social .list-wrap a:hover{background:var(--accent);color:#fff;}
.wsus__course_header_btn{display:none!important;}
.wsus__course_video_player{flex:1!important;min-width:0!important;width:auto!important;padding:0!important;background:var(--bg)!important;}
.video-payer{background:var(--chrome)!important;position:relative;width:100%!important;aspect-ratio:16/9;max-height:min(70vh,720px);min-height:0;display:grid;place-items:center;overflow:hidden;border-radius:16px!important;box-shadow:0 12px 32px rgba(59,44,47,.22)!important;margin:16px 32px 0!important;width:calc(100% - 64px)!important;}
.video-payer .video-js,.video-payer video{border-radius:16px!important;}
.vjs-default-skin .vjs-big-play-button{width:74px!important;height:74px!important;line-height:74px!important;border-radius:50%!important;border:none!important;background:var(--accent)!important;top:50%!important;left:50%!important;margin-top:-37px!important;margin-left:-37px!important;box-shadow:0 0 0 10px rgba(164,16,52,.18),0 8px 24px rgba(59,44,47,.35)!important;transition:transform .18s,box-shadow .18s!important;}
.vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:before{font-size:34px!important;line-height:74px!important;color:#fff!important;}
.vjs-default-skin:hover .vjs-big-play-button,.video-js:hover .vjs-big-play-button{background:var(--accent-hover)!important;transform:scale(1.06)!important;box-shadow:0 0 0 12px rgba(164,16,52,.22),0 10px 28px rgba(59,44,47,.4)!important;}
.vjs-default-skin .vjs-control-bar{background:rgba(59,44,47,.85)!important;}
.vjs-default-skin .vjs-play-progress,.vjs-default-skin .vjs-volume-level{background:var(--accent)!important;}
.video-js{height:100%!important;width:100%!important;}
.lp-metabar{background:var(--card);padding:20px 32px 4px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.lp-metabar .mb-left{flex:1;min-width:220px;}
.lp-metabar .mb-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:7px;}
.lp-metabar .current_lesson_title{font-family:var(--font-display)!important;font-weight:600!important;font-size:25px!important;line-height: var(--lh-tight)!important;margin:0!important;color:var(--ink)!important;max-width:none;white-space:normal;}

/* YouTube-style channel / action row, directly under the lesson title */
.ig-yt-row{background:var(--card);border-bottom:1px solid var(--line);padding:14px 32px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ig-yt-row-left{display:flex;align-items:center;gap:12px;min-width:0;}
.ig-yt-avatar{flex-shrink:0;width:44px;height:44px;border-radius:50%;overflow:hidden;display:block;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--accent-soft);}
.ig-yt-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.ig-yt-channel-meta{display:flex;flex-direction:column;min-width:0;}
.ig-yt-channel-name{font-size: var(--fs-sm);font-weight:700;color:var(--ink);text-decoration:none;line-height: var(--lh-snug);}
.ig-yt-channel-name:hover{color:var(--accent);}
.ig-yt-channel-sub{font-size:11.5px;color:var(--muted);}
.ig-yt-row-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ig-yt-action{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-weight:600;font-size: var(--fs-sm);cursor:pointer;transition:.18s;}
.ig-yt-action:hover{border-color:rgba(164,16,52,.35);color:#7C0C28;background:rgba(164,16,52,.06);}
.ig-yt-action.progress_data{cursor:default;background:var(--bg);}
.ig-yt-action.progress_data:hover{border-color:var(--line);color:var(--ink-2);background:var(--bg);}
.video_tabs_area{background:var(--card)!important;margin:0!important;padding:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;}
.video_tabs_area .nav-pills{display:flex!important;gap:4px!important;list-style:none;margin:0!important;padding:0 24px!important;border-bottom:1px solid var(--line)!important;justify-content:flex-start!important;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
.video_tabs_area .nav-pills::-webkit-scrollbar{display:none;}
.video_tabs_area .nav-pills .nav-link{border:none!important;background:none!important;border-radius:0!important;font-weight:600!important;font-size: var(--fs-sm)!important;color:var(--muted)!important;padding:16px 14px!important;border-bottom:2px solid transparent!important;margin-bottom:-1px!important;white-space:nowrap;transition:.18s!important;}
.video_tabs_area .nav-pills .nav-link:hover{color:var(--ink)!important;background:none!important;}
.video_tabs_area .nav-pills .nav-link.active{color:var(--accent)!important;border-bottom-color:var(--accent)!important;background:none!important;}
.video_tabs_area .tab-content{padding:0!important;}
.video_about{padding:34px 32px 56px!important;max-width:920px;color:var(--ink-2)!important;}
.video_about h1{font-family:var(--font-display)!important;font-weight:600!important;font-size: var(--fs-xl)!important;color:var(--ink)!important;margin:0 0 22px!important;padding-bottom:14px!important;border-bottom:1px solid var(--line)!important;}
.course-learning-detail .title{font-family:var(--font-display)!important;font-weight:600!important;font-size:27px!important;line-height:1.22!important;color:var(--ink)!important;margin:0 0 26px!important;}
.instructor__item{display:flex!important;align-items:center!important;gap:16px!important;padding:18px!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;background:linear-gradient(180deg,#FFFFFF,#FFFFFF)!important;margin-bottom:22px!important;}
.instructor__thumb{flex-shrink:0;width:auto;}
.instructor__thumb img{width:62px!important;height:62px!important;border-radius:50%!important;object-fit:cover!important;border:2px solid #fff!important;box-shadow:0 0 0 2px var(--accent-soft);}
.instructor__content .title{font-family:var(--font-ui)!important;font-size: var(--fs-md)!important;font-weight:700!important;color:var(--ink)!important;margin:0 0 2px!important;}
.instructor__content .title a{color:var(--accent)!important;}
.instructor__content .title a:hover{text-decoration:underline;}
.instructor__content .designation{font-size: var(--fs-sm);color:var(--muted);font-weight:500;}
.instructor__social .list-wrap{display:flex!important;gap:8px!important;list-style:none;margin:9px 0 0!important;padding:0!important;}
.instructor__social .list-wrap a{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent);font-size:12.5px;transition:.18s;}
.instructor__social .list-wrap a:hover{background:var(--accent);color:#fff;}
.aboutcourse{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:12px!important;margin-bottom:22px!important;}
.aboutcourse .about_course_data{display:block!important;padding:18px!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;background:var(--card)!important;text-align:left!important;min-width:0!important;}
.aboutcourse .about_course_data .title_data{font-family:var(--font-display)!important;font-size: var(--fs-2xl)!important;font-weight:600!important;color:var(--ink)!important;line-height:1!important;display:flex;align-items:center;gap:6px;margin:0!important;}
.aboutcourse .about_course_data .title_data .fa-star{color:var(--gold)!important;font-size: var(--fs-lg)!important;}
.aboutcourse .about_course_data>div:last-child{font-size: var(--fs-xs)!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)!important;margin-top:8px;}
.aboutcourse2 .courses__details-meta .list-wrap{display:flex!important;flex-wrap:wrap!important;gap:8px!important;list-style:none;margin:0 0 24px!important;padding:0!important;}
.aboutcourse2 .courses__details-meta li{display:inline-flex!important;align-items:center!important;gap:7px!important;font-size:12.5px!important;font-weight:600;color:var(--ink-2)!important;background:var(--bg)!important;border:1px solid var(--line)!important;border-radius:999px!important;padding:7px 14px!important;}
.aboutcourse2 .courses__details-meta li i{color:var(--accent);font-size: var(--fs-xs);}
.aboutcourse2 .courses__details-meta li img{width:14px;height:14px;opacity:.7;}
.aboutcourse3 .about_course_data{width:100%!important;background:var(--accent-tint)!important;border:1px solid var(--accent-soft)!important;border-radius:var(--r-lg)!important;padding:22px!important;display:block!important;text-align:left!important;}
.aboutcourse3 h1{font-family:var(--font-ui)!important;font-size: var(--fs-xs)!important;font-weight:800!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--accent)!important;margin:0 0 12px!important;padding:0!important;border:none!important;}
.instructor_descriotion_learn p{font-size: var(--fs-sm)!important;color:var(--ink-2)!important;line-height:1.75!important;margin:0!important;}
.about-course{font-size: var(--fs-base)!important;color:var(--ink-2)!important;line-height: var(--lh-relaxed)!important;}
.about-lecture{font-size: var(--fs-sm);color:var(--muted);padding:8px 0;}
.video_qna{padding:30px 32px!important;}
.video_qna_top{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:22px!important;flex-wrap:wrap;}
.video_qna_top form input[type=text],.video_qna_top .select_box select{height:42px;padding:0 14px!important;border:1.5px solid var(--line)!important;border-radius:10px!important;font-size: var(--fs-sm)!important;color:var(--ink)!important;background:var(--card)!important;outline:none;transition:border-color .2s;min-width:220px;}
.video_qna_top form input[type=text]:focus{border-color:var(--accent)!important;}
.video_qna_top form button[type=submit]{height:42px;padding:0 18px!important;border-radius:10px!important;background:var(--accent)!important;color:#fff!important;border:none!important;font-size: var(--fs-sm)!important;font-weight:600;cursor:pointer;transition:.2s;}
.video_qna_top form button[type=submit]:hover{background:var(--accent-hover)!important;}
.video_qna_top ul{display:flex!important;gap:10px!important;list-style:none;padding:0!important;margin:0!important;flex-wrap:wrap;}
.video_qna_list .d-flex h3{font-family:var(--font-display)!important;font-size: var(--fs-lg)!important;font-weight:600!important;color:var(--ink)!important;margin:0!important;}
.video_qna_list .d-flex{margin-bottom:16px!important;}
.load-more-btn{background:var(--accent-tint)!important;color:var(--accent)!important;border:1.5px solid var(--accent-soft)!important;border-radius:10px!important;font-size: var(--fs-sm)!important;font-weight:700!important;padding:10px 22px!important;transition:.18s!important;}
.load-more-btn:hover{background:var(--accent-soft)!important;border-color:var(--accent)!important;}
.video_review{padding:0 32px 32px!important;}
.video_review h2,.video_review_imput h2{font-family:var(--font-display)!important;font-size: var(--fs-xl)!important;font-weight:600!important;color:var(--ink)!important;margin:0 0 16px!important;padding-bottom:12px!important;border-bottom:1px solid var(--line)!important;}
.video_review_imput{padding:26px 32px 0!important;}
.video_review_imput h2{border:none!important;padding-bottom:0!important;font-size: var(--fs-md)!important;}
.wsus__course_video .form-grp{margin-bottom:14px!important;}
.wsus__course_video .form-grp label{font-size:12.5px!important;font-weight:600!important;color:var(--ink-2)!important;margin-bottom:6px!important;display:block;}
.wsus__course_video .form-grp input[type=text],.wsus__course_video .form-grp textarea,.wsus__course_video .form-grp .form-control,.wsus__course_video .form-grp .form-select{width:100%!important;padding:11px 14px!important;border:1.5px solid var(--line)!important;border-radius:10px!important;font-size: var(--fs-sm)!important;color: #000 !important;background:var(--card)!important;outline:none!important;transition:border-color .2s!important;}
.wsus__course_video .form-grp input[type=text]:focus,.wsus__course_video .form-grp textarea:focus,.wsus__course_video .form-grp .form-control:focus,.wsus__course_video .form-grp .form-select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)!important;}
.wsus__course_video .form-grp textarea{min-height:108px!important;resize:vertical!important;}
.stardata .star,.stardata .star_modal{font-size:2.2rem!important;color:rgba(59,44,47,.18)!important;cursor:pointer!important;transition:color .12s!important;line-height:1!important;}
.stardata .star.one,.stardata .star.two,.stardata .star.three,.stardata .star.four,.stardata .star.five,.stardata .star_modal.one,.stardata .star_modal.two,.stardata .star_modal.three,.stardata .star_modal.four,.stardata .star_modal.five{color:var(--gold)!important;}
.wsus__course_video .btn.arrow-btn,.video_qna_list .btn.btn-primary,.wsus__course_video .btn.btn-primary{display:inline-flex!important;align-items:center;gap:7px;background:var(--accent)!important;color:#fff!important;border:none!important;border-radius:10px!important;padding:11px 22px!important;font-size: var(--fs-sm)!important;font-weight:700!important;text-decoration:none;cursor:pointer;transition:.18s!important;}
.wsus__course_video .btn.arrow-btn:hover,.video_qna_list .btn.btn-primary:hover,.wsus__course_video .btn.btn-primary:hover{background:var(--accent-hover)!important;color:#fff!important;opacity:1!important;}
.wsus__course_video .btn.btn-secondary{background:var(--bg)!important;color:var(--ink-2)!important;border:1px solid var(--line)!important;border-radius:10px!important;font-size: var(--fs-sm)!important;font-weight:600!important;padding:11px 20px!important;}
.announcement_lesson{padding:30px 32px!important;}
.wsus__course_sidebar{width:var(--sidebar-w)!important;flex-shrink:0!important;align-self:stretch;background:var(--card)!important;border-left:1px solid var(--line)!important;position:sticky!important;top:var(--header-h)!important;right:auto!important;height:calc(100vh - var(--header-h))!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;padding-top:0!important;box-shadow:none!important;}
.wsus__course_sidebar_btn{display:none!important;}
.video_heading{flex-shrink:0!important;display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;position:static!important;padding:18px 22px!important;margin:0!important;border-bottom:1px solid var(--line)!important;font-family:var(--font-ui)!important;font-size: var(--fs-sm)!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--ink)!important;background:var(--card)!important;}
.video_heading .add_to_cart_full_course{display:inline-flex!important;align-items:center;gap:6px;height:30px;padding:0 12px!important;border-radius:8px!important;background:var(--accent)!important;color:#fff!important;font-size: var(--fs-xs)!important;font-weight:700;letter-spacing:.02em;text-transform:none;border:none!important;margin-left:auto;}
.video_heading .add_to_cart_full_course:hover{background:var(--accent-hover)!important;}
.ig-lp-progress{flex-shrink:0!important;padding:18px 22px!important;border-bottom:1px solid var(--line)!important;background:linear-gradient(180deg,#FFFFFF,#fff)!important;}
.ig-lp-prog-top{display:flex;align-items:center;gap:14px;}
.ig-lp-ring{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p,0)*1%),rgba(164,16,52,.12) 0);}
.ig-lp-ring span{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size: var(--fs-xs);font-weight:800;color:var(--accent);}
.ig-lp-prog-meta{min-width:0;}
.ig-lp-prog-label{font-size: var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;}
.ig-lp-prog-track{height:6px;background:rgba(164,16,52,.12);border-radius:4px;overflow:hidden;}
.ig-lp-prog-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .4s;}
.wsus__course_sidebar .accordion{flex:1!important;overflow-y:auto!important;overscroll-behavior:contain;}
.wsus__course_sidebar .accordion::-webkit-scrollbar{width:8px;}
.wsus__course_sidebar .accordion::-webkit-scrollbar-thumb{background:rgba(59,44,47,.18);border-radius:8px;border:2px solid #fff;}
.wsus__course_sidebar .accordion-item{background:var(--card)!important;border:none!important;border-bottom:1px solid var(--line)!important;}
.wsus__course_sidebar .accordion-button,.wsus__course_sidebar .accordion-item button{width:100%;text-align:left;border:none!important;background:#FFFFFF!important;display:flex!important;align-items:center;gap:12px;padding:15px 22px!important;color:var(--ink)!important;transition:.15s;box-shadow:none!important;}
.wsus__course_sidebar .accordion-button:hover{background:var(--line-2)!important;}
.wsus__course_sidebar .accordion-button b{font-size: var(--fs-sm)!important;font-weight:700!important;color:var(--ink)!important;line-height: var(--lh-snug);}
.wsus__course_sidebar .accordion-button>span:last-of-type{margin-left:auto;}
.wsus__course_sidebar .accordion-button:not(.collapsed){background:var(--card)!important;color:var(--accent)!important;box-shadow:none!important;}
.wsus__course_sidebar .accordion-button:not(.collapsed) b{color:var(--accent)!important;}
.wsus__course_sidebar .accordion-body{padding:0!important;background:var(--card)!important;border-top:1px solid var(--line)!important;}
.wsus__course_sidebar .form-check{position:relative;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:11px!important;padding:13px 22px!important;margin:0!important;border-top:1px solid var(--line-2)!important;cursor:pointer;transition:background .15s;}
.wsus__course_sidebar .accordion-body .form-check:first-child{border-top:none!important;}
.wsus__course_sidebar .form-check:hover{background:rgba(59,44,47,.04)!important;}
.wsus__course_sidebar .form-check.item-active{background:var(--accent-tint)!important;padding-left:22px!important;}
.wsus__course_sidebar .form-check.item-active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);}
.wsus__course_sidebar .form-check-input{appearance:none;-webkit-appearance:none;position:static!important;flex-shrink:0;margin:1px 0 0!important;width:19px!important;height:19px!important;border-radius:50%!important;border:1.8px solid rgba(59,44,47,.30)!important;background:#fff!important;cursor:pointer;transition:.15s;}
.wsus__course_sidebar .form-check-input:checked{background:var(--accent)!important;border-color:var(--accent)!important;}
.wsus__course_sidebar .form-check-label{display:block;flex:1;min-width:0;padding-left:0!important;font-size: var(--fs-sm)!important;font-weight:600!important;color:var(--ink-2)!important;line-height: var(--lh-snug)!important;cursor:pointer!important;}
.wsus__course_sidebar .item-active .form-check-label{color:var(--accent)!important;}
.learning_div_data{padding:0!important;margin-top:0!important;flex:0 0 100%!important;width:100%;padding-left:30px!important;}
.learning_div_data span{font-size:11.5px!important;color:var(--faint)!important;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}
.learning_div_data img{width:13px!important;opacity:.6!important;}
.learning_div_data a{color:var(--accent)!important;font-weight:600;}
.learning_div_data a:hover{text-decoration:underline;}
.learning_div_data .documents{cursor:pointer;}
.wsus__course_sidebar .basic-button{display:flex!important;align-items:center;justify-content:center;gap:9px!important;margin:16px 22px 22px!important;padding:14px!important;border-radius:12px!important;background:linear-gradient(135deg,#7C0C28,#A41034)!important;color:#fff!important;font-weight:700!important;font-size: var(--fs-sm)!important;box-shadow:0 8px 20px rgba(15,110,92,.22)!important;transition:.18s!important;text-decoration:none!important;}
.wsus__course_sidebar .basic-button:hover{transform:translateY(-1px);}
.wsus__course_sidebar .text-center{margin:0!important;}
.wsus__course_transcript{position:fixed!important;top:var(--header-h)!important;right:0!important;width:360px!important;height:calc(100vh - var(--header-h))!important;background:#fff!important;border-left:1px solid var(--line)!important;z-index:1100!important;overflow-y:auto!important;padding:22px!important;box-shadow:var(--shadow-lg)!important;}
.transcript_data{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:16px!important;}
.transcript_title{font-family:var(--font-display)!important;font-size: var(--fs-lg)!important;font-weight:600!important;color:var(--ink)!important;margin:0!important;}
.hide_transcripts{color:var(--muted)!important;font-size: var(--fs-md)!important;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--bg);}
.hide_transcripts:hover{color:var(--accent)!important;background:var(--accent-tint);}
.transcript_descriptions{font-size: var(--fs-sm);color:var(--ink-2);line-height: var(--lh-relaxed);}
.rating_modal .modal-content,.document_modal .modal-content,.report_abuse_modal .modal-content{border-radius:16px!important;border:none!important;box-shadow:var(--shadow-lg)!important;overflow:hidden;}
.rating_modal .modal-header,.document_modal .modal-header,.report_abuse_modal .modal-header{background:#A41034!important;padding:20px 24px!important;border-bottom:1px solid var(--line)!important;}
.rating_modal .modal-title,.document_modal .modal-title,.report_abuse_modal .modal-title{font-family:var(--font-display)!important;color:var(--ink)!important;font-weight:600!important;font-size: var(--fs-lg)!important;}
.rating_modal .close,.document_modal .close,.report_abuse_modal .close{color:var(--muted)!important;font-size: var(--fs-xl);background:none;border:none;}
.rating_modal .modal-body,.document_modal .modal-body,.report_abuse_modal .modal-body{padding:24px!important;}
.wsus__course_video .modal-footer{border-top:1px solid var(--line)!important;padding:16px 24px!important;}
.abuse_report_para{padding:16px 24px 0!important;font-size: var(--fs-sm)!important;color:var(--muted)!important;}
.abuse_report_para a{color:var(--accent)!important;font-weight:600;}
@media(max-width:991px){
  .wsus__course_video{flex-direction:column!important;}
  .wsus__course_video_player{width:100%!important;}
  .wsus__course_sidebar{position:fixed!important;top:var(--header-h)!important;right:-110%!important;width:min(360px,90vw)!important;height:calc(100vh - var(--header-h))!important;z-index:999!important;box-shadow:var(--shadow-lg)!important;transition:right .3s ease!important;}
  .wsus__course_sidebar.show{right:0!important;}
  .wsus__course_header_btn{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;border-radius:999px!important;background:var(--accent)!important;border:1px solid var(--accent)!important;color:#fff!important;font-size: var(--fs-base)!important;flex-shrink:0;cursor:pointer;}
  .wsus__course_sidebar_btn{display:grid!important;place-items:center!important;position:absolute!important;top:14px!important;right:16px!important;width:32px!important;height:32px!important;border-radius:8px!important;background:var(--bg)!important;border:1px solid var(--line)!important;color:var(--muted)!important;z-index:10!important;cursor:pointer;}
  .video_about,.lp-metabar{padding-left:22px!important;padding-right:22px!important;}
}
@media(max-width:575px){
  .wsus__course_header{padding:0 14px!important;gap:10px!important;}
  .wsus__course_header .current_lesson_title{font-size: var(--fs-base)!important;max-width:150px;}
  .progress_data{display:none!important;}
  .aboutcourse{grid-template-columns:repeat(2,1fr)!important;}
  .lp-metabar .current_lesson_title{font-size:21px!important;}
}

/* ── Learning Player: Dual-Header Layout ── */
/* Custom learning-player header sits BELOW the site header, fixed at 66px height.
   Uses --site-header-h (set on :root by JS) to avoid conflict with the local
   --header-h:66px defined on .wsus__course_video. */
.wsus__course_header {
  top: var(--site-header-h, 80px) !important;
  height: 66px !important;
}
/* Push content below both site header + lp header (66px) */
.wsus__course_video {
  padding-top: calc(var(--site-header-h, 80px) + 66px) !important;
}
.wsus__course_sidebar {
  top: calc(var(--site-header-h, 80px) + 66px) !important;
  height: calc(100vh - var(--site-header-h, 80px) - 66px) !important;
}
.wsus__course_transcript {
  top: calc(var(--site-header-h, 80px) + 66px) !important;
  height: calc(100vh - var(--site-header-h, 80px) - 66px) !important;
}
/* Progress ring */
.ig-lp-ring {
  background: conic-gradient(var(--accent) calc(var(--p,0)*1%), var(--accent-soft) 0) !important;
}
/* Certificate button */
.wsus__course_sidebar .basic-button {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent)) !important;
  box-shadow: 0 8px 20px rgba(164,16,52,.22) !important;
}
.wsus__course_sidebar .basic-button.is-locked {
  background: rgba(59,44,47,.08) !important;
  color: rgba(59,44,47,.45) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ── Sidebar heading with section/lecture counts ── */
.video_heading {
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:6px !important;
  row-gap:4px !important;
}
.ig-lp-heading-title {
  font-size: var(--fs-sm);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.ig-lp-heading-title i {
  color:#A41034;
  font-size: var(--fs-sm);
}
.ig-lp-heading-meta {
  font-size:11.5px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
}
.ig-lp-heading-meta::before {
  content:"|";
  margin-right:6px;
  opacity:.35;
}

/* ── Progress HUD redesign ── */
.ig-lp-progress {
  flex-shrink:0 !important;
  padding:16px 20px !important;
  border-bottom:1px solid var(--line) !important;
  background:var(--accent-tint) !important;
}
.ig-lp-prog-top {
  display:flex;
  align-items:center;
  gap:16px;
}
.ig-lp-ring {
  width:56px;
  height:56px;
  border-radius:50%;
  flex-shrink:0;
  display:grid;
  place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p,0)*1%), var(--accent-soft) 0) !important;
  box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--accent-soft);
}
.ig-lp-ring span {
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  font-size: var(--fs-xs);
  font-weight:800;
  color:var(--accent);
}
.ig-lp-prog-meta {
  min-width:0;
  flex:1;
}
.ig-lp-prog-sup {
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#A41034;
  margin-bottom:3px;
}
.ig-lp-prog-count {
  font-size: var(--fs-base);
  font-weight:700;
  color:var(--ink);
  line-height: var(--lh-tight);
  margin-bottom:4px;
}
.ig-lp-prog-motivate {
  font-size: var(--fs-xs);
  color:var(--muted);
  line-height: var(--lh-snug);
}

/* ── Sidebar heading: force explicit colors to override any conflicts ── */
.wsus__course_sidebar .video_heading {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(59,44,47,.14) !important;
  padding: 14px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  min-height: unset !important;
}
.wsus__course_sidebar .ig-lp-heading-title {
  color: #3B2C2F !important;
  font-size: var(--fs-xs) !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.wsus__course_sidebar .ig-lp-heading-title i {
  color: #A41034 !important;
  font-size: var(--fs-xs) !important;
}
.wsus__course_sidebar .ig-lp-heading-meta {
  color: rgba(59,44,47,.6) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.wsus__course_sidebar .ig-lp-heading-meta::before {
  display: none !important;
}
.wsus__course_sidebar .video_heading .add_to_cart_full_course {
  margin-top: -16px;
  width: 50%;
  justify-content: center;
}

/* ── Quiz Question Create/Edit Modal: Answer Cards ── */
.ig-quiz-add-answer-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7C0C28, #A41034);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity .18s;
}
.ig-quiz-add-answer-btn:hover { opacity: .88; color: #fff; }

.ig-quiz-answer-card {
  background: rgba(164,16,52,.06);
  border: 1.5px solid rgba(164,16,52,.25);
  border-radius: 10px;
  padding: 14px 16px 12px;
  margin-bottom: 12px;
}
.ig-quiz-answer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ig-quiz-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1.5px solid rgba(164,16,52,.30);
  background: rgba(164,16,52,.06);
  color: #7C0C28;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background .15s;
}
.ig-quiz-remove-btn:hover { background: rgba(164,16,52,.12); }
.ig-quiz-answer-card input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid rgba(59,44,47,.14);
  border-radius: 8px;
  font-size: var(--fs-sm);
  color: #3B2C2F;
  background: #fff;
  outline: none;
  transition: border-color .2s;
}
.ig-quiz-answer-card input[type="text"]:focus { border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.1); }
.ig-quiz-correct-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

/* SOFT DEPTH & GLOW -- delicate elevation pass (header / video card / tabs / instructor / stats / tags) */
.wsus__course_header{box-shadow:0 1px 0 var(--line),0 12px 28px -18px rgba(59,44,47,.18)!important;}
.wsus__course_header .mini-cart-count{box-shadow:0 0 0 2px #fff,0 2px 8px rgba(164,16,52,.45);}
.video-payer{box-shadow:0 18px 48px -12px rgba(59,44,47,.35),0 2px 0 rgba(255,255,255,.4)!important;transition:box-shadow .25s ease;}
.video_tabs_area .nav-pills .nav-link{position:relative;}
.video_tabs_area .nav-pills .nav-link.active::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--accent);box-shadow:0 0 10px rgba(164,16,52,.55),0 0 2px rgba(164,16,52,.7);border-radius:2px;}
.instructor__item{box-shadow:0 8px 26px -16px rgba(59,44,47,.25)!important;transition:box-shadow .22s ease,transform .22s ease;}
.instructor__item:hover{box-shadow:0 14px 34px -14px rgba(164,16,52,.28)!important;transform:translateY(-2px);}
.instructor__thumb img{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--accent-soft),0 6px 16px -6px rgba(164,16,52,.4)!important;}
.aboutcourse .about_course_data{transition:box-shadow .2s ease,transform .2s ease;}
.aboutcourse .about_course_data:hover{box-shadow:0 10px 24px -14px rgba(164,16,52,.30)!important;transform:translateY(-2px);}
.aboutcourse2 .courses__details-meta li{transition:box-shadow .18s ease,border-color .18s ease;}
.aboutcourse2 .courses__details-meta li:hover{box-shadow:0 4px 14px -8px rgba(164,16,52,.30);border-color:var(--accent-soft)!important;}
.leave_ratings{transition:box-shadow .2s ease,background .18s ease,color .18s ease;}
.leave_ratings:hover{box-shadow:0 8px 20px -10px rgba(164,16,52,.45)!important;}
.aboutcourse3 .about_course_data{box-shadow:0 10px 28px -18px rgba(164,16,52,.30)!important;}

/* ══════════════════════════════════════════════════════
   NAV USER DROPDOWN — Rich sectioned menu
══════════════════════════════════════════════════════ */
.ig-user-dropdown {
  width: 480px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  border: 1px solid #fcd4dc !important;
  box-shadow: 0 20px 60px rgba(164,16,52,.14), 0 4px 16px rgba(0,0,0,.07) !important;
  overflow-y: auto !important;
  max-height: 90vh !important;
  right: 0 !important;
  left: auto !important;
  top: 54px !important;
}
/* Header strip */
.ig-ud-header {
  background: linear-gradient(135deg, #6b0020 0%, #A41034 100%) !important;
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: default !important;
  position: relative !important;
  overflow: hidden !important;
}
.ig-ud-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.20);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xl); font-weight: 800; color: #fff;
  flex-shrink: 0; border: 2px solid rgba(255,255,255,.40);
  position: relative; z-index: 1;
}
.ig-ud-info { min-width: 0; position: relative; z-index: 1; }
.ig-ud-name {
  font-weight: 700; color: #fff; font-size: var(--fs-base); line-height: var(--lh-snug);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ig-ud-email {
  font-size: 11.5px; color: rgba(255,255,255,.65); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Section label */
.ig-ud-body { padding: 0 !important; }
.ig-ud-section {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 12px 16px 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #b0414f !important;
  background: none !important;
}
.ig-ud-section i { font-size: var(--fs-xs) !important; color: #A41034 !important; }
/* 3-column link grid */
.ig-ud-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2px !important;
  padding: 0 10px 12px !important;
}
.ig-ud-grid a {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  color: #1e1e2e !important;
  transition: background .15s, color .15s !important;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ig-ud-grid a:hover {
  background: #fff0f3 !important;
  color: #A41034 !important;
  text-decoration: none !important;
}
.ig-ud-grid a i {
  width: 14px !important;
  text-align: center !important;
  font-size: var(--fs-xs) !important;
  color: #c4405a !important;
  flex-shrink: 0 !important;
}
.ig-ud-grid a:hover i { color: #A41034 !important; }
/* Create Course CTA — spans full row */
.ig-ud-grid .ig-ud-create-btn {
  grid-column: 1 / -1 !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #A41034, #6b0020) !important;
  color: #fff !important;
  font-size: var(--fs-sm) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  margin-top: 4px !important;
}
.ig-ud-grid .ig-ud-create-btn i { color: #fff !important; width: auto !important; }
.ig-ud-grid .ig-ud-create-btn:hover {
  background: linear-gradient(135deg, #c0143d, #A41034) !important;
  color: #fff !important;
  transform: none !important;
}
/* Divider */
.ig-ud-divider {
  border: none !important;
  border-top: 1px solid #fce7ec !important;
  margin: 0 !important;
}
/* Footer row */
.ig-ud-foot {
  display: flex !important;
  gap: 4px !important;
  padding: 8px 10px 12px !important;
  border-top: 1px solid #fce7ec !important;
}
.ig-ud-foot a {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 13px !important;
  border-radius: 9px !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  transition: background .15s !important;
  white-space: nowrap !important;
}
.ig-ud-foot a:hover { background: #fff0f3 !important; color: #A41034 !important; text-decoration: none !important; }
.ig-ud-foot a i { font-size: var(--fs-xs) !important; }
.ig-ud-logout { color: #A41034 !important; }
.ig-ud-logout:hover { background: #fff0f3 !important; color: #7a0c26 !important; }

/* ── Quiz toggle button: remove Bootstrap's white accordion-button background ── */
.cc3-item-quiz-toggle,
.cc3-item-quiz-toggle:not(.collapsed),
.cc3-item-quiz-toggle:focus,
.cc3-item-quiz-toggle:hover {
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    padding: 0 !important;
}

/* ── Quiz row fix: reset Bootstrap accordion variable + full background chain ── */
.cc3-item--quiz {
    --bs-accordion-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-bg: transparent;
    background: #FBE7EC !important;
}
.id-frame__content-col .cc3-item--quiz {
    background: #FBE7EC !important;
}
.cc3-item-quiz-head,
.cc3-item--quiz .cc3-item-left,
button.cc3-item-quiz-toggle,
button.accordion-button.cc3-item-quiz-toggle,
button.accordion-button.cc3-item-quiz-toggle:not(.collapsed),
button.accordion-button.cc3-item-quiz-toggle:hover,
button.accordion-button.cc3-item-quiz-toggle:focus {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ── Fix: quiz item is a flex container from .cc3-item — accordion-collapse renders beside quiz head instead of below ── */
.cc3-item--quiz {
    display: block !important;
    padding: 0 !important;
    align-items: unset !important;
    justify-content: unset !important;
}
.cc3-item--quiz > .cc3-item-quiz-head {
    padding: 10px 14px !important;
}
.cc3-item--quiz > .accordion-collapse {
    display: none;
}
.cc3-item--quiz > .accordion-collapse.show {
    display: block !important;
}

/* ── Fix quiz head dropdown clipping — overflow:hidden was clipping the dropdown menu ── */
.cc3-item--quiz > .cc3-item-quiz-head {
    overflow: visible !important;
}

/* ── Dynamic modal: no backdrop, use shadow + overlay scoped to content column ── */
.dynamic-modal {
    pointer-events: none;
}
.dynamic-modal.show {
    pointer-events: auto;
}
.dynamic-modal .modal-content {
    box-shadow: 0 32px 80px rgba(164,16,52,.32) !important;
}
/* Soft page dim via pseudo on body (only while modal is open) */
body.modal-open {
    overflow: auto !important;
}
body.modal-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(20,10,50,.45);
    z-index: 1040;
    pointer-events: none;
}



/* ================================================================
   iGURUS — Features Strip  (.ig-features)
   Paste into page-components.css
================================================================ */

 

.ig-features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(164,16,52, .09);
    border: 1px solid rgba(164,16,52, .09);
    border-radius: 20px;
    overflow: hidden;
}

/* ── Card ── */
.ig-feature-card {
    background: #fff;
    padding: 32px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition: background .2s ease;
    cursor: default;
}
.ig-feature-card:hover {
    background: #faf9ff;
}

/* Top accent line on hover */
.ig-feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 0;
    opacity: 0;
    transition: opacity .25s ease;
}
.ig-feature-card:hover::before { opacity: 1; }

.ig-feature-card:nth-child(1)::before { background: linear-gradient(90deg, #A41034, #FFFFFF); }
.ig-feature-card:nth-child(2)::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.ig-feature-card:nth-child(3)::before { background: linear-gradient(90deg, #db2777, #f472b6); }
.ig-feature-card:nth-child(4)::before { background: linear-gradient(90deg, #0d9488, #5eead4); }

/* ── Icon ── */
.ig-feature-card__icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    flex-shrink: 0;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.ig-feature-card:hover .ig-feature-card__icon {
    transform: scale(1.1) rotate(-4deg);
}

.ig-icon--purple { background: rgba(164,16,52, .10); color: #A41034; }
.ig-icon--blue   { background: rgba(37,  99, 235, .10); color: #2563eb; }
.ig-icon--pink   { background: rgba(219, 39, 119, .10); color: #db2777; }
.ig-icon--teal   { background: rgba(13, 148, 136, .10); color: #0d9488; }

/* ── Text ── */
.ig-feature-card__title {
    font-size: var(--fs-base);
    font-weight: 800;
    color: #0f0c29;
    font-family: "Plus Jakarta Sans", sans-serif;
    line-height: var(--lh-snug);
}

.ig-feature-card__desc {
    font-size: var(--fs-sm);
    color: #6b7280;
    line-height: var(--lh-relaxed);
    font-family:"Plus Jakarta Sans", sans-serif;
    margin: 0;
    flex: 1;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .ig-features__grid {
        grid-template-columns: repeat(2, 1fr);
        border-radius: 16px;
    }
}

@media (max-width: 575px) {
    .ig-features { padding: 40px 0 48px; }
    .ig-features__grid {
        grid-template-columns: 1fr;
        border-radius: 14px;
    }
    .ig-feature-card { padding: 24px 20px; }
    .ig-feature-card::before { opacity: 1; }
}


/* Newsletter CTA matching footer theme */
.ig-newsletter-banner{ 
    overflow:hidden;
    position:relative;
}

.ig-newsletter-banner::before{
    content:'';
    position:absolute;
    right:-80px;
    top:-80px;
    width:220px;
    height:220px;
    border-radius:50%;
     
}

.ig-newsletter-banner::after{
    content:'';
    position:absolute;
    left:-60px;
    bottom:-60px;
    width:160px;
    height:160px;
    border-radius:50%;
    
}

.ig-newsletter-left h3{
    color:#fff;
    font-size:42px;
    font-weight:700;
    margin-bottom:12px;
}

.ig-newsletter-left p{
    color:rgba(255,255,255,.75);
    margin:0;
    font-size: var(--fs-base);
}

.ig-newsletter-form{
    display:contents;
    justify-content:flex-end;
    align-items:center;
    border-radius: 12px !important;
}

.ig-newsletter-form input{
    border-radius: 12px !important;
    width:100%;
    max-width:450px;
    height:58px;
    border:none;
    background:#fff;
    color:#111827;
    padding:0 20px;
    border-radius:12px 0 0 12px;
}

.ig-newsletter-form input::placeholder{
    border-radius: 12px !important;
    color:#6b7280;
}

.ig-newsletter-form button{
    border-radius: 12px !important;
    width:72px;
    height:58px;
    border:none;
    background:#A41034; /* same purple theme */
    color:#fff;
    border-radius:0 12px 12px 0;
    font-size: var(--fs-lg);
    transition:.3s;
}

.ig-newsletter-form button:hover{
    background:#A41034;
}

@media(max-width:991px){

    .ig-newsletter-banner{
        padding:30px 25px;
        text-align:center;
    }

    .ig-newsletter-left{
        margin-bottom:20px;
    }

    .ig-newsletter-left h3{
        font-size: var(--fs-3xl);
    }

    .ig-newsletter-form{
        justify-content:contents;
    }

    .ig-newsletter-form input{
        max-width:100%;
    }
}

/* ==========================================
   FEATURES SECTION
========================================== */

.ig-features-v3 {
    padding: 50px 0 70px;
    position: relative;
}

.ig-feature-bar {
    margin: 0 20px;
    padding: 30px 0 36px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ==========================================
   FEATURE CARD
========================================== */

.ig-feature-item {
    position: relative;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #eef0f6;

    border-radius: 22px;

    padding: 30px 24px;

    text-align: center;

    transition: all 0.3s ease;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.04);
}

/* Top Accent Line */

.ig-feature-item::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #A41034,
        #860D2B
    );
}

.ig-feature-item:hover {
    transform: translateY(-6px);

    border-color: #e2e8f0;

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08);
}

/* ==========================================
   ICONS
========================================== */

.feature-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    font-size: var(--fs-2xl);
    color: #fff;

    transition: all .3s ease;
}

.ig-feature-item:hover .feature-icon {
    transform: scale(1.08);
}

/* Purple */

.feature-icon.purple {
    background: linear-gradient(
        135deg,
        #A41034,
        #7a0c24
    );
}

/* Blue */

.feature-icon.blue {
    background: linear-gradient(
        135deg,
        #1C1514,
        #37302F
    );
}

/* Pink */

.feature-icon.pink {
    background: linear-gradient(
        135deg,
        #c41848,
        #A41034
    );
}

/* Teal */

.feature-icon.teal {
    background: linear-gradient(
        135deg,
        #37302F,
        #1C1514
    );
}

/* ==========================================
   CONTENT
========================================== */

.ig-feature-item h4 {
    margin: 0 0 10px;

    font-size: var(--fs-xl);
    font-weight: 700;

    color: #111827;

    line-height: var(--lh-snug);
}

.ig-feature-item p {
    margin: 0;

    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);

    color: #6b7280;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1199px) {

    .ig-feature-bar {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 767px) {

    .ig-feature-bar {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ig-feature-item {
        padding: 24px 20px;
    }

    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: var(--fs-xl);
    }

    .ig-feature-item h4 {
        font-size: var(--fs-lg);
    }
}


.custom-glass-modal {
    z-index: 1060 !important; /* Bootstrap defaults backdrops to 1050, dialogs to 1055 */
}
.modal-backdrop {
    z-index: 1050 !important;
}


/* ── Report modal ─────────────────────────────────── */
.igs-report-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 1.25rem 1.25rem 0;
}

.igs-report-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: #fef2f2;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: var(--fs-md); color: #dc2626;
}

.igs-report-head-text { flex: 1 }
.igs-report-title { font-size: var(--fs-base); font-weight: 700; color: #111827; margin: 0 0 3px }
.igs-report-sub   { font-size: var(--fs-sm); color: #6b7280; margin: 0 }

.igs-report-close {
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: transparent;
    cursor: pointer; font-size: var(--fs-sm); color: #9ca3af;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background .15s;
}
.igs-report-close:hover { background: #f3f4f6 }

.igs-report-divider { border: none; border-top: 1px solid #f3f4f6; margin: 1rem 0 0 }
.igs-report-body    { padding: 1rem 1.25rem }

/* Options */
.igs-report-options { display: flex; flex-direction: column; gap: 6px }

.igs-report-option {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.igs-report-option:hover { background: #fafafa; border-color: #d1d5db }
.igs-report-option.selected { border-color: #A41034; background: #fef2f4 }

/* Hide native radio */
.igs-report-option input[type="radio"] { display: none }

.igs-radio-dot {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid #d1d5db;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s;
}
.igs-report-option.selected .igs-radio-dot {
    border-color: #A41034;
    background: #A41034;
}

.igs-radio-inner {
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff; opacity: 0; transition: opacity .15s;
}
.igs-report-option.selected .igs-radio-inner { opacity: 1 }

.igs-option-label { font-size: var(--fs-sm); color: #374151; line-height: var(--lh-snug) }
.igs-report-option.selected .igs-option-label { color: #A41034; font-weight: 600 }

/* Footer */
.igs-report-foot {
    padding: 0 1.25rem 1.25rem;
    display: flex; gap: 8px; justify-content: flex-end;
}

.igs-btn-cancel, .igs-btn-report {
    padding: 8px 18px; border-radius: 9px;
    font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
    transition: opacity .15s, background .15s;
}
.igs-btn-cancel {
    background: transparent; color: #6b7280;
    border: 1px solid #e5e7eb;
}
.igs-btn-cancel:hover { background: #f9fafb }
.igs-btn-report {
    background: #A41034; color: #fff;
    border: 1px solid #A41034;
    box-shadow: 0 4px 14px rgba(164,16,52,.28);
}
.igs-btn-report:hover { opacity: .88 }


/* ====================================================================
   iGURUS SHORTS PORTAL: FEEDBACK MODAL FORCE RE-RESET
==================================================================== */

/* 1. Strip Out Native Bootstrap Content/Body Backgrounds */
.custom-glass-modal .modal-content,
.custom-glass-modal .modal-header,
.custom-glass-modal .modal-body,
.custom-glass-modal .modal-footer,
.custom-glass-modal form {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 2. Build Master Dark Glass Framework Box */
.custom-glass-modal .modal-content {
    background: rgba(18, 12, 43, 0.92) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65) !important;
    overflow: hidden;
}

/* 3. Header Customization & Text Realignment */
.premium-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 24px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.header-badge-feedback {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #A41034; /* Brand Primary */
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.premium-modal-header .modal-title {
    color: #ffffff !important;
    font-size: var(--fs-lg) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    margin: 0 !important;
    letter-spacing: 0.5px;
}

/* 4. Textarea Container Realignment */
.premium-modal-body {
    padding: 24px 28px !important;
}

.premium-input-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 10px;
    display: block;
}

.required-asterisk {
    color: #ef4444;
    margin-left: 4px;
}

/* Kill Bootstrap's gray box input fallback */
.feedback-textarea-container {
    position: relative;
    width: 100%;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: all 0.3s ease;
}

.premium-feedback-textarea {
    width: 100%;
    min-height: 160px;
    max-height: 300px;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 16px;
    color: #ffffff !important;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    resize: vertical;
}

.premium-feedback-textarea::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.feedback-textarea-container:focus-within {
    border-color: rgba(164, 16, 52, 0.45) !important;
    box-shadow: 0 0 15px rgba(164, 16, 52, 0.18) !important;
    background: rgba(0, 0, 0, 0.45) !important;
}

/* 5. Footer & Action Buttons Alignment */
.premium-modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 20px 28px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px;
}

.btn-glass-secondary {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 10px 20px;
    font-size: var(--fs-sm);
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.btn-glass-secondary:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.btn-glass-primary-feedback {
    background: #A41034 !important;
    border: 1px solid #A41034 !important;
    color: #ffffff !important;
    padding: 10px 24px;
    font-size: var(--fs-sm);
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(164, 16, 52, 0.28) !important;
    transition: all 0.2s ease;
}

.btn-glass-primary-feedback:hover {
    background: #861029 !important;
    border-color: #861029 !important;
    box-shadow: 0 6px 20px rgba(164, 16, 52, 0.42) !important;
}


h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
}

h2 {
    font-size: var(--fs-4xl);
    font-weight: 700;
}

h3 {
    font-size: var(--fs-3xl);
    font-weight: 600;
}

p {
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
    color: #4B5563;
}


.dashboard-banner-card {
    background: #A41034; /* Flat solid layout color with no gradients */
    border-radius: 18px;
    padding: 28px 32px;
    margin: 0 0 26px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(34, 34, 34, 0.45);
    align-self: flex-start;
    width: 100%;
    flex-shrink: 0;
}

.dashboard-banner-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.dashboard-banner-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.3rem;
}

.dashboard-banner-text-group {
    /* Layout wrapping block for titles and tags */
}

.dashboard-banner-tag {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #A41034; /* Primary accent theme color instead of semi-transparent white */
    margin: 0 0 4px;
}

.dashboard-banner-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: var(--lh-tight);
}

.dashboard-banner-subtitle {
    font-size: 1rem;
    color: #fff;
    margin: 5px 0 0;
}


.title_card{
    background:linear-gradient(135deg,#2B0510 0%,#A41034 45%,#A41034 100%);
    border-radius:18px;padding:28px 32px;margin:0 0 26px;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(17,2,44,.45);
    align-self:flex-start;width:100%;flex-shrink:0;
}

/* ── Prevent horizontal scrollbar from full-bleed margin trick ── */
body:has(.ig-shorts-feed) { overflow-x: hidden; }

/* ════════════════════════════════════════════════════════
   SHORTS — FEEDBACK MODAL  (igfb-*)
   Theme: #A41034 · #1C1514 · #FFFFFF
════════════════════════════════════════════════════════ */
.igfb-form {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
}

/* Header */
.igfb-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px 18px;
    background: linear-gradient(135deg, #A41034 0%, #1C1514 100%);
    position: relative;
}

.igfb-icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-lg); color: #fff;
    flex-shrink: 0;
}

.igfb-head-text { flex: 1; }

.igfb-eyebrow {
    display: block;
    font-size: 10px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255,255,255,.65);
    margin-bottom: 3px;
}

.igfb-title {
    font-size: 15.5px; font-weight: 700; color: #fff;
    margin: 0; line-height: var(--lh-tight);
}

.igfb-close {
    width: 30px; height: 30px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.8); font-size: var(--fs-sm);
    flex-shrink: 0; transition: background .15s;
}
.igfb-close:hover { background: rgba(255,255,255,.25); color: #fff; }

/* Body */
.igfb-body { padding: 20px 22px 10px; }

.igfb-label {
    display: block;
    font-size: var(--fs-sm); font-weight: 600; color: #1C1514;
    margin-bottom: 10px;
}

.igfb-req { color: #A41034; margin-left: 2px; }

.igfb-textarea-wrap { position: relative; }

.igfb-textarea {
    width: 100%;
    min-height: 140px;
    border: 1.5px solid #FFFFFF;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: var(--fs-sm); color: #1C1514;
    line-height: var(--lh-normal); resize: vertical;
    background: #fafafa;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.igfb-textarea::placeholder { color: #aaa; }
.igfb-textarea:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.1);
    background: #fff;
}

/* Char counter row */
.igfb-char-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; padding-bottom: 4px;
}
.igfb-hint {
    font-size: 11.5px; color: #9ca3af;
    display: flex; align-items: center; gap: 5px;
}
.igfb-hint i { color: #A41034; }
.igfb-counter { font-size: 11.5px; color: #aaa; font-variant-numeric: tabular-nums; }

/* Footer */
.igfb-footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; padding: 14px 22px 18px;
    border-top: 1px solid #FFFFFF;
    background: #f9f9f8;
}

.igfb-btn-cancel {
    padding: 9px 18px; border-radius: 9px;
    font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
    background: transparent; color: #6b7280;
    border: 1.5px solid #FFFFFF;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s, border-color .15s;
}
.igfb-btn-cancel:hover { background: #FFFFFF; border-color: #ccc; color: #1C1514; }

.igfb-btn-send {
    padding: 9px 20px; border-radius: 9px;
    font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
    background: #A41034; color: #fff;
    border: 1.5px solid #A41034;
    display: inline-flex; align-items: center; gap: 7px;
    box-shadow: 0 4px 14px rgba(164,16,52,.3);
    transition: background .15s, box-shadow .15s;
}
.igfb-btn-send:hover { background: #861029; box-shadow: 0 6px 18px rgba(164,16,52,.42); }

/* ════════════════════════════════════════════════════════
   SHORTS — REPORT FORM extra polish  (igs-report-*)
════════════════════════════════════════════════════════ */
.igs-report-eyebrow {
    display: block;
    font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #A41034;
    margin-bottom: 2px;
}
.igs-report-option { cursor: pointer; }
.igs-option-arrow {
    margin-left: auto;
    font-size: 10px; color: #d1d5db;
    transition: color .15s, transform .15s;
}
.igs-report-option.selected .igs-option-arrow { color: #A41034; transform: translateX(2px); }
.igs-report-note {
    font-size: var(--fs-xs); color: #9ca3af;
    display: flex; align-items: center; gap: 5px;
    margin: 0; flex: 1;
}
.igs-report-note i { color: #A41034; }
.igs-report-actions { display: flex; gap: 8px; }
/* Override footer to accommodate note */
.igs-report-foot {
    padding: 0 1.25rem 1.25rem;
    display: flex; align-items: center; gap: 8px; justify-content: space-between;
}

/* ════════════════════════════════════════════════════════
   SHORTS — NOT INTERESTED TOAST
════════════════════════════════════════════════════════ */
.ig-ni-toast {
    position: fixed;
    bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: #1C1514;
    color: #FFFFFF;
    padding: 12px 22px;
    border-radius: 100px;
    font-size: var(--fs-sm); font-weight: 600;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
    border: 1px solid rgba(164,16,52,.35);
    z-index: 9999;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    white-space: nowrap;
}
.ig-ni-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.ig-ni-toast__icon {
    width: 26px; height: 26px; border-radius: 50%;
    background: #A41034;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); color: #fff; flex-shrink: 0;
}

/* Card dim overlay on not-interested */
.ig-short-card.ig-ni-dimming::after {
    content: '';
    position: absolute; inset: 0; z-index: 15;
    background: rgba(164,16,52,.18);
    border-radius: inherit;
    animation: igNiDim .3s ease forwards;
    pointer-events: none;
}
@keyframes igNiDim {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ════════════════════════════════════════════════════════════════
   CHECKOUT PAGE  (co-* prefix)
   Theme: Primary #A41034  |  Dark #1C1514  |  Neutral #FFFFFF
   ════════════════════════════════════════════════════════════════ */

/* ── Page shell ── */
.co-page {
    background: #f0eeeb;
    min-height: 100vh;
    font-family: inherit;
}

/* ── Top breadcrumb bar ── */
.co-topbar {
    background: #1C1514;
    padding: 14px 0;
    border-bottom: 3px solid #A41034;
}
.co-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.co-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
}
.co-breadcrumb a {
    color: #ccc;
    text-decoration: none;
    transition: color .2s;
}
.co-breadcrumb a:hover { color: #fff; }
.co-breadcrumb span { color: #A41034; font-weight: 600; }
.co-breadcrumb .fa-chevron-right { color: #555; font-size: 10px; }
.co-secure-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #FFFFFF;
}
.co-secure-badge .fa-lock { color: #A41034; }

/* ── Body ── */
.co-body {
    padding: 40px 0 80px;
}
.co-page-head {
    margin-bottom: 28px;
}
.co-heading {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: #1C1514;
    margin: 0 0 4px;
}
.co-heading-sub {
    font-size: var(--fs-sm);
    color: #888;
    margin: 0;
}

/* ── Alert ── */
.co-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff8e6;
    border: 1px solid #f5c518;
    border-radius: 8px;
    padding: 12px 18px;
    margin-bottom: 24px;
    font-size: var(--fs-sm);
    color: #7a5800;
}
.co-alert .fa-exclamation-triangle { color: #f5c518; }

/* ── Order card (LEFT) ── */
.co-order-card {
    background: #1C1514;
    border-radius: 16px;
    overflow: hidden;
    color: #FFFFFF;
    position: sticky;
    top: 24px;
}

/* ── Student section ── */
.co-student {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 22px 18px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.co-student-av-wrap {
    flex-shrink: 0;
    position: relative;
}
.co-student-av {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #A41034;
}
.co-student-initials {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #A41034;
    color: #fff;
    font-size: var(--fs-lg);
    font-weight: 700;
    align-items: center;
    justify-content: center;
    border: 2px solid #A41034;
}
.co-student-info { flex: 1; min-width: 0; }
.co-student-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.co-student-email {
    font-size: var(--fs-xs);
    color: #999;
    margin: 2px 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.co-student-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(164,16,52,.25);
    color: #f08090;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid rgba(164,16,52,.4);
}

/* ── Items header ── */
.co-items-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px 10px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
}
.co-items-count {
    background: #A41034;
    color: #fff;
    font-size: var(--fs-xs);
    padding: 2px 9px;
    border-radius: 20px;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Items list ── */
.co-items {
    padding: 0 22px;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}
.co-items::-webkit-scrollbar { width: 4px; }
.co-items::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

.co-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.co-item:last-child { border-bottom: none; }
.co-item-thumb-link { flex-shrink: 0; }
.co-item-thumb {
    width: 54px;
    height: 38px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.1);
}
.co-item-info { flex: 1; min-width: 0; }
.co-item-name {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: #FFFFFF;
    line-height: var(--lh-snug);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.co-item-name:hover { color: #fff; }
.co-item-type {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.co-item-type--course { background: rgba(255,255,255,.08); color: #aaa; }
.co-item-type--klip   { background: rgba(164,16,52,.25); color: #f08090; }
.co-item-price {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #fff;
}

/* ── Price breakdown ── */
.co-breakdown {
    padding: 16px 22px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.co-breakdown-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.co-breakdown-row:last-child { border-bottom: none; }
.co-breakdown-label {
    font-size: var(--fs-sm);
    color: #aaa;
}
.co-breakdown-val {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
}
.co-green { color: #4caf82 !important; }

/* ── Coupon pill ── */
.co-coupon-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(76,175,130,.15);
    border: 1px solid rgba(76,175,130,.3);
    color: #4caf82;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 4px;
}
.co-coupon-remove {
    color: #888;
    text-decoration: none;
    font-size: var(--fs-sm);
    line-height: 1;
    margin-left: 2px;
}
.co-coupon-remove:hover { color: #fff; }

/* ── Credit toggle ── */
.co-credit-row { padding: 4px 0; }
.co-credit-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    width: 100%;
}
.co-credit-toggle input[type=checkbox] {
    accent-color: #A41034;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}
.co-credit-text {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-sm);
    color: #aaa;
}
.co-credit-text small { font-size: var(--fs-xs); color: #666; margin-top: 1px; }

/* ── Total ── */
.co-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #A41034;
    padding: 18px 22px;
}
.co-total-label {
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.85);
}
.co-total-val {
    font-size: var(--fs-xl);
    font-weight: 800;
    color: #fff;
}

/* ══════════════════════════════════
   Payment card (RIGHT)
   ══════════════════════════════════ */
.co-payment-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0,0,0,.08);
}

/* ── Payment header ── */
.co-payment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 22px 28px;
    background: #fff;
    border-bottom: 2px solid #f0eeeb;
}
.co-payment-head-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #1C1514;
    display: flex;
    align-items: center;
    gap: 8px;
}
.co-payment-head-title .fa-credit-card { color: #A41034; }
.co-payment-head-sub {
    font-size: var(--fs-xs);
    color: #888;
    margin-top: 3px;
}
.co-card-brands-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.co-card-brands-row img {
    height: 26px;
    width: auto;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
}

/* ── Payment body ── */
.co-payment-body {
    padding: 28px;
}

/* ── Form fields ── */
.co-field { margin-bottom: 20px; }
.co-field-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #555;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.co-hint {
    color: #bbb;
    cursor: help;
    font-size: var(--fs-xs);
}
.co-hint:hover { color: #A41034; }
.co-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── Input wrap ── */
.co-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.co-input {
    width: 100%;
    height: 50px;
    padding: 0 46px 0 16px;
    font-size: var(--fs-md);
    font-family: 'Courier New', monospace;
    color: #1C1514;
    background: #fafafa;
    border: 1.5px solid #FFFFFF;
    border-radius: 10px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    letter-spacing: .04em;
}
.co-input::placeholder { color: #bbb; font-family: inherit; letter-spacing: 0; font-size: var(--fs-base); }
.co-input:focus {
    background: #fff;
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.1);
}
.co-input.co-input-error {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231,76,60,.1);
}
.co-expiry { font-family: inherit; letter-spacing: .08em; }
.co-input-icon {
    position: absolute;
    right: 14px;
    color: #bbb;
    font-size: var(--fs-sm);
    pointer-events: none;
}

/* ── Card detect (inside card number field) ── */
.co-card-detect {
    position: absolute;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.co-card-detect img {
    height: 22px;
    width: auto;
    opacity: 1;
    transition: opacity .2s;
    border-radius: 3px;
}

/* card number has brand icons, so need more right padding */
#card_number { padding-right: 110px; }

/* ── Error message ── */
.co-error {
    display: none;
    align-items: center;
    gap: 9px;
    background: #fff0f0;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 11px 16px;
    margin-bottom: 20px;
    font-size: var(--fs-sm);
    color: #c0392b;
}
.co-error .fa-exclamation-circle { color: #e74c3c; flex-shrink: 0; }

/* ── Pay button ── */
.co-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    background: linear-gradient(135deg, #A41034 0%, #7a0c27 100%);
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .2s;
    box-shadow: 0 4px 18px rgba(164,16,52,.35);
    letter-spacing: .01em;
    margin-bottom: 24px;
}
.co-pay-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #b81238 0%, #8b0e2c 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(164,16,52,.45);
}
.co-pay-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(164,16,52,.3);
}
.co-pay-btn:disabled {
    opacity: .7;
    cursor: not-allowed;
}

/* ── Free / enroll ── */
.co-free-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f5fff8;
    border: 1.5px solid #b7e9c9;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 20px;
}
.co-free-icon {
    font-size: var(--fs-3xl);
    color: #2ecc71;
    flex-shrink: 0;
}
.co-free-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.co-free-text strong { font-size: var(--fs-base); color: #1C1514; }
.co-free-text span   { font-size: var(--fs-sm); color: #888; }

.co-enroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 52px;
    background: #2ecc71;
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background .2s, transform .15s;
    margin-bottom: 24px;
}
.co-enroll-btn:hover {
    background: #27ae60;
    transform: translateY(-1px);
}

/* ── Trust strip ── */
.co-trust {
    border-top: 1px solid #f0eeeb;
    padding-top: 20px;
}
.co-trust-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.co-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-xs);
    color: #888;
    font-weight: 500;
}
.co-trust-item i {
    color: #A41034;
    font-size: var(--fs-sm);
    flex-shrink: 0;
}

/* ══════════════════════════════════
   Responsive
   ══════════════════════════════════ */
@media (max-width: 991px) {
    .co-order-card { position: static; }
    .co-payment-body { padding: 22px 18px; }
    .co-payment-head { padding: 18px; }
    .co-trust-row { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .co-body { padding: 24px 0 60px; }
    .co-heading { font-size: var(--fs-xl); }
    .co-field-row { grid-template-columns: 1fr; }
    .co-topbar-inner { flex-direction: column; align-items: flex-start; }
    .co-total-val { font-size: var(--fs-lg); }
    .co-card-brands-row { display: none; }
}


/* ════════════════════════════════════════════════════════════
   CHECKOUT LAYOUT  (cko-* = header/footer, cho-* = page body)
   Theme: #A41034  |  #1C1514  |  #FFFFFF  |  bg #f0eeeb
   ════════════════════════════════════════════════════════════ */

/* ── Minimal checkout header ── */
.cko-header {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 8px rgba(0,0,0,.07);
}
.cko-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}
.cko-logo {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-xl);
    font-weight: 800;
    color: #A41034;
    text-decoration: none;
    letter-spacing: -.02em;
}
.cko-logo:hover { color: #8a0c2a; }
.cko-header-secure {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #555;
}
.cko-lock-svg {
    width: 18px;
    height: 18px;
    color: #2ecc71;
}

/* ── Minimal checkout footer ── */
.cko-footer {
    background: #fff;
    border-top: 1px solid #e8e8e8;
    padding: 18px 0;
    margin-top: 40px;
}
.cko-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: var(--fs-xs);
    color: #999;
}
.cko-footer-links {
    display: flex;
    gap: 16px;
}
.cko-footer-links a {
    color: #999;
    text-decoration: none;
}
.cko-footer-links a:hover { color: #A41034; }

/* ════════════════════════════════════════
   Page wrap + two-column grid
   ════════════════════════════════════════ */
.cho-wrap {
    padding: 40px 0 60px;
}
.cho-row {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 30px rgba(0,0,0,.07);
}

/* ── Notice / alert ── */
.cho-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff9e6;
    border: 1px solid #f5c518;
    border-radius: 8px;
    padding: 12px 18px;
    margin-bottom: 20px;
    font-size: var(--fs-sm);
    color: #7a5800;
}
.cho-notice .fa-exclamation-triangle { color: #f5c518; }

/* ════════════════════════════════════════
   LEFT  — order summary
   ════════════════════════════════════════ */
.cho-left {
    background: #1e1e1e;
    min-height: 100%;
}
.cho-summary {
    padding: 36px 32px 36px;
    color: #d0d0d0;
    position: sticky;
    top: 80px;
}

/* ── Student card ── */
.cho-student {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}
.cho-av-wrap { position: relative; flex-shrink: 0; }
.cho-av {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #A41034;
}
.cho-av-init {
    display: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #A41034;
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 700;
    align-items: center;
    justify-content: center;
    border: 2px solid #A41034;
}
.cho-student-name { font-size: var(--fs-base); font-weight: 600; color: #fff; }
.cho-student-email { font-size: var(--fs-xs); color: #888; margin-top: 2px; }

/* ── Divider ── */
.cho-divider { height: 1px; background: rgba(255,255,255,.08); margin: 20px 0; }

/* ── Section label ── */
.cho-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #666;
    margin-bottom: 14px;
}
.cho-badge {
    background: #A41034;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Items ── */
.cho-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    margin-right: -4px;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}
.cho-items::-webkit-scrollbar { width: 3px; }
.cho-items::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

.cho-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.cho-item:last-child { border-bottom: none; }
.cho-item-img {
    width: 52px;
    height: 36px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.08);
}
.cho-item-body { flex: 1; min-width: 0; }
.cho-item-title {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: #ddd;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--lh-snug);
    margin-bottom: 4px;
}
.cho-item-title:hover { color: #fff; }
.cho-item-meta { display: flex; gap: 6px; }
.cho-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.cho-tag-course { background: rgba(255,255,255,.07); color: #888; }
.cho-tag-klip   { background: rgba(164,16,52,.25);   color: #f08090; }
.cho-item-price { font-size: var(--fs-sm); font-weight: 700; color: #fff; flex-shrink: 0; }

/* ── Breakdown ── */
.cho-breakdown { display: flex; flex-direction: column; gap: 0; }
.cho-row-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    font-size: var(--fs-sm);
    color: #999;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.cho-row-line:last-child { border-bottom: none; }
.cho-green { color: #4caf82; font-weight: 600; }

.cho-coupon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(76,175,130,.15);
    border: 1px solid rgba(76,175,130,.25);
    color: #4caf82;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    margin-left: 6px;
}
.cho-coupon-x { color: #666; text-decoration: none; margin-left: 3px; }
.cho-coupon-x:hover { color: #fff; }

.cho-credit-row { flex-direction: column; }
.cho-credit-row form { width: 100%; }
.cho-credit-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    width: 100%;
    justify-content: space-between;
    font-size: var(--fs-sm);
    color: #999;
}
.cho-credit-label input[type=checkbox] { accent-color: #A41034; width: 15px; height: 15px; }
.cho-credit-label span { display: flex; flex-direction: column; }
.cho-credit-label small { font-size: var(--fs-xs); color: #666; margin-top: 1px; }

/* ── Total bar ── */
.cho-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px -32px -36px;
    padding: 18px 32px;
    background: #A41034;
}
.cho-total-label { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.8); }
.cho-total-amount { font-size: var(--fs-2xl); font-weight: 800; color: #fff; }

/* ════════════════════════════════════════
   RIGHT  — payment form
   ════════════════════════════════════════ */
.cho-right { background: #fff; }
.cho-payment { padding: 36px 40px; height: 100%; }

/* ── Pay header ── */
.cho-pay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #f0eeeb;
}
.cho-pay-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: #1C1514;
}
.cho-brands { display: flex; align-items: center; gap: 7px; }
.cho-brands img {
    height: 26px;
    width: auto;
    border-radius: 4px;
    border: 1px solid #ebebeb;
}

/* ── Form fields ── */
.cho-pay-body { flex: 1; }
.cho-field { margin-bottom: 18px; }
.cho-field-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 0;
}
.cho-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #444;
    margin-bottom: 7px;
}
.cho-tooltip { color: #ccc; cursor: help; font-size: var(--fs-xs); }
.cho-tooltip:hover { color: #A41034; }

.cho-input-wrap { position: relative; }
.cho-input {
    width: 100%;
    height: 52px;
    padding: 0 48px 0 16px;
    font-size: var(--fs-md);
    color: #1C1514;
    background: #fafafa;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    outline: none;
    font-family: 'Courier New', monospace;
    letter-spacing: .04em;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.cho-input::placeholder { color: #bbb; font-family: 'Inter', sans-serif; font-size: var(--fs-sm); letter-spacing: 0; }
.cho-input:focus {
    background: #fff;
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.1);
}
.cho-input--err {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231,76,60,.1) !important;
}
.cho-input-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    font-size: var(--fs-sm);
    pointer-events: none;
}

/* brand detect inside card number */
.cho-brand-detect {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
}
.cho-brand-detect img { height: 22px; border-radius: 3px; opacity: 1; transition: opacity .15s; }
#card_number { padding-right: 105px; }

/* ── Error ── */
.cho-error {
    display: none;
    align-items: center;
    gap: 9px;
    background: #fff0f0;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 11px 16px;
    margin: 16px 0;
    font-size: var(--fs-sm);
    color: #c0392b;
}
.cho-error .fa-exclamation-circle { color: #e74c3c; flex-shrink: 0; }

/* ── Pay button ── */
.cho-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    background: #A41034;
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 24px;
    transition: background .18s, transform .12s, box-shadow .18s;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    letter-spacing: .01em;
}
.cho-pay-btn:hover:not(:disabled) {
    background: #8f0e2b;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(164,16,52,.4);
}
.cho-pay-btn:active:not(:disabled) { transform: translateY(0); }
.cho-pay-btn:disabled { opacity: .65; cursor: not-allowed; }
.cho-lock-icon { width: 18px; height: 18px; flex-shrink: 0; }
.cho-pay-amount { font-weight: 800; margin-left: 4px; }

/* ── Free enrolment ── */
.cho-free-block {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f5fff8;
    border: 1.5px solid #b7e9c9;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 20px;
}
.cho-free-icon { font-size: var(--fs-3xl); color: #2ecc71; flex-shrink: 0; }
.cho-free-block strong { font-size: var(--fs-base); color: #1C1514; display: block; }
.cho-free-block p { font-size: var(--fs-sm); color: #888; margin: 4px 0 0; }
.cho-enroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    background: #2ecc71;
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .18s, transform .12s;
    margin-top: 8px;
}
.cho-enroll-btn:hover { background: #27ae60; transform: translateY(-1px); }

/* ── Trust strip ── */
.cho-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f0eeeb;
}
.cho-trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.cho-trust-item i { color: #A41034; font-size: var(--fs-xs); }

/* ════════════════════════════════════════
   Responsive
   ════════════════════════════════════════ */
@media (max-width: 991px) {
    .cho-left { min-height: unset; }
    .cho-summary { position: static; padding: 28px 24px 32px; }
    .cho-payment { padding: 28px 24px; }
    .cho-total-bar { margin: 16px -24px -32px; padding: 16px 24px; }
}
@media (max-width: 575px) {
    .cho-wrap { padding: 20px 0 40px; }
    .cho-row { border-radius: 10px; }
    .cho-summary { padding: 22px 18px 28px; }
    .cho-payment { padding: 22px 18px; }
    .cho-total-bar { margin: 14px -18px -28px; padding: 14px 18px; }
    .cho-total-amount { font-size: var(--fs-xl); }
    .cho-field-2col { grid-template-columns: 1fr; }
    .cho-pay-header { flex-direction: column; align-items: flex-start; }
    .cho-brands { display: none; }
    .cho-trust { gap: 12px; }
}


/* ════════════════════════════════════════════════════════════
   CHECKOUT PAGE  ckp-*
   Theme: Primary #A41034  |  Dark #1C1514  |  Neutral #FFFFFF
   ════════════════════════════════════════════════════════════ */

.ckp-page { padding: 40px 0 70px; background: #f4f4f2; min-height: 60vh; }

/* ── Page head ── */
.ckp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}
.ckp-title { font-size: var(--fs-2xl); font-weight: 800; color: #1C1514; margin: 0 0 4px; font-family: 'Outfit', sans-serif; }
.ckp-breadcrumb { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); }
.ckp-breadcrumb a { color: #888; text-decoration: none; }
.ckp-breadcrumb a:hover { color: #A41034; }
.ckp-breadcrumb span { color: #A41034; font-weight: 600; }
.ckp-breadcrumb .fa-chevron-right { font-size: 9px; color: #ccc; }
.ckp-secure-badge {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-sm); font-weight: 600; color: #555;
    background: #fff; border: 1px solid #e0e0e0;
    padding: 7px 14px; border-radius: 20px;
}
.ckp-secure-badge .fa-lock { color: #2ecc71; }

/* ── Alert ── */
.ckp-alert {
    display: flex; align-items: center; gap: 9px;
    background: #fff9e6; border: 1px solid #f5c518;
    border-radius: 8px; padding: 11px 16px;
    margin-bottom: 20px; font-size: var(--fs-sm); color: #7a5800;
}
.ckp-alert .fa-exclamation-triangle { color: #f5c518; }

/* ════ LEFT — Items card ════ */
.ckp-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0,0,0,.06);
}
.ckp-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}
.ckp-card-title {
    font-size: var(--fs-md); font-weight: 700; color: #1C1514; margin: 0;
    display: flex; align-items: center; gap: 9px;
}
.ckp-card-title .fa-shopping-cart { color: #A41034; }
.ckp-count-badge {
    background: #A41034; color: #fff;
    font-size: var(--fs-xs); font-weight: 700;
    padding: 3px 11px; border-radius: 20px;
}

/* ── Item rows ── */
.ckp-items { padding: 8px 0; }
.ckp-item {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid #f5f5f5;
    transition: background .15s;
}
.ckp-item:last-child { border-bottom: none; }
.ckp-item:hover { background: #fafafa; }
.ckp-item-img-link { flex-shrink: 0; }
.ckp-item-img {
    width: 80px; height: 54px; object-fit: cover;
    border-radius: 8px; border: 1px solid #ebebeb;
}
.ckp-item-body { flex: 1; min-width: 0; }
.ckp-item-name {
    font-size: var(--fs-base); font-weight: 600; color: #1C1514;
    text-decoration: none; display: block;
    margin-bottom: 7px; line-height: var(--lh-snug);
}
.ckp-item-name:hover { color: #A41034; }
.ckp-item-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ckp-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-xs); font-weight: 600;
    padding: 3px 9px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: .04em;
}
.ckp-tag--course { background: #f0f0f0; color: #666; }
.ckp-tag--klip   { background: rgba(164,16,52,.1); color: #A41034; }
.ckp-item-access { font-size: var(--fs-xs); color: #aaa; display: flex; align-items: center; gap: 4px; }
.ckp-item-access .fa-infinity { color: #A41034; font-size: var(--fs-xs); }
.ckp-item-price { font-size: var(--fs-md); font-weight: 800; color: #1C1514; flex-shrink: 0; }

/* ── Trust bar ── */
.ckp-trust {
    display: flex; align-items: center; gap: 0;
    background: #fff; border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0,0,0,.04);
    margin-top: 16px; overflow: hidden;
}
.ckp-trust-item {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 7px; font-size: var(--fs-xs); font-weight: 600; color: #666;
    padding: 14px 10px;
    border-right: 1px solid #f0f0f0;
}
.ckp-trust-item:last-child { border-right: none; }
.ckp-trust-item i { color: #A41034; }

/* ════ RIGHT — Summary card ════ */
.ckp-summary {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 2px 20px rgba(0,0,0,.06);
    position: sticky;
    top: 90px;
}

/* ── Who --*/
.ckp-who {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 4px;
}
.ckp-av-wrap { position: relative; flex-shrink: 0; }
.ckp-av {
    width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; border: 2px solid #A41034;
}
.ckp-av-init {
    display: none; width: 44px; height: 44px; border-radius: 50%;
    background: #A41034; color: #fff;
    font-size: var(--fs-base); font-weight: 700;
    align-items: center; justify-content: center;
}
.ckp-who-name { font-size: var(--fs-sm); font-weight: 700; color: #1C1514; }
.ckp-who-email { font-size: var(--fs-xs); color: #999; margin-top: 1px; }

.ckp-summary-divider { height: 1px; background: #f0f0f0; margin: 18px 0; }

/* ── Breakdown ── */
.ckp-breakdown { display: flex; flex-direction: column; gap: 0; margin-bottom: 4px; }
.ckp-breakdown-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px; padding: 9px 0;
    font-size: var(--fs-sm); color: #666;
    border-bottom: 1px solid #f5f5f5;
}
.ckp-breakdown-row:last-child { border-bottom: none; }
.ckp-green { color: #27ae60; font-weight: 700; }

.ckp-coupon-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(39,174,96,.1); border: 1px solid rgba(39,174,96,.25);
    color: #27ae60; font-size: var(--fs-xs); font-weight: 600;
    padding: 2px 8px; border-radius: 20px; margin-left: 6px;
}
.ckp-coupon-remove { color: #aaa; text-decoration: none; margin-left: 3px; font-size: var(--fs-sm); }
.ckp-coupon-remove:hover { color: #A41034; }

.ckp-credit-row { flex-direction: column; padding: 6px 0; }
.ckp-credit-row form { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.ckp-credit-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-sm); color: #666; }
.ckp-credit-label input[type=checkbox] { accent-color: #A41034; width: 15px; height: 15px; }
.ckp-credit-text { display: flex; flex-direction: column; }
.ckp-credit-text small { font-size: var(--fs-xs); color: #aaa; margin-top: 1px; }

/* ── Total ── */
.ckp-total-row {
    display: flex; align-items: center; justify-content: space-between;
    background: #1C1514; color: #fff;
    border-radius: 10px; padding: 14px 18px;
    margin: 14px 0 20px;
    font-size: var(--fs-sm); font-weight: 700;
}
.ckp-total-val { font-size: var(--fs-xl); font-weight: 800; color: #fff; }

/* ── Pay button ── */
.ckp-pay-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; height: 54px;
    background: #A41034;
    color: #fff; font-size: var(--fs-md); font-weight: 700;
    border: none; border-radius: 10px; cursor: pointer;
    transition: background .18s, transform .12s, box-shadow .18s;
    box-shadow: 0 4px 18px rgba(164,16,52,.3);
    letter-spacing: .01em; margin-bottom: 16px;
}
.ckp-pay-btn:hover { color: #FFFFFF; background: #8f0e2b; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(164,16,52,.4); }
.ckp-pay-btn:active { transform: translateY(0); }

.ckp-card-logos { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.ckp-card-logos img { height: 24px; border-radius: 4px; border: 1px solid #ebebeb; }

/* ── Free enroll ── */
.ckp-enroll-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 52px;
    background: #27ae60; color: #fff;
    font-size: var(--fs-base); font-weight: 700;
    border: none; border-radius: 10px; cursor: pointer;
    transition: background .18s;
}
.ckp-enroll-btn:hover { background: #219a52; }

/* ════════════════════════════════════════
   STRIPE PAYMENT MODAL
   ════════════════════════════════════════ */
.ckp-modal-dialog { max-width: 460px; }
.ckp-modal-content {
    border: none; border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* modal header */
.ckp-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    background: #1C1514; padding: 20px 24px;
}
.ckp-modal-brand { display: flex; align-items: center; gap: 14px; }
.ckp-modal-lock {
    width: 40px; height: 40px; border-radius: 50%;
    background: #A41034; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-md); flex-shrink: 0;
}
.ckp-modal-title { font-size: var(--fs-md); font-weight: 700; color: #fff; }
.ckp-modal-sub { font-size: var(--fs-xs); color: #888; margin-top: 1px; }
.ckp-modal-close {
    background: rgba(255,255,255,.08); border: none;
    color: #aaa; width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); transition: background .15s, color .15s; flex-shrink: 0;
}
.ckp-modal-close:hover { background: rgba(255,255,255,.15); color: #fff; }

/* amount bar */
.ckp-modal-amount-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: #A41034; padding: 14px 24px;
}
.ckp-modal-amount-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.75); }
.ckp-modal-amount-val { font-size: var(--fs-2xl); font-weight: 800; color: #fff; }

/* form body */
.ckp-modal-body { padding: 26px 24px 20px; background: #fff; }

.ckp-field { margin-bottom: 18px; }
.ckp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.ckp-label {
    display: flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: #555; margin-bottom: 7px;
}
.ckp-hint { color: #ccc; cursor: help; font-size: var(--fs-xs); }
.ckp-hint:hover { color: #A41034; }

.ckp-input-wrap { position: relative; }
.ckp-input {
    width: 100%; height: 50px;
    padding: 0 46px 0 16px;
    font-size: var(--fs-md); color: #1C1514;
    background: #fafafa; border: 1.5px solid #e4e4e4;
    border-radius: 9px; outline: none;
    font-family: 'Courier New', monospace; letter-spacing: .05em;
    transition: border-color .17s, box-shadow .17s, background .17s;
}
.ckp-input::placeholder { color: #bbb; font-family: 'Inter', sans-serif; font-size: var(--fs-sm); letter-spacing: 0; }
.ckp-input:focus { background: #fff; border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.1); }
.ckp-input--err { border-color: #e74c3c !important; box-shadow: 0 0 0 3px rgba(231,76,60,.1) !important; }
.ckp-input-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #ccc; font-size: var(--fs-sm); pointer-events: none; }

/* brand icons inside card number */
.ckp-brand-icons { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 4px; }
.ckp-brand-icons img { height: 22px; border-radius: 3px; opacity: 1; transition: opacity .15s; }
#card_number { padding-right: 108px; }

/* error */
.ckp-error {
    display: none; align-items: center; gap: 9px;
    background: #fff0f0; border: 1px solid #f5c6cb;
    border-radius: 8px; padding: 11px 14px;
    margin-bottom: 16px; font-size: var(--fs-sm); color: #c0392b;
}
.ckp-error .fa-exclamation-circle { color: #e74c3c; flex-shrink: 0; }

/* submit button */
.ckp-submit-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; height: 52px;
    background: #A41034; color: #fff;
    font-size: var(--fs-md); font-weight: 700;
    border: none; border-radius: 10px; cursor: pointer;
    transition: background .17s, transform .12s, box-shadow .17s;
    box-shadow: 0 4px 16px rgba(164,16,52,.3);
    letter-spacing: .01em;
}
.ckp-submit-btn:hover:not(:disabled) { background: #8f0e2b; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(164,16,52,.4); }
.ckp-submit-btn:active:not(:disabled) { transform: translateY(0); }
.ckp-submit-btn:disabled { opacity: .65; cursor: not-allowed; }
.ckp-submit-amount { font-weight: 800; margin-left: 4px; }

/* modal footer */
.ckp-modal-footer {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 8px; padding: 14px 24px;
    background: #f8f8f8; border-top: 1px solid #ebebeb;
}
.ckp-modal-footer img { height: 22px; border-radius: 3px; border: 1px solid #e8e8e8; }
.ckp-modal-footer-text { font-size: var(--fs-xs); color: #aaa; display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.ckp-modal-footer-text .fa-lock { color: #2ecc71; }

/* ════ Responsive ════ */
@media (max-width: 767px) {
    .ckp-trust { flex-direction: column; gap: 0; }
    .ckp-trust-item { border-right: none; border-bottom: 1px solid #f0f0f0; justify-content: flex-start; padding: 12px 20px; }
    .ckp-trust-item:last-child { border-bottom: none; }
    .ckp-field-row { grid-template-columns: 1fr; }
    .ckp-modal-dialog { max-width: 95%; margin: 10px auto; }
}
@media (max-width: 575px) {
    .ckp-page { padding: 24px 0 50px; }
    .ckp-head { flex-direction: column; align-items: flex-start; }
    .ckp-item { flex-wrap: wrap; }
    .ckp-item-img { width: 64px; height: 44px; }
    .ckp-item-price { width: 100%; text-align: right; }
    .ckp-summary { position: static; }
}




.ig-shorts-page {
    --ig-brand:        #A41034;
    --ig-brand-soft:   #c8324f;
    --ig-brand-glow:   rgba(164, 16, 52, 0.55);
    --ig-rose:         #ff9bb0;
    --ig-bg:           #060607;
    --ig-bg-2:         #0d0d10;
    --ig-stage:        #000;
    --ig-ink:          #ffffff;
    --ig-ink-70:       rgba(255, 255, 255, 0.72);
    --ig-ink-45:       rgba(255, 255, 255, 0.46);
    --ig-line:         rgba(255, 255, 255, 0.12);
    --ig-glass:        rgba(255, 255, 255, 0.10);
    --ig-glass-hi:     rgba(255, 255, 255, 0.20);
    --ig-radius:       22px;
    --ig-hero-h:       72px;
    --ig-font: var(--tg-body-font-family, "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif);

    font-family: var(--ig-font);
    background: var(--ig-bg);
    color: var(--ig-ink);
    -webkit-font-smoothing: antialiased;
}
.ig-shorts-page *,
.ig-shorts-page *::before,
.ig-shorts-page *::after { box-sizing: border-box; }

/* Full-bleed: escape any container padding the LMS layout adds */
.ig-shorts-hero,
.ig-shorts-feed,
.ig-shorts-empty {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
}

/* ════ HERO BAR ════ */
.ig-shorts-hero {
    position: relative;
    z-index: 4;
    height: var(--ig-hero-h);
    display: flex;
    align-items: center;
    background: linear-gradient(100deg, #1a0509 0%, #0c0c0e 60%, #0c0c0e 100%);
    border-bottom: 1px solid var(--ig-line);
    overflow: hidden;
}
.ig-shorts-hero::before {
    content: "";
    position: absolute;
    left: -10%;
    top: -120%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, var(--ig-brand-glow) 0%, transparent 68%);
    filter: blur(8px);
    pointer-events: none;
}
.ig-shorts-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 44px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.ig-shorts-hero__brand {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}
.ig-shorts-hero__mark {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: var(--fs-md);
    background: linear-gradient(150deg, var(--ig-brand) 0%, #6b0a22 100%);
    box-shadow: 0 6px 18px var(--ig-brand-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ig-shorts-hero__titles { min-width: 0; line-height: 1.1; }
.ig-shorts-hero__eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ig-rose);
    margin-bottom: 3px;
}
.ig-shorts-hero__title {
    margin: 0;
    font-size: clamp(17px, 2.4vw, 21px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ig-shorts-hero__meta {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}
.ig-shorts-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    border-radius: 999px;
    background: var(--ig-glass);
    border: 1px solid var(--ig-line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ig-ink-70);
    white-space: nowrap;
}
.ig-shorts-hero__badge i { color: var(--ig-rose); font-size: var(--fs-xs); }
.ig-shorts-hero__badge--count strong { color: #fff; font-weight: 800; }
@media (max-width: 600px) {
    .ig-shorts-hero__badge--hide-sm { display: none; }
}

/* ════ FEED ════ */
.ig-shorts-feed {
    height: calc(100vh - var(--header-h, 70px) - var(--ig-hero-h));
    height: calc(100dvh - var(--header-h, 70px) - var(--ig-hero-h));
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--ig-bg);
    position: relative;
    overscroll-behavior-y: contain;
}
.ig-shorts-feed::-webkit-scrollbar { display: none; }

/* Each short fills the feed viewport and centres its stage */
.ig-shorts-feed .ig-short-card {
    position: relative;
    height: calc(100vh - var(--header-h, 70px) - var(--ig-hero-h));
    height: calc(100dvh - var(--header-h, 70px) - var(--ig-hero-h));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ig-bg);
    overflow: hidden;
}

/* Ambient cinematic glow behind the stage (desktop) */
.ig-shorts-feed .ig-short-card::before {
    content: "";
    position: absolute;
    width: min(78vw, 720px);
    height: min(78vw, 720px);
    background: radial-gradient(circle, var(--ig-brand-glow) 0%, transparent 60%);
    opacity: 0.5;
    filter: blur(46px);
    pointer-events: none;
    z-index: 0;
}

/* The framed player stage */
.ig-short-stage {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Video */
.ig-short-video {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    background: #000;
}

/* Desktop: contain the short in a rounded 9:16 frame */
@media (min-width: 768px) {
    .ig-shorts-feed .ig-short-card { padding: 26px 0; }
    .ig-short-stage {
        height: 100%;
        aspect-ratio: 9 / 16;
        width: auto;
        max-width: 460px;
        border-radius: var(--ig-radius);
        overflow: hidden;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
    }
    .ig-short-video { max-width: 460px; border-radius: var(--ig-radius); }
}

/* Tap-to-pause layer */
.ig-short-tap {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
}

/* Legibility gradients */
.ig-short-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.45) 42%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

/* ════ INFO OVERLAY (bottom-left) ════ */
.ig-short-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 22px 84px 26px 22px;
    pointer-events: none;
}

.ig-short-user {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
    pointer-events: all;
}
.ig-short-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.ig-short-username {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #fff;
    line-height: var(--lh-tight);
    text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.ig-short-username span {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ig-ink-45);
}
.ig-short-follow {
    margin-left: 4px;
    height: 32px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background: transparent;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.ig-short-follow:hover { background: #fff; color: #111; border-color: #fff; }
.ig-short-follow.is-following { border-color: rgba(255,255,255,0.28); color: var(--ig-ink-70); }

.ig-short-title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: #fff;
    line-height: var(--lh-snug);
    margin: 0 0 6px;
    text-shadow: 0 1px 5px rgba(0,0,0,0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ig-short-desc {
    font-size: var(--fs-sm);
    color: var(--ig-ink-70);
    line-height: 1.55;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Lesson chip → links back into the course */
.ig-short-klip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 15px 8px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid var(--ig-glass-hi);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    pointer-events: all;
    transition: background 0.16s, transform 0.16s;
    max-width: 100%;
}
.ig-short-klip:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.ig-short-klip i { color: var(--ig-rose); font-size: var(--fs-sm); }
.ig-short-klip span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ig-short-klip .ig-short-klip__go {
    margin-left: 2px;
    opacity: 0.65;
    font-size: var(--fs-xs);
}

/* ════ ACTION RAIL (right) ════ */
.ig-short-actions {
    position: absolute;
    bottom: 26px;
    right: 16px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.ig-short-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.ig-short-btn .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 21px;
    color: #fff;
    background: var(--ig-glass);
    border: 1px solid var(--ig-glass-hi);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), background 0.16s;
}
.ig-short-btn:hover .icon { background: rgba(255, 255, 255, 0.24); transform: translateY(-2px); }
.ig-short-btn:active .icon { transform: scale(0.92); }
.ig-short-btn .cnt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.01em; }

/* Liked / disliked / saved states */
.ig-short-btn.liked .icon {
    background: var(--ig-brand);
    border-color: transparent;
    box-shadow: 0 6px 20px var(--ig-brand-glow);
    animation: ig-pop 0.32s cubic-bezier(.34,1.56,.64,1);
}
.ig-short-btn.disliked .icon { background: rgba(255,255,255,0.30); border-color: transparent; }
.ig-short-btn.saved .icon {
    background: #fff;
    color: #111;
    border-color: transparent;
}
@keyframes ig-pop {
    0% { transform: scale(0.7); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* More dropdown */
.ig-short-more { position: relative; }
.ig-short-dropdown {
    position: absolute;
    bottom: 56px;
    right: 0;
    min-width: 190px;
    padding: 7px;
    border-radius: 14px;
    background: rgba(16, 16, 20, 0.94);
    border: 1px solid var(--ig-line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    display: none;
    z-index: 20;
}
.ig-short-dropdown.open {
    display: block;
    animation: ig-rise 0.18s ease both;
}
@keyframes ig-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ig-short-dropdown a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border-radius: 9px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ig-ink-70);
    text-decoration: none;
    transition: background 0.14s, color 0.14s;
}
.ig-short-dropdown a:hover { background: rgba(164, 16, 52, 0.22); color: #fff; text-decoration: none; }
.ig-short-dropdown a i { width: 16px; text-align: center; font-size: var(--fs-sm); color: var(--ig-rose); }

/* ════ TOP-RIGHT CONTROLS (mute) ════ */
.ig-short-mute-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 6;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: var(--fs-sm);
    cursor: pointer;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--ig-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.16s;
}
.ig-short-mute-btn:hover { background: rgba(0, 0, 0, 0.7); }

.ig-short-mute-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: var(--fs-xs);
    color: #fff;
}
.ig-short-mute-badge.visible { display: flex; }

/* Tap play/pause flash */
.ig-short-play-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 10;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: var(--fs-3xl);
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
}
.ig-short-play-flash.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ════ SCRUBBER ════ */
.ig-short-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    height: 16px;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    pointer-events: all;
}
.ig-short-progress__track {
    position: relative;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.22);
    transition: height 0.14s;
}
.ig-short-progress:hover .ig-short-progress__track { height: 6px; }
.ig-short-progress__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: var(--ig-brand);
    box-shadow: 0 0 8px var(--ig-brand-glow);
}
.ig-short-progress__thumb {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%) scale(0);
    box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    transition: transform 0.14s;
}
.ig-short-progress:hover .ig-short-progress__thumb { transform: translate(-50%, -50%) scale(1); }

/* On desktop the scrubber / overlay sit inside the rounded frame.
   Action rail + mute stay INSIDE the stage (robust regardless of
   the height-constrained frame width). */
@media (min-width: 768px) {
    .ig-short-overlay { padding: 22px 80px 30px 22px; }
}

/* ════ COMMENTS · slide-in panel (desktop) / bottom sheet (mobile) ════ */
.ig-short-comments-scrim {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
}
.ig-short-comments-scrim.open { opacity: 1; visibility: visible; }

.ig-short-comments {
    position: fixed;
    z-index: 1100;
    background: var(--ig-bg-2);
    color: var(--ig-ink);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--ig-line);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    /* desktop: right dock */
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 92vw;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(.4,0,.2,1);
}
.ig-short-comments.open { transform: translateX(0); }

@media (max-width: 767px) {
    .ig-short-comments {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 78vh;
        border-left: none;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        transform: translateY(100%);
    }
    .ig-short-comments.open { transform: translateY(0); }
}

.ig-short-comments__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ig-line);
    flex-shrink: 0;
}
.ig-short-comments__head h4 {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 800;
}
.ig-short-comments__head h4 span { color: var(--ig-ink-45); font-weight: 600; margin-left: 4px; }
.ig-short-comments__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ig-line);
    background: var(--ig-glass);
    color: var(--ig-ink-70);
    font-size: var(--fs-base);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.16s, color 0.16s;
}
.ig-short-comments__close:hover { background: rgba(255,255,255,0.2); color: #fff; }

.ig-short-comments__list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 20px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.ig-short-comments__list::-webkit-scrollbar { width: 6px; }
.ig-short-comments__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 6px; }

.ig-comment {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ig-comment:last-child { border-bottom: none; }
.ig-comment img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ig-comment__body { min-width: 0; flex: 1; }
.ig-comment__name {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #fff;
}
.ig-comment__name time {
    font-weight: 500;
    color: var(--ig-ink-45);
    margin-left: 7px;
    font-size: 11.5px;
}
.ig-comment__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--ig-ink-70);
    margin: 3px 0 7px;
}
.ig-comment__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: var(--fs-xs);
    color: var(--ig-ink-45);
}
.ig-comment__actions button {
    background: none;
    border: none;
    color: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
}
.ig-comment__actions button:hover { color: #fff; }
.ig-comment__actions button.liked { color: var(--ig-brand-soft); }

.ig-short-comments__compose {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--ig-line);
    background: var(--ig-bg);
}
.ig-short-comments__compose img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ig-short-comments__compose input {
    flex: 1;
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--ig-line);
    background: var(--ig-glass);
    color: #fff;
    font-size: var(--fs-sm);
    font-family: inherit;
    outline: none;
    transition: border-color 0.16s;
}
.ig-short-comments__compose input::placeholder { color: var(--ig-ink-45); }
.ig-short-comments__compose input:focus { border-color: var(--ig-brand-soft); }
.ig-short-comments__compose button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--ig-brand);
    color: #fff;
    font-size: var(--fs-base);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.16s, transform 0.16s;
}
.ig-short-comments__compose button:hover { background: var(--ig-brand-soft); transform: scale(1.05); }

/* ════ DESKTOP SCROLL HINT ════ */
.ig-short-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--ig-ink-45);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    animation: ig-bob 1.8s ease-in-out infinite;
}
@keyframes ig-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.7; }
    50%      { transform: translateX(-50%) translateY(5px); opacity: 1; }
}
@media (max-width: 767px) { .ig-short-scroll-hint { display: none; } }

/* ════ EMPTY STATE ════ */
.ig-shorts-empty {
    height: calc(100vh - var(--header-h, 70px) - var(--ig-hero-h));
    height: calc(100dvh - var(--header-h, 70px) - var(--ig-hero-h));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    background:
        radial-gradient(circle at 50% 36%, rgba(164,16,52,0.18) 0%, transparent 55%),
        var(--ig-bg);
    color: #fff;
}
.ig-shorts-empty__icon {
    width: 92px;
    height: 92px;
    border-radius: 26px;
    display: grid;
    place-items: center;
    font-size: var(--fs-4xl);
    color: var(--ig-rose);
    background: var(--ig-glass);
    border: 1px solid var(--ig-line);
    margin-bottom: 24px;
}
.ig-shorts-empty h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 10px; }
.ig-shorts-empty p { color: var(--ig-ink-45); font-size: var(--fs-sm); max-width: 360px; margin: 0 0 24px; line-height: var(--lh-normal); }
.ig-shorts-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--ig-brand);
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: background 0.16s, transform 0.16s;
}
.ig-shorts-empty__cta:hover { background: var(--ig-brand-soft); color: #fff; transform: translateY(-1px); text-decoration: none; }

/* ════ REDUCED MOTION ════ */
@media (prefers-reduced-motion: reduce) {
    .ig-shorts-page * { animation: none !important; transition: none !important; }
}

/* ════ Override stale rules from old non-cinematic shorts CSS block ════
   Old 600px media query left transform/width on overlay; old section
   applied button-level scale on hover instead of icon-level. Both are
   corrected here using higher specificity (.ig-shorts-page scope). */
@media (min-width: 600px) {
    .ig-shorts-page .ig-short-overlay {
        width: auto;
        transform: none;
    }
}
.ig-shorts-page .ig-short-btn:hover { transform: none; }



.logo-img{
    filter: brightness(0) saturate(100%) invert(18%) sepia(85%) saturate(2214%) hue-rotate(330deg) brightness(85%) contrast(101%);
}

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM LOGIN PAGE — iGurus
   SaaS-quality redesign: Stripe / Notion / Linear aesthetic
   All selectors scoped to .ig-login-* and .ig-lbp-* prefixes
   ════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   PAGE WRAPPER
   Full-viewport two-column layout; no scrollbar on the outer wrapper
   ────────────────────────────────────────────────────────────────────── */
.ig-login-page {
    display: flex;
    min-height: calc(100vh - var(--header-h, 70px));
    background: #FFFFFF;
    /* Counteract the 5vw body padding applied globally */
    margin-left:  -5vw;
    margin-right: -5vw;
    width: calc(100% + 10vw);
}

/* ──────────────────────────────────────────────────────────────────────
   LEFT PANEL — White form column
   ────────────────────────────────────────────────────────────────────── */
.ig-login-form-panel {
    flex: 0 0 44%;
    max-width: 44%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 64px;
    background: #ffffff;
    overflow-y: auto;
    position: relative;
    /* Thin crimson right border separates panels */
    border-right: 1px solid #f0efed;
}

/* Subtle corner accent on form panel */
.ig-login-form-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    
}

/* ── Logo ── */
.ig-login-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 5px;
    transition: opacity .2s;
}
.ig-login-logo:hover { opacity: .82; }
.ig-login-logo img {
  
    max-width: 200px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ── Heading ── */
.ig-login-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: #1C1514;
    line-height: 1.18;
    margin: 0 0 6px;
    letter-spacing: -.02em;
}
.ig-login-sub {
    font-size: var(--fs-sm);
    color: #6b7280;
    margin: 0 0 28px;
    line-height: 1.55;
}

/* ── Social login row ── */
.ig-login-social {
    display: block;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.ig-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1.5px solid #e4e2de;
    border-radius: 8px;
    background: #fafaf8;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, background .18s, color .18s;
    white-space: nowrap;
}
.ig-social-btn:hover {
    background: #fff;
    text-decoration: none;
}
.ig-social-btn img { width: 18px; height: 18px; flex-shrink: 0; }
.ig-social-btn i   { font-size: var(--fs-md); flex-shrink: 0; }

/* Google hover */
.ig-social-btn--google:hover {
    border-color: #4285F4;
    box-shadow: 0 0 0 3px rgba(66,133,244,.10);
    color: #4285F4;
}
/* LinkedIn */
.ig-social-btn--linkedin { color: #0A66C2; }
.ig-social-btn--linkedin:hover {
    border-color: #0A66C2;
    box-shadow: 0 0 0 3px rgba(10,102,194,.10);
    color: #0A66C2;
}

/* ── Divider ── */
.ig-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-size: 11.5px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ig-login-divider::before,
.ig-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e4e2de;
}

/* ── Alert banner ── */
.ig-login-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    margin-bottom: 16px;
}
.ig-login-alert i   { flex-shrink: 0; margin-top: 2px; }
.ig-login-alert a   { color: #dc2626; font-weight: 700; text-decoration: underline; }

/* ── Form fields ── */
.ig-login-field {
    margin-bottom: 16px;
    position: relative;
}

.ig-login-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    letter-spacing: .01em;
}
.ig-login-label span { color: #ef4444; margin-left: 1px; }

/* Input wrapper positions icon + eye toggle absolutely */
.ig-login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ig-login-field-icon {
    position: absolute;
    left: 14px;
    color: #c2bfbb;
    font-size: var(--fs-sm);
    pointer-events: none;
    z-index: 1;
    transition: color .18s;
}
/* Icon goes crimson when field is focused */
.ig-login-input-wrap:focus-within .ig-login-field-icon {
    color: #A41034;
}

.ig-login-input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border: 1.5px solid #e4e2de;
    border-radius: 8px;
    font-size: var(--fs-sm);
    color: #111827;
    background: #fafaf8;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
    box-sizing: border-box;
    -webkit-appearance: none;
    line-height: var(--lh-normal);
}
.ig-login-input:focus {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.09);
    background: #ffffff;
}
.ig-login-input.is-invalid {
    border-color: #ef4444;
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(239,68,68,.08);
}
/* Password: extra right padding for eye toggle */
.ig-login-input--pw { padding-right: 44px; }

.ig-login-err {
    display: block;
    font-size: 11.5px;
    color: #ef4444;
    margin-top: 5px;
    font-weight: 500;
    min-height: 16px;
    line-height: var(--lh-snug);
}

/* ── Eye toggle button ── */
.ig-login-eye {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #a0a0a0;
    font-size: var(--fs-sm);
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: color .18s, background .18s;
    z-index: 1;
}
.ig-login-eye:hover { color: #A41034; background: rgba(164,16,52,.06); }

/* ── Remember me + Forgot password row ── */
.ig-login-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 8px;
}
.ig-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}
.ig-login-remember input[type="checkbox"] {
    accent-color: #A41034;
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 3px;
}
.ig-login-forgot {
    font-size: var(--fs-sm);
    color: #A41034;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity .18s;
}
.ig-login-forgot:hover { opacity: .72; text-decoration: underline; }

/* ── Submit button ── */
.ig-login-submit {
    width: 100%;
    padding: 13px 20px;
    background: #A41034;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(164,16,52,.28), 0 1px 3px rgba(164,16,52,.20);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.ig-login-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
    pointer-events: none;
}
.ig-login-submit:hover {
    background: #860D2B;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(164,16,52,.38), 0 2px 6px rgba(164,16,52,.24);
}
.ig-login-submit:active { transform: translateY(0); }
.ig-login-submit i { font-size: var(--fs-sm); }

/* ── Sign up link ── */
.ig-login-signup-link {
    text-align: center;
    font-size: var(--fs-sm);
    color: #6b7280;
    margin: 0 0 10px;
}
.ig-login-signup-link a {
    color: #A41034;
    font-weight: 700;
    text-decoration: none;
}
.ig-login-signup-link a:hover { text-decoration: underline; }

/* ── Terms line ── */
.ig-login-terms {
    text-align: center;
    font-size: 11.5px;
    color: #c2bfbb;
    margin: 0;
    line-height: var(--lh-normal);
}
.ig-login-terms a { color: #9ca3af; text-decoration: underline; }
.ig-login-terms a:hover { color: #A41034; }


/* ──────────────────────────────────────────────────────────────────────
   RIGHT PANEL — Dark editorial branding
   ────────────────────────────────────────────────────────────────────── */
.ig-login-brand-panel {
    flex: 1;
    position: relative;
    background: #0f0f0f;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 52px;
}

/* ── Grid line pattern ── */
.ig-lbp-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}

/* ── Corner accent lines (like Linear) ── */
.ig-lbp-corner-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.ig-lbp-corner-lines::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 160px; height: 160px;
    /*border-top: 1px solid rgba(164,16,52,.28);
    border-right: 1px solid rgba(164,16,52,.28);*/
}
.ig-lbp-corner-lines::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 120px; height: 120px;/*
    border-bottom: 1px solid rgba(164,16,52,.20);
    border-left: 1px solid rgba(164,16,52,.20);*/
}

/* ── Crimson glow orbs ── */
.ig-lbp-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    animation: lbpGlow 10s ease-in-out infinite alternate;
}
.ig-lbp-glow--1 {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(164,16,52,.18) 0%, transparent 65%);
    top: -160px; left: -120px;
}
.ig-lbp-glow--2 {
    width: 320px; height: 320px;
    /*background: radial-gradient(circle, rgba(164,16,52,.12) 0%, transparent 65%);*/
    bottom: -80px; right: -60px;
    animation-duration: 13s;
    animation-delay: -5s;
}
@keyframes lbpGlow {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(22px, -18px) scale(1.06); }
    100% { transform: translate(-14px, 22px) scale(.94); }
}

/* ── Content wrapper ── */
.ig-lbp-content {
    position: relative;
    z-index: 1;
    /*max-width: 420px;*/
    width: 100%;
}

/* ── Logo mark ── */
.ig-lbp-brand {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 28px;
}
.ig-lbp-logo {
    max-height: 60px;
    width: auto;
     
    display: block;
    opacity: .9;
}

/* ── Progress bar ── */
.ig-lbp-progress-bar {
    height: 2px;
    background: rgba(255,255,255,.10);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 26px;
}
.ig-lbp-progress-fill {
    height: 100%;
    background: #A41034;
    width: 0;
    transition: width 8s linear;
    border-radius: 2px;
}

/* ── Slides ── */
.ig-lbp-slides { position: relative; min-height: 310px; }
.ig-lbp-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
    pointer-events: none;
}
.ig-lbp-slide.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
}
.ig-lbp-slide h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.22;
    margin: 0 0 10px;
    letter-spacing: -.02em;
    text-align: left;
}
.ig-lbp-slide > p {
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.52);
    line-height: 1.75;
    margin: 0 0 22px;
    text-align: left;
}

/* ── Feature list ── */
.ig-lbp-feat-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    text-align: left;
}
.ig-lbp-feat-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: background .2s, border-color .2s;
}
.ig-lbp-feat-list li:hover {
    background: rgba(164,16,52,.12);
    border-color: rgba(164,16,52,.28);
}
.ig-lbp-feat-icon {
    width: 34px; height: 34px;
    background: #A41034;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm);
    color: #fff;
    flex-shrink: 0;
}
.ig-lbp-feat-list li strong {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: rgba(255,255,255,.92);
    margin-bottom: 2px;
}
.ig-lbp-feat-list li span {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.40);
    display: block;
}

/* ── Stats row ── */
.ig-lbp-stats-row {
    display: flex;
    align-items: center;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255,255,255,.10);
    margin-top: 4px;
}
.ig-lbp-stat { text-align: left; padding: 0 20px 0 0; }
.ig-lbp-stat:first-child { padding-left: 0; }
.ig-lbp-stat strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 900;
    color: #A41034;
    -webkit-text-fill-color: #A41034;
    line-height: 1;
    font-family: 'Playfair Display', Georgia, serif;
}
.ig-lbp-stat span {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: rgba(255,255,255,.35);
    display: block;
    margin-top: 4px;
}
.ig-lbp-stat-div {
    width: 1px; height: 30px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
    margin-right: 20px;
}

/* ── Testimonials ── */
.ig-lbp-testimonial {
    background: rgba(255,255,255,.05);
    border: 1px solid #A41034;
    border-radius: 12px;
    padding: 16px 18px;
    text-align: left;
    margin-bottom: 12px;
    transition: border-color .2s;
}
.ig-lbp-testimonial:hover { border-color: #A41034; }
.ig-lbp-quote {
    font-size: 12.5px;
    color: #000;
    line-height: 1.72;
    margin: 0 0 12px;
    font-style: italic;
}
.ig-lbp-author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ig-lbp-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.ig-lbp-author-name {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #A41034;
}
.ig-lbp-author-role {
    display: block;
    font-size: 10.5px;
    color: #A41034;
    margin-top: 1px;
}

/* ── Dot navigation ── */
.ig-lbp-dots {
    display: flex;
    gap: 6px;
    margin-top: 22px;
    justify-content: flex-start;
}
.ig-lbp-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: width .3s ease, background .3s ease, border-radius .3s ease;
}
.ig-lbp-dot.active {
    width: 22px;
    border-radius: 4px;
    background: #A41034;
}
.ig-lbp-dot:hover:not(.active) { background: rgba(255,255,255,.40); }


/* ──────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .ig-login-form-panel { padding: 52px 52px; }
    .ig-login-brand-panel { padding: 48px 40px; }
}
@media (max-width: 991px) {
    .ig-login-page {
        flex-direction: column;
        min-height: auto;
    }
    .ig-login-form-panel {
        flex: none;
        max-width: 100%;
        padding: 44px 32px;
    }
    .ig-login-brand-panel { display: none; }
}
@media (max-width: 575px) {
    .ig-login-page {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    .ig-login-form-panel { padding: 36px 20px; }
    .ig-login-social    { grid-template-columns: 1fr; }
}

/* ─── Register / step-login layout supplements ─── */

/* 2-column form row grid */
.ig-login-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Allow tall register panel to scroll from top instead of centering */
.ig-login-form-panel--scroll {
    justify-content: flex-start;
}

/* Input without left icon (e.g. date, select) */
.ig-login-input--bare { padding-left: 14px; }

/* Role selector (reuse .ig-role-btns / .ig-role-btn; override purple tint) */
.ig-role-btn.active,
.ig-role-btn:hover {
    background: rgba(164,16,52,.06) !important;
}

@media (max-width: 575px) {
    .ig-login-row-2 { grid-template-columns: 1fr; }
}

/* ─── Forgot-password success banner ─── */
.ig-login-success {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
    margin-bottom: 16px;
}
.ig-login-success i { flex-shrink: 0; margin-top: 2px; }

/* ── Two-Factor Auth OTP boxes ── */
.ig-otp-wrap {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 8px 0 4px;
}
.ig-otp-digit {
    width: 46px;
    height: 54px;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-size: var(--fs-xl);
    font-weight: 700;
    text-align: center;
    color: #111827;
    background: #fff;
    transition: border-color .18s, box-shadow .18s;
    outline: none;
    caret-color: transparent;
}
.ig-otp-digit:focus { border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.12); }
.ig-otp-digit.filled { border-color: #A41034; background: #fff9fa; }
.ig-otp-digit.error-digit { border-color: #ef4444; background: #fef2f2; }

.ig-otp-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: var(--fs-xs);
    color: #6b7280;
    font-weight: 500;
}
.ig-otp-timer { color: #374151; font-weight: 600; font-size: var(--fs-xs); }
.ig-otp-timer--expired { color: #ef4444 !important; }

.ig-otp-error {
    font-size: 12.5px;
    color: #ef4444;
    min-height: 18px;
    margin: 4px 0 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── TFA email chip ── */
.ig-tfa-email-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #374151;
    margin: 4px 0 20px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ig-tfa-email-chip i { color: #A41034; flex-shrink: 0; }

/* ── TFA role submit buttons ── */
.ig-tfa-roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}
.ig-tfa-role-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s;
    font-family: 'Inter', system-ui, sans-serif;
}
.ig-tfa-role-btn:hover { border-color: #A41034; background: rgba(164,16,52,.05); color: #A41034; }
.ig-tfa-role-btn i { font-size: var(--fs-base); }

/* ── TFA bottom links ── */
.ig-tfa-links {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}
.ig-tfa-links p { margin: 0; font-size: var(--fs-sm); color: #6b7280; }
.ig-tfa-links a { color: #A41034; font-weight: 600; text-decoration: none; font-size: var(--fs-sm); }
.ig-tfa-links a:hover { text-decoration: underline; }

/* ── TFA security badge ── */
.ig-tfa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(164,16,52,.07);
    border: 1px solid rgba(164,16,52,.18);
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    color: #A41034;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

@media (max-width: 480px) {
    .ig-otp-digit { width: 40px; height: 48px; font-size: var(--fs-xl); }
    .ig-otp-wrap { gap: 6px; }
}


.ig-notif-page { max-width: 780px; }

/* Header */
.ig-notif-page__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.ig-notif-page__title-wrap { display: flex; align-items: center; gap: 14px; }
.ig-notif-page__icon { width: 44px; height: 44px; background: linear-gradient(135deg,#A41034,#1C1514); color: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); }
.ig-notif-page__title { font-size: var(--fs-xl); font-weight: 700; color: #111; margin: 0; }
.ig-notif-page__sub { font-size: var(--fs-sm); color: #9ca3af; margin: 2px 0 0; }
.ig-notif-page__mark-btn { background: transparent; border: 1.5px solid #A41034; color: #A41034; padding: 7px 16px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: all .2s; }
.ig-notif-page__mark-btn:hover { background: #A41034; color: #fff; }

/* Rows */
.ig-notif-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; margin-bottom: 8px; transition: background .15s; }
.ig-notif-row--unread { background: #fef2f4; border: 1px solid rgba(164,16,52,.1); }
.ig-notif-row--read { background: #f9fafb; border: 1px solid #eaebed; }
.ig-notif-row:hover { background: #fef2f4; }

.ig-notif-row__dot-col { padding-top: 6px; }
.ig-notif-row__dot { width: 8px; height: 8px; border-radius: 50%; background: #A41034; flex-shrink: 0; }
.ig-notif-row__dot--read { background: #d1d5db; }

.ig-notif-row__icon-col { flex-shrink: 0; }
.ig-notif-row__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); }

.ig-notif-row__body { flex: 1; }
.ig-notif-row__msg { font-size: var(--fs-sm); color: #374151; line-height: var(--lh-normal); margin: 0 0 4px; }
.ig-notif-row__time { font-size: var(--fs-xs); color: #9ca3af; }

.ig-notif-row__action { flex-shrink: 0; }
.ig-notif-row__btn { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; color: #A41034; text-decoration: none; background: rgba(164,16,52,.08); padding: 5px 12px; border-radius: 6px; white-space: nowrap; }
.ig-notif-row__btn:hover { background: #A41034; color: #fff; }

/* Empty */
.ig-notif-page__empty { text-align: center; padding: 60px 20px; }
.ig-notif-page__empty-icon { font-size: 52px; color: #e5e7eb; margin-bottom: 16px; }
.ig-notif-page__empty h3 { font-size: var(--fs-lg); color: #374151; margin-bottom: 8px; }
.ig-notif-page__empty p { font-size: var(--fs-sm); color: #9ca3af; }

/* Pagination */
.ig-notif-page__pagination { margin-top: 20px; display: flex; justify-content: center; }


.invalid-feedback {
    display: block;
    color: #dc2626;
    font-size: var(--fs-sm);
    margin-top: 6px;
    font-weight: 500;
}

.ann-input.is-invalid,
.ann-select.is-invalid,
.text-editor.is-invalid {
    border-color: #dc2626 !important;
}

.select2-selection.is-invalid {
    border-color: #dc2626 !important;
}


/* ── Course Action Dropdown ── */
.user_icon.learnings { position: relative; }

.ca-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    background: #ffffff;
    border: 1px solid #FFFFFF;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 10px 24px -4px rgba(0,0,0,.12);
    z-index: 9999;
    animation: ca-fadein .15s ease;
}
.user_icon.learnings.open .ca-dropdown { display: block; }

@keyframes ca-fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Header */
.ca-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    border-bottom: 1px solid #f0f0ee;
}
.ca-header-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #1C1514;
}
.ca-header-sub {
    font-size: var(--fs-xs);
    color: #888;
    margin-top: 2px;
}
.ca-header-close {
    width: 28px; height: 28px;
    border: none; background: transparent;
    border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #888; font-size: var(--fs-sm);
    transition: background .15s, color .15s;
}
.ca-header-close:hover { background: #f4f4f2; color: #1C1514; }

/* Sections */
.ca-section { padding: 6px 0; }
.ca-section + .ca-section { border-top: 1px solid #f0f0ee; }
.ca-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #aaa;
    padding: 8px 18px 4px;
}

/* Action items */
.ca-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px;
    cursor: pointer;
    transition: background .12s;
    text-decoration: none;
    color: #1C1514;
}
.ca-item:hover { background: #fafaf8; }

.ca-item-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); flex-shrink: 0;
    transition: background .12s;
}
.ca-icon--fav  { background: #FEF2F2; color: #DC2626; }
.ca-icon--arch { background: #F0F9FF; color: #0369A1; }
.ca-icon--gift { background: #F0FDF4; color: #16A34A; }
.ca-item:hover .ca-icon--fav  { background: #FEE2E2; }
.ca-item:hover .ca-icon--arch { background: #E0F2FE; }
.ca-item:hover .ca-icon--gift { background: #DCFCE7; }

/* Favorited active state */
.ca-item.is-favorited .ca-icon--fav i { color: #A41034; }

.ca-item-content { flex: 1; }
.ca-item-label {
    display: block;
    font-size: var(--fs-sm);
    color: #1C1514;
    line-height: var(--lh-snug);
}
.ca-item-desc {
    display: block;
    font-size: var(--fs-xs);
    color: #999;
    margin-top: 1px;
}

/* Toggle rows */
.ca-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 18px;
}
.ca-toggle-info {
    display: flex; align-items: center; gap: 12px;
}
.ca-toggle-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); flex-shrink: 0;
}
.ca-icon--notif { background: #FDF5F6; color: #A41034; }
.ca-icon--promo { background: #FFF7ED; color: #C2410C; }
.ca-toggle-label { font-size: var(--fs-sm); color: #1C1514; }
.ca-toggle-sub   { font-size: var(--fs-xs); color: #999; margin-top: 1px; }

/* Toggle switch */
.ca-toggle-sw {
    position: relative; width: 38px; height: 22px;
    flex-shrink: 0; cursor: pointer;
}
.ca-toggle-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.ca-toggle-track {
    position: absolute; inset: 0;
    background: #d1d5db;
    border-radius: 22px;
    transition: background .2s;
}
.ca-toggle-sw input:checked + .ca-toggle-track { background: #A41034; }
.ca-toggle-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%; background: #fff;
    transition: transform .2s;
    pointer-events: none;
}
.ca-toggle-sw input:checked ~ .ca-toggle-thumb { transform: translateX(16px); }

/* Share section */
.ca-share { padding: 12px 18px; }
.ca-share-icons {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.ca-share-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #FFFFFF;
    background: #fff;
    color: #666;
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.ca-share-btn:hover         { transform: scale(1.12); border-color: transparent; }
.ca-share-btn--fb:hover     { background: #1877F2; color: #fff; }
.ca-share-btn--pin:hover    { background: #E60023; color: #fff; }
.ca-share-btn--tw:hover     { background: #000;    color: #fff; }
.ca-share-btn--li:hover     { background: #0A66C2; color: #fff; }
.ca-share-btn--tg:hover     { background: #26A5E4; color: #fff; }

.ca-share-copy {
    margin-left: auto;
    display: flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: 600;
    color: #A41034;
    background: rgba(164,16,52,.07);
    border: none; border-radius: 6px;
    padding: 6px 10px; cursor: pointer;
    transition: background .15s;
}
.ca-share-copy:hover { background: rgba(164,16,52,.14); }

/* ── Force-reset old theme interference on action items ── */
.user_icon.learnings .ca-dropdown .ca-section .ca-item,
.user_icon.learnings .ca-dropdown .ca-section .ca-item * {
    all: unset;
    box-sizing: border-box;
}

/* Re-apply the correct styles after the reset */
.user_icon.learnings .ca-dropdown .ca-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 18px !important;
    cursor: pointer !important;
    transition: background .12s !important;
    text-decoration: none !important;
    color: #1C1514 !important;
    width: 100% !important;
}
.user_icon.learnings .ca-dropdown .ca-item:hover {
    background: #fafaf8 !important;
}
.user_icon.learnings .ca-dropdown .ca-item-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--fs-sm) !important;
    flex-shrink: 0 !important;
}
.user_icon.learnings .ca-dropdown .ca-icon--fav  { background: #FEF2F2 !important; color: #DC2626 !important; }
.user_icon.learnings .ca-dropdown .ca-icon--arch { background: #F0F9FF !important; color: #0369A1 !important; }
.user_icon.learnings .ca-dropdown .ca-icon--gift { background: #F0FDF4 !important; color: #16A34A !important; }

.user_icon.learnings .ca-dropdown .ca-item-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}
.user_icon.learnings .ca-dropdown .ca-item-label {
    font-size: var(--fs-sm) !important;
    font-weight: 500 !important;
    color: #1C1514 !important;
    line-height: var(--lh-snug) !important;
    display: block !important;
}
.user_icon.learnings .ca-dropdown .ca-item-desc {
    font-size: var(--fs-xs) !important;
    color: #999 !important;
    margin-top: 2px !important;
    display: block !important;
}

/* Hide any stray text nodes / old li structure inside .ca-section */
.user_icon.learnings .ca-dropdown .ca-section > li {
    display: none !important;
}

/* ── Fix 1: Separate each action item visually ── */
.user_icon.learnings .ca-dropdown .ca-section .ca-item {
    border-bottom: 1px solid #f5f5f3 !important;
}
.user_icon.learnings .ca-dropdown .ca-section .ca-item:last-child {
    border-bottom: none !important;
}

/* ── Fix 2: Icon background colors getting wiped by all:unset ── */
.user_icon.learnings .ca-dropdown .ca-item .ca-icon--fav {
    background: #FEF2F2 !important;
    color: #DC2626 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.user_icon.learnings .ca-dropdown .ca-item .ca-icon--arch {
    background: #F0F9FF !important;
    color: #0369A1 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.user_icon.learnings .ca-dropdown .ca-item .ca-icon--gift {
    background: #F0FDF4 !important;
    color: #16A34A !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* ── Fix 3: Icon i tag also got unset — restore font-size ── */
.user_icon.learnings .ca-dropdown .ca-item .ca-item-icon i,
.user_icon.learnings .ca-dropdown .ca-item .ca-item-icon .fas,
.user_icon.learnings .ca-dropdown .ca-item .ca-item-icon .far {
    font-size: var(--fs-sm) !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* ── Fix 4: Active hover background on each row ── */
.user_icon.learnings .ca-dropdown .ca-section .ca-item:hover {
    background: #f9f8f6 !important;
}
.user_icon.learnings .ca-dropdown .ca-section .ca-item:hover .ca-icon--fav  { background: #FEE2E2 !important; }
.user_icon.learnings .ca-dropdown .ca-section .ca-item:hover .ca-icon--arch { background: #E0F2FE !important; }
.user_icon.learnings .ca-dropdown .ca-section .ca-item:hover .ca-icon--gift { background: #DCFCE7 !important; }

/* ── Fix 5: Twitter/X icon circle is empty — check font awesome version ── */
/* If fab fa-x-twitter isn't in your FA version, use this fallback: */
.ca-share-btn--tw .fa-x-twitter::before {
    content: "𝕏";
    font-style: normal;
    font-family: serif;
    font-size: var(--fs-sm);
}
/* ── Final fix: force row height and separation on action items ── */
.user_icon.learnings .ca-dropdown .ca-section .ca-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 18px !important;
    min-height: 52px !important;           /* ← forces each row to have height */
    border-bottom: 1px solid #f0f0ee !important;
    background: transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: #1C1514 !important;
    width: 100% !important;
}
.user_icon.learnings .ca-dropdown .ca-section .ca-item:last-child {
    border-bottom: none !important;
}

/* Force content stack inside each item */
.user_icon.learnings .ca-dropdown .ca-section .ca-item .ca-item-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.user_icon.learnings .ca-dropdown .ca-section .ca-item .ca-item-label {
    display: block !important;
    font-size: var(--fs-sm) !important;
    font-weight: 500 !important;
    color: #1C1514 !important;
    line-height: var(--lh-snug) !important;
    white-space: nowrap !important;
}
.user_icon.learnings .ca-dropdown .ca-section .ca-item .ca-item-desc {
    display: block !important;
    font-size: var(--fs-xs) !important;
    color: #999 !important;
    line-height: var(--lh-snug) !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
}

.user_icon.learnings .ca-dropdown .ca-section {
    padding: 4px 0 !important;
    font-size: var(--fs-sm) !important;    /* ← parent font-size: 0 collapses children */
    line-height: var(--lh-normal) !important;  /* ← parent line-height: 0 collapses text */
}


/* ================================================================
   iGURUS — About Us Page  (.ig-au-*)
   Restructured narrative flow — flat cream/crimson design system.
   Amber (--ig-amber) is reserved exclusively for star ratings and
   is never used as a card/eyebrow accent on this page.
================================================================ */

/* ── Shared utilities ─────────────────────────────────────────── */
.ig-au-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ig-crimson);
    margin: 0 0 14px;
}
.ig-au-eyebrow::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    flex-shrink: 0;
}
.ig-au-eyebrow--onlight { color: rgba(255,255,255,.85); }
.ig-au-eyebrow svg { flex-shrink: 0; }

/* Button system */
.ig-au-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: 10px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    cursor: pointer;
    border: 2px solid transparent;
    line-height: 1;
}
.ig-au-btn svg { flex-shrink: 0; transition: transform .2s ease; }
.ig-au-btn:hover { text-decoration: none; transform: translateY(-2px); }
.ig-au-btn:hover svg { transform: translateX(3px); }

.ig-au-btn--primary {
    background: var(--ig-crimson, #A41034) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(164,16,52,.24);
}
.ig-au-btn--primary:hover {
    background: var(--ig-crimson-hover);
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(164,16,52,.32);
}

.ig-au-btn--ghost {
    background: #ffffff;
    color: var(--ig-ink) !important;
    border-color: var(--ig-border, rgba(17,24,39,.12));
    padding-left: 8px;
}
.ig-au-btn--ghost svg { color: var(--ig-crimson); }
.ig-au-btn--ghost:hover { border-color: var(--ig-crimson); color: var(--ig-crimson) !important; }
.ig-au-btn__play-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--ig-crimson);
    color: #ffffff;
    flex-shrink: 0;
    transition: background .18s ease;
}
.ig-au-btn__play-badge svg { color: #ffffff; margin-left: 1px; }
.ig-au-btn--ghost:hover .ig-au-btn__play-badge { background: var(--ig-crimson-hover); }

.ig-au-btn--white {
    background: #ffffff;
    color: var(--ig-crimson) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.14);
}
.ig-au-btn--white:hover {
    background: #ffffff;
    color: var(--ig-crimson) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

.ig-au-btn--outline-white {
    background: transparent;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.5);
}
.ig-au-btn--outline-white:hover {
    border-color: #ffffff;
    background: rgba(255,255,255,.08);
    color: #ffffff !important;
}


/* ================================================================
   HERO  (.ig-au-hero)
================================================================ */
.ig-au-hero {
    position: relative;
    background: #F5F1EA !important;
    overflow: hidden;
    padding: 56px 0 44px;
    margin-left:   -5vw !important;
    margin-right:  -5vw !important;
    padding-left:   5vw !important;
    padding-right:  5vw !important;
    width: calc(100% + 10vw) !important;
    box-sizing: border-box !important;
}
.ig-au-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.ig-au-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(17,24,39,.62);
    margin: 0 0 20px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.ig-au-breadcrumb a { color: rgba(17,24,39,.62); text-decoration: none; transition: color .2s ease; }
.ig-au-breadcrumb a:hover { color: var(--ig-crimson); }
.ig-au-breadcrumb svg { color: rgba(17,24,39,.62); opacity: .6; }
.ig-au-breadcrumb span { color: var(--ig-crimson); font-weight: 700; }

.ig-au-hero__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: var(--ig-ink);
    margin: 0 0 18px;
    text-transform: none;
}
.ig-au-hero__sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(17,24,39,.62);
    max-width: 620px;
    margin: 0 auto 30px;
}
.ig-au-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

/* Stats grid — individual elevated cards with an icon badge each, so the
   trust bar reads as distinct data points rather than one plain strip */
.ig-au-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;
}
.ig-au-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--ig-border, rgba(17,24,39,.10));
    border-radius: 16px;
    padding: 22px 10px 18px;
    box-shadow: 0 6px 20px rgba(17,24,39,.05);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ig-au-hero__stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(164,16,52,.12);
}
.ig-au-hero__stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(164,16,52,.08);
    color: var(--ig-crimson);
}
.ig-au-hero__stat-num {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    color: var(--ig-crimson);
    letter-spacing: -0.01em;
}
.ig-au-hero__stat-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(17,24,39,.62);
    text-transform: uppercase;
    letter-spacing: .04em;
}
@media (max-width: 575px) {
    .ig-au-hero { padding: 44px 0 32px; }
    .ig-au-hero__actions .ig-au-btn { width: 100%; justify-content: center; }
    .ig-au-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ig-au-hero__stat { padding: 18px 8px 14px; }
}


/* ================================================================
   VALUES SECTION — "What We Stand For"  (.ig-au-values)
================================================================ */
.ig-au-values { background: #ffffff; padding: 64px 0; }
.ig-au-values__wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.ig-au-values__header { text-align: left; max-width: 620px; margin: 0 0 40px; }
.ig-au-values__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.22;
    color: var(--ig-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.ig-au-values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.ig-value {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--ig-border, rgba(17,24,39,.10));
    border-top: 4px solid var(--ig-crimson);
    border-radius: 14px;
    padding: 30px 26px 28px;
    box-shadow: 0 2px 10px rgba(17,24,39,.04);
    transition: box-shadow .2s ease, transform .2s ease;
    overflow: hidden;
}
.ig-value:hover { box-shadow: 0 10px 28px rgba(17,24,39,.08); transform: translateY(-3px); }
.ig-value:hover .ig-value__icon { transform: scale(1.06); }

/* Distinct top-border color per card — editorial 4-color cycle (red-orange / gold / green / blue) */
.ig-value--1 { border-top-color: #DC4A34; }
.ig-value--2 { border-top-color: #B8860B; }
.ig-value--3 { border-top-color: #16A34A; }
.ig-value--4 { border-top-color: #2563EB; }
.ig-value--1 .ig-value__icon { background: rgba(220,74,52,.09); color: #DC4A34; }
.ig-value--2 .ig-value__icon { background: rgba(184,134,11,.09); color: #B8860B; }
.ig-value--3 .ig-value__icon { background: rgba(22,163,74,.09); color: #16A34A; }
.ig-value--4 .ig-value__icon { background: rgba(37,99,235,.09); color: #2563EB; }

/* Large faint numeral, editorial corner accent */
.ig-value__num {
    position: absolute;
    top: -6px;
    right: 14px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 3.4rem;
    line-height: 1;
    color: rgba(164,16,52,.06);
    pointer-events: none;
}

.ig-value__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 12px;
    background: rgba(164,16,52,.08);
    color: var(--ig-crimson);
    margin-bottom: 18px;
    position: relative;
    transition: transform .2s ease;
}
.ig-value h3 {
    position: relative;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ig-ink);
    margin: 0 0 10px;
}
.ig-value p {
    position: relative;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(17,24,39,.62);
    margin: 0;
}
@media (max-width: 900px) { .ig-au-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ig-au-values__grid { grid-template-columns: 1fr; } .ig-au-values { padding: 48px 0; } }


/* ================================================================
   FEATURES SECTION — "How It Works"  (.ig-au-features)
================================================================ */
.ig-au-features { padding: 64px 0; }
.ig-au-features__wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.ig-au-features__header { text-align: left; max-width: 620px; margin: 0 0 40px; }
.ig-au-features__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    color: var(--ig-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.ig-au-features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.ig-au-feature-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--ig-border, rgba(17,24,39,.10));
    border-top: 4px solid var(--ig-crimson);
    border-radius: 14px;
    padding: 28px 22px 24px;
    box-shadow: 0 2px 10px rgba(17,24,39,.04);
    transition: box-shadow .2s ease, transform .2s ease;
}
.ig-au-feature-card:hover { box-shadow: 0 10px 26px rgba(17,24,39,.08); transform: translateY(-3px); }

/* Distinct top-border + accent color per card — same editorial 4-color cycle as the values grid above */
.ig-au-feature-card--1 { border-top-color: #DC4A34; }
.ig-au-feature-card--2 { border-top-color: #B8860B; }
.ig-au-feature-card--3 { border-top-color: #16A34A; }
.ig-au-feature-card--4 { border-top-color: #2563EB; }
.ig-au-feature-card--1 .ig-au-feature-card__step,
.ig-au-feature-card--1 .ig-au-feature-card__icon { color: #DC4A34; }
.ig-au-feature-card--1 .ig-au-feature-card__step { background: rgba(220,74,52,.09); }
.ig-au-feature-card--2 .ig-au-feature-card__step,
.ig-au-feature-card--2 .ig-au-feature-card__icon { color: #B8860B; }
.ig-au-feature-card--2 .ig-au-feature-card__step { background: rgba(184,134,11,.09); }
.ig-au-feature-card--3 .ig-au-feature-card__step,
.ig-au-feature-card--3 .ig-au-feature-card__icon { color: #16A34A; }
.ig-au-feature-card--3 .ig-au-feature-card__step { background: rgba(22,163,74,.09); }
.ig-au-feature-card--4 .ig-au-feature-card__step,
.ig-au-feature-card--4 .ig-au-feature-card__icon { color: #2563EB; }
.ig-au-feature-card--4 .ig-au-feature-card__step { background: rgba(37,99,235,.09); }

.ig-au-feature-card__step {
    display: inline-block;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .06em;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.ig-au-feature-card__icon { margin-bottom: 14px; }

.ig-au-feature-card__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ig-ink);
    margin: 0 0 8px;
}
.ig-au-feature-card__desc {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(17,24,39,.62);
    margin: 0;
}
@media (max-width: 900px) { .ig-au-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ig-au-features__grid { grid-template-columns: 1fr; } .ig-au-features { padding: 48px 0; } }


/* ================================================================
   TESTIMONIALS — static three-column  (.ig-au-testimonials)
================================================================ */
.ig-au-testimonials {
    position: relative;
   
    overflow: hidden;
    padding: 64px 0;
    margin-left:   -5vw !important;
    margin-right:  -5vw !important;
    padding-left:   5vw !important;
    padding-right:  5vw !important;
    width: calc(100% + 10vw) !important;
    box-sizing: border-box !important;
}
.ig-au-testimonials__wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.ig-au-testimonials__header { text-align: left; max-width: 560px; margin: 0 0 36px; }
.ig-au-testimonials__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    color: var(--ig-ink);
    margin: 0 0 18px;
}
.ig-au-testimonials__rating {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.ig-au-testimonials__rating-score {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--ig-amber);
}
.ig-au-testimonials__rating-stars { display: inline-flex; gap: 2px; color: var(--ig-amber); }
.ig-au-testimonials__rating-count { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: rgba(17,24,39,.55); }

.ig-au-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.ig-au-tcard {
    background: #ffffff;
    border: 1px solid var(--ig-border, rgba(17,24,39,.10));
    border-top: 4px solid var(--ig-crimson);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 2px 10px rgba(17,24,39,.04);
    transition: box-shadow .2s ease, transform .2s ease;
}
.ig-au-tcard:hover { box-shadow: 0 10px 28px rgba(17,24,39,.08); transform: translateY(-3px); }
.ig-au-tcard__quote { color: var(--ig-crimson); margin-bottom: 14px; }

/* Same 3-color editorial cycle as the "What We Stand For" cards */
.ig-au-tcard--1 { border-top-color: #DC4A34; }
.ig-au-tcard--2 { border-top-color: #B8860B; }
.ig-au-tcard--3 { border-top-color: #16A34A; }
.ig-au-tcard--4 { border-top-color: #2563EB; }
.ig-au-tcard--1 .ig-au-tcard__quote { color: #DC4A34; }
.ig-au-tcard--2 .ig-au-tcard__quote { color: #B8860B; }
.ig-au-tcard--3 .ig-au-tcard__quote { color: #16A34A; }
.ig-au-tcard--4 .ig-au-tcard__quote { color: #2563EB; }
.ig-au-tcard__stars { display: flex; gap: 2px; color: var(--ig-amber); margin-bottom: 14px; }
.ig-au-tcard__comment {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(17,24,39,.82);
    margin: 0 0 22px;
}
.ig-au-tcard__person { display: flex; align-items: center; gap: 12px; }
.ig-au-tcard__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ig-au-tcard__name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: .95rem;
    color: var(--ig-ink);
    margin: 0;
}
.ig-au-tcard__role { font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; color: rgba(17,24,39,.55); }
@media (max-width: 1100px) { .ig-au-testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ig-au-testimonials__grid { grid-template-columns: 1fr; } .ig-au-testimonials { padding: 48px 0; } }


/* ================================================================
   FAQ SECTION  (.ig-au-faq)
================================================================ */
.ig-au-faq {
    background: var(--ig-cream, #FDFBF8) !important;
    background-image: radial-gradient(rgba(164,16,52,.09) 1px, transparent 1px);
    background-size: 22px 22px;
    padding: 56px 0;
}
.ig-au-faq__wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.ig-au-faq__header { text-align: left; max-width: 620px; margin: 0 0 28px; }
.ig-au-faq__header--center { text-align: center; max-width: 560px; margin: 0 auto 28px; }
.ig-au-faq__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--ig-ink);
    margin: 0 0 10px;
}
.ig-au-faq__sub { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.55; color: rgba(17,24,39,.62); margin: 0; }

/* Live search — only rendered when there are enough FAQs to make scanning hard */
.ig-au-faq__search {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 520px;
    margin: 0 auto 40px;
    background: #ffffff;
    border: 1px solid var(--ig-border, rgba(17,24,39,.10));
    border-radius: 999px;
    padding: 12px 20px;
    color: rgba(17,24,39,.4);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ig-au-faq__search:focus-within { border-color: var(--ig-crimson); color: var(--ig-crimson); box-shadow: 0 0 0 4px rgba(164,16,52,.08); }
.ig-au-faq__search svg { flex-shrink: 0; }
.ig-au-faq__search input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: var(--ig-ink);
}
.ig-au-faq__search-count {
    flex-shrink: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(17,24,39,.45);
    white-space: nowrap;
}

/* ── Two-column layout: sticky category rail + grouped content ── */
.ig-au-faq__layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }

.ig-au-faq__rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; }
.ig-au-faq__cat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    background: none;
    text-align: left;
    font-family: 'Inter', system-ui, sans-serif;
    transition: background .15s ease, border-color .15s ease;
}
.ig-au-faq__cat:hover { background: #ffffff; border-color: var(--ig-border, rgba(17,24,39,.10)); }
.ig-au-faq__cat.is-active { background: rgba(164,16,52,.07); border-color: rgba(164,16,52,.16); }
.ig-au-faq__cat-icon {
    width: 32px; height: 32px; min-width: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: #ffffff;
    color: var(--ig-crimson);
    border: 1px solid var(--ig-border, rgba(17,24,39,.10));
}
.ig-au-faq__cat.is-active .ig-au-faq__cat-icon { background: var(--ig-crimson); color: #ffffff; border-color: var(--ig-crimson); }
.ig-au-faq__cat-label { flex: 1; font-size: 14px; font-weight: 500; color: var(--ig-ink); }
.ig-au-faq__cat.is-active .ig-au-faq__cat-label { color: var(--ig-crimson); font-weight: 600; }
.ig-au-faq__cat-count { font-size: 12px; font-weight: 600; color: rgba(17,24,39,.4); }
.ig-au-faq__cat.is-active .ig-au-faq__cat-count { color: var(--ig-crimson); }

.ig-au-faq__rail-help { margin-top: 20px; padding: 18px; border-radius: 12px; background: var(--ig-ink); }
.ig-au-faq__rail-help p { margin: 0 0 12px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.7); }
.ig-au-faq__rail-help a { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: #ffffff; text-decoration: none; }
.ig-au-faq__rail-help a:hover { text-decoration: underline; }

.ig-au-faq__content { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.ig-au-faq__group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ig-crimson);
    margin: 0 0 14px;
    scroll-margin-top: 24px;
}
.ig-au-faq__content > section[hidden] { display: none; }

/* Bottom CTA band — solid crimson, replaces the flat support box when there's more than one category */
.ig-au-faq__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--ig-crimson);
    border-radius: 16px;
    padding: 28px 32px;
}
.ig-au-faq__cta-text h3 { margin: 0 0 4px; font-family: 'Inter', system-ui, sans-serif; font-size: 18px; font-weight: 600; color: #ffffff; }
.ig-au-faq__cta-text p { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; color: rgba(255,255,255,.8); }
.ig-au-faq__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: var(--ig-crimson);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
}
.ig-au-faq__cta-btn:hover { color: var(--ig-crimson); text-decoration: none; opacity: .92; }

@media (max-width: 900px) {
    .ig-au-faq__layout { grid-template-columns: 1fr; }
    .ig-au-faq__rail { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; gap: 8px; }
    .ig-au-faq__cat { flex-shrink: 0; }
    .ig-au-faq__rail-help { display: none; }
    .ig-au-faq__cta { flex-direction: column; align-items: flex-start; }
}

/* Empty state — shown when a search matches nothing. The [hidden] attribute
   toggles visibility from JS; :not([hidden]) keeps display:flex from
   overriding the browser's default display:none while it's hidden. */
.ig-au-faq__empty:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 48px 24px;
    color: rgba(17,24,39,.35);
}
.ig-au-faq__empty p { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; color: rgba(17,24,39,.55); }
.ig-au-faq__empty strong { color: var(--ig-ink); }
.ig-au-faq__empty a { color: var(--ig-crimson); font-weight: 600; text-decoration: underline; }

/* Single-column accordion — one question open at a time, #A41034 chevron indicator.
   Toggled by dedicated JS (see @push('scripts') in about-us.blade.php), not Bootstrap's
   collapse plugin — this page loads two conflicting Bootstrap JS versions. */
.ig-au-accordion {
    background: #ffffff;
    border: 1px solid var(--ig-border, rgba(17,24,39,.10));
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(17,24,39,.04);
}
.ig-au-accordion__item { border-bottom: 1px solid var(--ig-border, rgba(17,24,39,.10)); }
.ig-au-accordion__item:last-child { border-bottom: none; }
.ig-au-accordion__heading { margin: 0; }
.ig-au-accordion__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: none;
    border: none;
    text-align: left;
    padding: 16px 20px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ig-ink);
    cursor: pointer;
    transition: background .15s ease;
}
.ig-au-accordion__btn:hover { background: rgba(164,16,52,.03); }
.ig-au-accordion__icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--ig-crimson);
    transition: transform .2s ease;
}
.ig-au-accordion__btn:not(.collapsed) .ig-au-accordion__icon { transform: rotate(180deg); }
.ig-au-accordion__panel { display: none; }
.ig-au-accordion__panel--open { display: block; }
.ig-au-accordion__body {
    padding: 0 20px 18px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(17,24,39,.62);
}

.ig-au-faq__support {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid var(--ig-border, rgba(17,24,39,.10));
    border-radius: 12px;
    flex-wrap: wrap;
}
.ig-au-faq__support-icon {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(164,16,52,.08);
    color: var(--ig-crimson);
    flex-shrink: 0;
}
.ig-au-faq__support-content { flex: 1; display: flex; flex-direction: column; font-family: 'Inter', system-ui, sans-serif; }
.ig-au-faq__support-content strong { color: var(--ig-ink); font-size: 13.5px; }
.ig-au-faq__support-content span { color: rgba(17,24,39,.62); font-size: 12.5px; }
.ig-au-faq__support-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--ig-crimson);
    text-decoration: none;
    white-space: nowrap;
}
.ig-au-faq__support-btn:hover { color: var(--ig-crimson-hover); text-decoration: none; }
@media (max-width: 575px) {
    .ig-au-faq { padding: 36px 0; }
    .ig-au-faq__support { flex-direction: column; text-align: center; }
}


/* ================================================================
   REDUCED MOTION PREFERENCE
================================================================ */
@media (prefers-reduced-motion: reduce) {
    .ig-value,
    .ig-au-feature-card,
    .ig-au-btn {
        transition: none !important;
    }
}

   BLOG LISTING PAGE — REDESIGN  (bpl2-*)
   Color system:
     60% → #FFFFFF  (backgrounds, surfaces)
     30% → #A41034  (primary, CTAs, badges, active states)
     10% → #1C1514  (text, headings, icons)
   ================================================================ */

/* ── Utility: screen-reader only ─────────────────────────────── */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ================================================================
   HERO
   ================================================================ */
.bpl2-hero {
    position: relative;
    background: #1C1514;
    padding: 72px 0 64px;
    overflow: hidden;
    }

/* Ambient orbs */
.bpl2-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    opacity: .55;
}
.bpl2-hero__orb--1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #A41034 0%, transparent 70%);
    top: -160px; left: -100px;
}
.bpl2-hero__orb--2 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(164,16,52,.45) 0%, transparent 70%);
    bottom: -100px; right: 0;
}

/* Dot grid texture */
.bpl2-hero__grid {

    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}

.bpl2-hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Breadcrumb */
.bpl2-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.4);
    margin-bottom: 22px;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 600;
}
.bpl2-breadcrumb a {
    color: rgba(255,255,255,.55);
    text-decoration: none;
    transition: color .18s;
}
.bpl2-breadcrumb a:hover { color: #FFFFFF; }
.bpl2-breadcrumb i { font-size: 8px; }

/* Eyebrow */
.bpl2-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #A41034;
    border: 1px solid rgba(164,16,52,.35);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
}
.bpl2-hero__eyebrow i { font-size: 10px; }

/* Title */
.bpl2-hero__title {
    font-size: clamp(2.2rem, 5.5vw, 3.4rem);
    font-weight: 900;
    color: #A41034;
    line-height: 1.12;
    margin: 0 0 16px;
    letter-spacing: -1.5px;
}
.bpl2-hero__title-accent {
    position: relative;
    color: #A41034;
    display: inline-block;
}
.bpl2-hero__title-accent::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%; height: 3px;
    background: #A41034;
    border-radius: 2px;
    opacity: .4;
}

/* Sub */
.bpl2-hero__sub {
    font-size: 1.05rem;
    color: #A41034;
    max-width: 520px;
    margin: 0 auto 36px;
    line-height: var(--lh-relaxed);
}

/* Search */
.bpl2-hero__search {
    position: relative;
    max-width: 600px;
    margin: 0 auto 32px;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.06);
    border: 1.5px solid #A41034;
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    transition: border-color .22s, box-shadow .22s;
}
.bpl2-hero__search:focus-within {
     
    box-shadow: 0 0 0 4px rgba(164,16,52,.2);
}
.bpl2-hero__search-icon {
    flex-shrink: 0;
    color:  #A41034 ;
    font-size: var(--fs-sm);
    margin-left: 18px;
    margin-right: -4px;
}
.bpl2-hero__search input {
    flex: 1;
    background: transparent;
  
    outline: none;
    padding: 15px 18px;
    font-size: var(--fs-base);
    color: #A41034 ;
    font-family: inherit;
}
.bpl2-hero__search input::placeholder { color: #A41034 ; }
.bpl2-hero__search button {
    flex-shrink: 0;
    background: #A41034;
    border: none;
    color: #FFFFFF ;
    padding: 0 26px;
    height: 100%;
    min-height: 52px;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .2px;
    transition: background .2s, transform .15s;
    margin: 2px !important;
     border-radius: 12px; /* Add this */
}
.bpl2-hero__search button:hover {
    background: #8a0c2a;
}
.bpl2-hero__search input,
.bpl2-hero__search input:focus,
.bpl2-hero__search input:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* Category pills */
.bpl2-hero__cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.bpl2-cat-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1.5px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.6);
    text-decoration: none;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(4px);
    transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.bpl2-cat-pill:hover {
    background: rgba(164,16,52,.2);
    border-color: rgba(164,16,52,.5);
    color: #e3a0af;
    text-decoration: none;
    transform: translateY(-1px);
}
.bpl2-cat-pill--active {
    background: #A41034 !important;
    border-color: #A41034 !important;
    color: #fff !important;
}
.bpl2-cat-pill--active:hover {
    transform: translateY(-1px);
    color: #fff;
}

/* ================================================================
   BODY
   ================================================================ */
.bpl2-body {
     
    padding: 48px 0 80px;
    min-height: 60vh;
    }

/* ── Active Filter Bar ─────────────────────────────────────────── */
.bpl2-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid rgba(164,16,52,.15);
    border-left: 4px solid #A41034;
    border-radius: 12px;
    padding: 13px 20px;
    margin-bottom: 28px;
    font-size: var(--fs-sm);
    color: #555;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.bpl2-filter-bar__icon {
    color: #A41034;
    font-size: var(--fs-xs);
    flex-shrink: 0;
}
.bpl2-filter-bar strong { color: #1C1514; }
.bpl2-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #A41034;
    border: 1.5px solid rgba(164,16,52,.3);
    border-radius: 100px;
    padding: 4px 13px;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
    letter-spacing: .2px;
    text-transform: uppercase;
}
.bpl2-filter-clear:hover {
    background: #A41034;
    color: #fff;
    border-color: #A41034;
    text-decoration: none;
}

/* ================================================================
   FEATURED POST
   ================================================================ */
.bpl2-featured {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0,0,0,.06),
        0 8px 28px rgba(0,0,0,.09);
    margin-bottom: 36px;
    text-decoration: none;
    transition: box-shadow .3s, transform .3s;
    border: 1px solid rgba(0,0,0,.05);
}
.bpl2-featured:hover {
    box-shadow:
        0 1px 3px rgba(0,0,0,.06),
        0 20px 52px rgba(164,16,52,.14);
    transform: translateY(-5px);
    text-decoration: none;
}
.bpl2-featured__media {
    position: relative;
    overflow: hidden;
    min-height: 340px;
}
.bpl2-featured__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}
.bpl2-featured:hover .bpl2-featured__media img { transform: scale(1.05); }
.bpl2-featured__media-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(28,21,20,.35) 0%, transparent 55%);
}

/* Badges */
.bpl2-featured__badges {
    position: absolute;
    top: 16px; left: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.bpl2-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    padding: 5px 13px;
    border-radius: 100px;
}
.bpl2-badge--featured {
    background: #A41034;
    color: #fff;
    box-shadow: 0 4px 12px rgba(164,16,52,.45);
}
.bpl2-badge--cat {
    background: rgba(28,21,20,.65);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,.15);
}
.bpl2-featured__readtime {
    position: absolute;
    bottom: 14px; right: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(28,21,20,.7);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 100px;
}
.bpl2-featured__readtime i { color: #e3a0af; }

/* Featured body */
.bpl2-featured__body {
    padding: 40px 38px 36px;
    display: flex;
    flex-direction: column;
}
.bpl2-featured__meta {
    margin-bottom: 16px;
}
.bpl2-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.bpl2-meta-chip i { color: #A41034; }

.bpl2-featured__title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #1C1514;
    line-height: var(--lh-snug);
    margin: 0 0 16px;
    letter-spacing: -.4px;
    transition: color .2s;
}
.bpl2-featured:hover .bpl2-featured__title { color: #A41034; }

.bpl2-featured__excerpt {
    font-size: var(--fs-sm);
    color: #6b7280;
    line-height: 1.75;
    margin: 0 0 28px;
    flex: 1;
}
.bpl2-featured__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 1px solid #f0f0ee;
    margin-top: auto;
}
.bpl2-featured__author {
    display: flex;
    align-items: center;
    gap: 11px;
}
.bpl2-featured__author-img {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.bpl2-featured__author-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.bpl2-featured__author-label {
    font-size: 10.5px;
    color: #9ca3af;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.bpl2-featured__author-name {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #1C1514;
}
.bpl2-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #A41034;
    color: #fff;
    border-radius: 10px;
    padding: 11px 22px;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .2px;
    flex-shrink: 0;
    transition: background .2s, gap .2s, transform .15s;
}
.bpl2-featured:hover .bpl2-featured__cta {
    background: #8a0c2a;
     
    transform: translateX(2px);
}

@media (max-width: 767px) {
    .bpl2-featured { grid-template-columns: 1fr; }
    .bpl2-featured__media { min-height: 230px; }
    .bpl2-featured__body { padding: 24px 22px 22px; }
    .bpl2-featured__title { font-size: 1.2rem; }
    .bpl2-featured__footer { flex-direction: column; align-items: flex-start; }
    .bpl2-featured__cta { width: 100%; justify-content: center; }
}

/* ================================================================
   SECTION DIVIDER HEADING
   ================================================================ */
.bpl2-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
.bpl2-section-head__line {
    flex: 1;
    height: 1px;
    background: rgba(28,21,20,.12);
}
.bpl2-section-head__label {
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    white-space: nowrap;
}

/* ================================================================
   BLOG GRID
   ================================================================ */
.bpl2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}
@media (max-width: 1199px) { .bpl2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .bpl2-grid { grid-template-columns: 1fr; } }

/* ================================================================
   BLOG CARD
   ================================================================ */
.bpl2-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0,0,0,.05),
        0 4px 14px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,.04);
    transition: box-shadow .28s, transform .28s;
}
.bpl2-card:hover {
    box-shadow:
        0 1px 3px rgba(0,0,0,.05),
        0 16px 40px rgba(164,16,52,.13);
    transform: translateY(-5px);
    text-decoration: none;
}

/* Card image */
.bpl2-card__media {
    position: relative;
    height: 195px;
    overflow: hidden;
    flex-shrink: 0;
    background: #FFFFFF;
}
.bpl2-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
    display: block;
}
.bpl2-card:hover .bpl2-card__media img { transform: scale(1.07); }

/* Category badge on card */
.bpl2-card__cat {
    position: absolute;
    top: 12px; left: 12px;
    background: #A41034;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 4px 12px;
    border-radius: 100px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, transform .15s;
    z-index: 1;
    box-shadow: 0 3px 10px rgba(164,16,52,.4);
}
.bpl2-card__cat:hover { background: #8a0c2a; transform: scale(1.03); }

/* Read time badge */
.bpl2-card__readtime {
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(28,21,20,.68);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.bpl2-card__readtime i { color: #e3a0af; font-size: 9px; }

/* Card body */
.bpl2-card__body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.bpl2-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    color: #9ca3af;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.bpl2-card__meta i { color: #A41034; font-size: 10px; }

.bpl2-card__title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: #1C1514;
    line-height: 1.45;
    margin: 0 0 10px;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -.1px;
}
.bpl2-card:hover .bpl2-card__title { color: #A41034; }

.bpl2-card__excerpt {
    font-size: var(--fs-sm);
    color: #6b7280;
    line-height: var(--lh-normal);
    margin: 0 0 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bpl2-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f0f0ee;
}
.bpl2-card__author {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.bpl2-card__author-img {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #FFFFFF;
    flex-shrink: 0;
}
.bpl2-card__author-name {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bpl2-card__cta {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #A41034;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    transition: gap .2s;
    letter-spacing: .2px;
}
.bpl2-card:hover .bpl2-card__cta { gap: 9px; }
.bpl2-card__cta i { font-size: 10px; }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.bpl2-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 72px 24px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.04);
}
.bpl2-empty__icon-wrap {
    width: 72px; height: 72px;
    border-radius: 20px;
    background: #f5f5f3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.bpl2-empty__icon-wrap i {
    font-size: 1.8rem;
    color: #c8c8c6;
}
.bpl2-empty__title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1C1514;
    margin: 0 0 8px;
    letter-spacing: -.2px;
}
.bpl2-empty__sub {
    font-size: var(--fs-sm);
    color: #9ca3af;
    margin: 0 0 24px;
    line-height: var(--lh-normal);
}
.bpl2-empty__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #A41034;
    color: #fff;
    border-radius: 10px;
    padding: 12px 26px;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .2px;
    transition: background .2s, transform .15s;
}
.bpl2-empty__link:hover {
    background: #8a0c2a;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

/* ================================================================
   PAGINATION
   ================================================================ */
.bpl2-pagination {
    margin-top: 8px;
    padding-top: 8px;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.bpl2-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
@media (max-width: 991px) {
    .bpl2-sidebar { position: static; margin-top: 40px; }
}

/* ── Widget shell ──────────────────────────────────────────────── */
.bpl2-widget {
    background: #fff;
    border-radius: 18px;
    padding: 24px 22px;
    box-shadow:
        0 1px 3px rgba(0,0,0,.05),
        0 6px 22px rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.04);
}

/* Widget title */
.bpl2-widget__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: #1C1514;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid #f0f0ee;
}
.bpl2-widget__title-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: rgba(164,16,52,.1);
    color: #A41034;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    flex-shrink: 0;
}
.bpl2-widget__title-icon--fire {
    background: rgba(249,115,22,.1);
    color: #f97316;
}

/* ── Category list ─────────────────────────────────────────────── */
.bpl2-cats {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bpl2-cats li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: var(--fs-sm);
    color: #4b5563;
    text-decoration: none;
    font-weight: 500;
    transition: background .18s, color .18s;
    border: 1.5px solid transparent;
}
.bpl2-cats__arrow {
    font-size: 9px;
    color: #ccc;
    transition: transform .2s, color .2s;
}
.bpl2-cats li a:hover,
.bpl2-cats li a.active {
    background: rgba(164,16,52,.07);
    color: #A41034;
    border-color: rgba(164,16,52,.12);
    text-decoration: none;
}
.bpl2-cats li a:hover .bpl2-cats__arrow,
.bpl2-cats li a.active .bpl2-cats__arrow {
    transform: translateX(3px);
    color: #A41034;
}
.bpl2-cats li a.active {
    font-weight: 700;
}

/* ── Popular posts ─────────────────────────────────────────────── */
.bpl2-popular {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.bpl2-popular-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0ee;
    text-decoration: none;
    transition: background .15s;
}
.bpl2-popular-item:first-child { padding-top: 0; }
.bpl2-popular-item:last-child { border-bottom: none; padding-bottom: 0; }
.bpl2-popular-item:hover { text-decoration: none; }

.bpl2-popular-item__num {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: #f0f0ee;
    color: #888;
    font-size: 11.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: background .2s, color .2s;
}
.bpl2-popular-item:nth-child(1) .bpl2-popular-item__num {
    background: #A41034;
    color: #fff;
}
.bpl2-popular-item:nth-child(2) .bpl2-popular-item__num {
    background: rgba(164,16,52,.15);
    color: #A41034;
}
.bpl2-popular-item:nth-child(3) .bpl2-popular-item__num {
    background: rgba(164,16,52,.09);
    color: #A41034;
}
.bpl2-popular-item:hover .bpl2-popular-item__num {
    background: #A41034;
    color: #fff;
}

.bpl2-popular-item__thumb {
    flex-shrink: 0;
    width: 62px; height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
}
.bpl2-popular-item__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s;
    display: block;
}
.bpl2-popular-item:hover .bpl2-popular-item__thumb img { transform: scale(1.09); }

.bpl2-popular-item__info {
    flex: 1;
    min-width: 0;
}
.bpl2-popular-item__date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.bpl2-popular-item__date i { color: #A41034; font-size: 9px; }

.bpl2-popular-item__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #1C1514;
    line-height: var(--lh-snug);
    margin: 0;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bpl2-popular-item:hover .bpl2-popular-item__title { color: #A41034; }

/* ================================================================
   RESPONSIVE OVERRIDES
   ================================================================ */
@media (max-width: 991px) {
    .bpl2-hero { padding: 56px 0 48px; }
    .bpl2-body { padding: 36px 0 60px; }
}

@media (max-width: 575px) {
    .bpl2-hero { padding: 48px 0 40px; }
    .bpl2-hero__title { letter-spacing: -.8px; }
    .bpl2-hero__search { border-radius: 12px; }
    .bpl2-hero__search button { padding: 0 18px; font-size: var(--fs-sm); }
    .bpl2-cat-pill { font-size: 11.5px; padding: 6px 14px; }
    .bpl2-filter-bar { flex-direction: column; align-items: flex-start; }
    .bpl2-filter-clear { margin-left: 0; }
    .bpl2-card__media { height: 180px; }
    .bpl2-widget { padding: 20px 18px; }
}

/* ================================================================
   MOTION PREFERENCE
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .bpl2-featured,
    .bpl2-featured__media img,
    .bpl2-card,
    .bpl2-card__media img,
    .bpl2-cat-pill,
    .bpl2-featured__cta,
    .bpl2-popular-item__thumb img {
        transition: none !important;
        transform: none !important;
    }
}

/* ================================================================
   iGURUS — CONTACT PAGE STYLES
   Scope  : All selectors prefixed with .ct-  (zero global leaks)
   Palette: #A41034 primary · #1C1514 text · #FFFFFF background
   Dist.  : 60 % background · 30 % primary · 10 % text
================================================================ */

/* ── Screen-reader only utility ─────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ================================================================
   1.  HERO
================================================================ */
.ct-hero {
    position: relative;
    background: #1C1514;
    padding: 80px 0 72px;
    overflow: hidden;
    }

/* Decorative canvas layer */
.ct-hero__canvas { position: absolute; inset: 0; pointer-events: none; }

.ct-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
}
.ct-hero__orb--1 {
    width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(164,16,52,.65), transparent 65%);
    top: -180px; left: -120px;
}
.ct-hero__orb--2 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(164,16,52,.35), transparent 65%);
    bottom: -140px; right: -80px;
}

.ct-hero__grid {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 34px 34px;
}
.ct-hero__shine {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 55%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

/* Inner content */
.ct-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.ct-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 100px;
    background: rgba(164,16,52,.22);
    border: 1px solid rgba(164,16,52,.4);
    color: #f9a8be;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.ct-hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.18;
    letter-spacing: -.03em;
    margin: 0 0 18px;
}
.ct-accent {
    color: #A41034;
    position: relative;
}

.ct-hero__sub {
    font-size: var(--fs-md);
    color: rgba(255,255,255,.62);
    line-height: 1.75;
    margin: 0 0 24px;
    max-width: 540px;
}

/* Breadcrumb */
.ct-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(255,255,255,.45);
    margin-bottom: 28px;
}
.ct-hero__breadcrumb a {
    color: rgba(255,255,255,.6);
    text-decoration: none;
    transition: color .2s;
}
.ct-hero__breadcrumb a:hover { color: #fff; }
.ct-hero__breadcrumb .fa-chevron-right { font-size: 9px; }

/* Trust chips */
.ct-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ct-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.8);
    font-size: 12.5px;
    font-weight: 600;
    backdrop-filter: blur(4px);
    transition: background .2s, border-color .2s;
}
.ct-trust-chip:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
}
.ct-trust-chip i { color: #A41034; font-size: var(--fs-xs); }

/* ================================================================
   2.  STATS STRIP
================================================================ */
.ct-stats-strip {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    }

.ct-stats-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
}

.ct-stat {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: 22px 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .5s ease;
}
.ct-stat.ct-revealed { opacity: 1; transform: translateY(0); }

.ct-stat__num {
    font-size: 1.8rem;
    font-weight: 900;
    color: #A41034;
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: 4px;
}
.ct-stat__lbl {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ct-stat-divider {
    width: 1px;
    height: 36px;
    background: #e5e7eb;
    flex-shrink: 0;
    align-self: center;
}

/* ================================================================
   3.  BODY
================================================================ */
.ct-body {
    background: #FFFFFF;
    
}

/* ================================================================
   4.  INFO PANEL (left column)
================================================================ */
.ct-info-panel {
    background: #1C1514;
    border-radius: 20px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
}

/* Subtle background texture */
.ct-info-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* Red glow accent */
.ct-info-panel::after {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(164,16,52,.3), transparent 65%);
    top: -100px; right: -80px;
    filter: blur(60px);
    pointer-events: none;
}

.ct-info-panel__head {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.ct-info-panel__title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    line-height: var(--lh-snug);
}
.ct-info-panel__sub {
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.5);
    margin: 0;
    line-height: var(--lh-relaxed);
}

/* Contact cards */
.ct-contact-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

.ct-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.07);
    transition: background .2s, border-color .2s;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .4s ease, transform .4s ease, background .2s, border-color .2s;
}
.ct-contact-card.ct-revealed { opacity: 1; transform: translateX(0); }
.ct-contact-card:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
}

.ct-contact-card__icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-base);
}
.ct-contact-card__icon--primary   { background: rgba(164,16,52,.25); color: #f9a8be; }
.ct-contact-card__icon--secondary { background: rgba(59,130,246,.2);  color: #93c5fd; }
.ct-contact-card__icon--tertiary  { background: rgba(20,184,166,.2);  color: #5eead4; }

.ct-contact-card__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: rgba(255,255,255,.35);
    margin-bottom: 4px;
}
.ct-contact-card__value {
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.85);
    font-weight: 500;
    line-height: var(--lh-normal);
}
.ct-contact-card__value a {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    transition: color .2s;
}
.ct-contact-card__value a:hover { color: #fff; }

/* Response badge */
.ct-response-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(164,16,52,.15);
    border: 1px solid rgba(164,16,52,.25);
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.ct-response-badge__icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(164,16,52,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f9a8be;
    font-size: var(--fs-sm);
}
.ct-response-badge__text { display: flex; flex-direction: column; }
.ct-response-badge__text strong { font-size: 12.5px; color: #fff; font-weight: 700; }
.ct-response-badge__text span   { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 1px; }

/* Office hours card */
.ct-hours-card {
    padding: 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.07);
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.ct-hours-card__title {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: rgba(255,255,255,.35);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ct-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 12.5px;
    color: rgba(255,255,255,.65);
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.ct-hours-row:last-child { border-bottom: none; padding-bottom: 0; }
.ct-hours-time   { color: rgba(255,255,255,.9); font-weight: 600; }
.ct-hours-closed { color: #f87171; font-weight: 600; }

/* Social links */
.ct-social-block { position: relative; z-index: 1; }
.ct-social-block__label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: rgba(255,255,255,.3);
    margin-bottom: 10px;
}
.ct-social-block__icons { display: flex; flex-wrap: wrap; gap: 8px; }

.ct-soc-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.09);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.6);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.ct-soc-btn:hover {
    background: #A41034;
    color: #fff;
    border-color: #A41034;
    transform: translateY(-2px);
    text-decoration: none;
}

/* ================================================================
   5.  FORM CARD (right column)
================================================================ */
.ct-form-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 36px;
    box-shadow:
        0 1px 3px rgba(0,0,0,.04),
        0 10px 40px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.04);
}

/* Status alert */
.ct-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-bottom: 24px;
    line-height: 1.55;
}
.ct-alert[hidden] { display: none; }
.ct-alert__icon { flex-shrink: 0; font-size: var(--fs-lg); margin-top: 1px; }
.ct-alert--success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.ct-alert--success .ct-alert__icon { color: #22c55e; }
.ct-alert--error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.ct-alert--error   .ct-alert__icon { color: #ef4444; }

.ct-form-card__head { margin-bottom: 24px; }
.ct-form-card__title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #1C1514;
    margin: 0 0 6px;
    letter-spacing: -.02em;
}
.ct-form-card__sub { font-size: var(--fs-sm); color: #6b7280; margin: 0; }

/* Inquiry type tabs */
.ct-inquiry-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding-bottom: 24px;
    border-bottom: 1.5px solid #f0f0ee;
}

.ct-inquiry-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    background: #fafafa;
    color: #6b7280;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.ct-inquiry-tab:hover {
    border-color: #A41034;
    color: #A41034;
    background: rgba(164,16,52,.04);
}
.ct-inquiry-tab.active {
    border-color: #A41034;
    background: #A41034;
    color: #fff;
    box-shadow: 0 4px 14px rgba(164,16,52,.3);
}
.ct-inquiry-tab i { font-size: var(--fs-xs); }

/* Two-column form row */
.ct-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Input wrapper with icon */
.ct-input-wrap { position: relative; }
.ct-input-ico {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: var(--fs-sm);
    pointer-events: none;
    transition: color .2s;
}
.ct-has-ico { padding-left: 38px !important; }
.ct-input-wrap:focus-within .ct-input-ico { color: #A41034; }

/* Re-use ig- field styles from global CSS with contact overrides */
.ig-fg { margin-bottom: 18px; position: relative; }
.ig-label { display: block; font-size: var(--fs-xs); font-weight: 700; color: #374151; margin-bottom: 6px; letter-spacing: .1px; }
.ig-label span { color: #ef4444; }

.ig-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: var(--fs-sm);
    color: #111827;
    background: #fafafa;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
}
.ig-input:focus {
    border-color: #A41034 !important;
    box-shadow: 0 0 0 3px rgba(164,16,52,.1) !important;
    background: #fff;
}
.ig-input.is-invalid {
    border-color: #ef4444 !important;
    background: #fff5f5;
}
.ig-input::placeholder { color: #c4c9d4; }

.ig-textarea {
    width: 100%;
    min-height: 140px;
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: var(--fs-sm);
    color: #111827;
    background: #fafafa;
    outline: none;
    resize: vertical;
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
    line-height: var(--lh-normal);
    font-family: inherit;
}
.ig-textarea:focus {
    border-color: #A41034 !important;
    box-shadow: 0 0 0 3px rgba(164,16,52,.1) !important;
    background: #fff;
}
.ig-textarea.is-invalid { border-color: #ef4444 !important; background: #fff5f5; }
.ig-textarea::placeholder { color: #c4c9d4; }

.ig-ferr {
    display: block;
    font-size: 11.5px;
    color: #ef4444;
    margin-top: 5px;
    font-weight: 500;
    min-height: 16px;
}

/* Textarea footer */
.ct-textarea-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}
.ct-char-count {
    font-size: var(--fs-xs);
    color: #9ca3af;
    font-weight: 600;
    transition: color .2s;
}
.ct-char-warn { color: #f59e0b; }
.ct-char-over { color: #ef4444; }
.ct-textarea-hint { font-size: var(--fs-xs); color: #c4c9d4; }

/* Form footer row */
.ct-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.ct-privacy-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #9ca3af;
    margin: 0;
}
.ct-privacy-note i { color: #A41034; }

/* Submit button */
.ct-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: #A41034;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .2px;
    transition: opacity .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 6px 20px rgba(164,16,52,.35);
    white-space: nowrap;
}
.ct-submit-btn:hover {
    opacity: .88;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(164,16,52,.45);
}
.ct-submit-btn:active { transform: translateY(0); }
.ct-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* ================================================================
   6.  MAP SECTION
================================================================ */
.ct-map-section {
    background: #FFFFFF;
    padding: 0 0 60px;
    }

.ct-map-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.ct-map-header__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: #A41034;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    flex-shrink: 0;
}
.ct-map-header__title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1C1514;
    margin: 0 0 2px;
}
.ct-map-header__sub { font-size: var(--fs-sm); color: #6b7280; margin: 0; }

.ct-map-frame {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.1);
    border: 1px solid rgba(0,0,0,.06);
}
.ct-map-frame iframe {
    width: 100%;
    height: 380px;
    display: block;
    border: none;
}

/* ================================================================
   7.  WAYS TO REACH US
================================================================ */
 

.ct-section-header {
    text-align: center;
    margin-bottom: 44px;
}
.ct-section-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 100px;
    background: rgba(164,16,52,.08);
    color: #A41034;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 12px;
}
.ct-section-header__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    color: #1C1514;
    letter-spacing: -.025em;
    margin: 0 0 10px;
}
.ct-section-header__sub {
    font-size: var(--fs-sm);
    color: #6b7280;
    margin: 0;
}
.ct-faq-link { color: #A41034; font-weight: 600; text-decoration: none; }
.ct-faq-link:hover { text-decoration: underline; }

.ct-ways-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ct-way-card {
    background: #fafafa;
    border: 1.5px solid #eee;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    transition: border-color .25s, box-shadow .25s, transform .25s;
    opacity: 0;
    transform: translateY(12px);
}
.ct-way-card.ct-revealed { opacity: 1; transform: translateY(0); }
.ct-way-card:hover {
    border-color: rgba(164,16,52,.25);
    box-shadow: 0 8px 32px rgba(164,16,52,.1);
    transform: translateY(-4px);
}

.ct-way-card__icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(164,16,52,.1);
    color: #A41034;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    margin: 0 auto 16px;
    transition: background .2s;
}
.ct-way-card:hover .ct-way-card__icon { background: #A41034; color: #fff; }

.ct-way-card__title {
    font-size: 1rem;
    font-weight: 800;
    color: #1C1514;
    margin: 0 0 8px;
}
.ct-way-card__desc {
    font-size: var(--fs-sm);
    color: #6b7280;
    line-height: var(--lh-normal);
    margin: 0 0 16px;
}

.ct-way-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
}
.ct-badge--green { background: #dcfce7; color: #166534; }
.ct-badge--green .fa-circle { font-size: 6px; color: #22c55e; }

.ct-way-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #A41034;
    text-decoration: none;
    transition: gap .2s;
}
.ct-way-card__link:hover { gap: 10px; text-decoration: none; }

/* ================================================================
   8.  FAQ
================================================================ */
.ct-faq-section {
    background: #FFFFFF;
    padding: 64px 0;
    }

.ct-faq-accordion {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-faq-item {
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid rgba(0,0,0,.06);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    opacity: 0;
    transform: translateY(8px);
}
.ct-faq-item.ct-revealed { opacity: 1; transform: translateY(0); }
.ct-faq-item--open {
    border-color: rgba(164,16,52,.2);
    box-shadow: 0 4px 20px rgba(164,16,52,.08);
}

.ct-faq-item__question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #1C1514;
    transition: background .2s;
}
.ct-faq-item__question:hover { background: rgba(164,16,52,.025); }
.ct-faq-item--open .ct-faq-item__question { color: #A41034; }

.ct-faq-item__icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: rgba(164,16,52,.1);
    color: #A41034;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    transition: background .2s, color .2s;
}
.ct-faq-item--open .ct-faq-item__icon { background: #A41034; color: #fff; }

.ct-faq-item__question > span:not(.ct-faq-item__icon) { flex: 1; }

.ct-faq-item__chevron {
    font-size: var(--fs-xs);
    color: #9ca3af;
    transition: transform .3s ease;
    flex-shrink: 0;
}
.ct-faq-item--open .ct-faq-item__chevron { transform: rotate(180deg); color: #A41034; }

.ct-faq-item__answer {
    padding: 0 20px 20px 68px;
    font-size: var(--fs-sm);
    color: #4b5563;
    line-height: 1.75;
}
.ct-faq-item__answer[hidden] { display: none; }
.ct-faq-item__answer a { color: #A41034; font-weight: 600; text-decoration: none; }
.ct-faq-item__answer a:hover { text-decoration: underline; }

/* ================================================================
   9.  BOTTOM CTA STRIP
================================================================ */
.ct-cta-strip {
    background: #1C1514;
    padding: 56px 0;
    position: relative;
    overflow: hidden;
    }
.ct-cta-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 15% 50%, rgba(164,16,52,.3), transparent);
    pointer-events: none;
}
.ct-cta-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}

.ct-cta-strip__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}
.ct-cta-strip__title {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -.025em;
}
.ct-cta-strip__sub { font-size: var(--fs-sm); color: rgba(255,255,255,.55); margin: 0; }
.ct-cta-strip__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.ct-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    transition: opacity .2s, transform .2s, box-shadow .2s;
    cursor: pointer;
    white-space: nowrap;
}
.ct-btn--white {
    background: #fff;
    color: #A41034;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.ct-btn--white:hover { opacity: .9; transform: translateY(-2px); text-decoration: none; color: #A41034; }

.ct-btn--outline-white {
    background: transparent;
    color: rgba(255,255,255,.8);
    border: 1.5px solid rgba(255,255,255,.2);
}
.ct-btn--outline-white:hover {
    border-color: rgba(255,255,255,.5);
    color: #fff;
    text-decoration: none;
}

/* ================================================================
   10.  SCROLL-REVEAL BASE STATE
         (elements start invisible; JS adds .ct-revealed)
================================================================ */
.ct-contact-card,
.ct-way-card,
.ct-faq-item {
    /* opacity/transform set per-component above */
}

/* ================================================================
   11.  RESPONSIVE
================================================================ */

/* Tablet */
@media (max-width: 991px) {
    .ct-hero    { padding: 64px 0 56px; }
    .ct-body    { padding: 48px 0 60px; }
    .ct-ways-grid { grid-template-columns: 1fr 1fr; }
    .ct-form-card { padding: 32px 28px; }
    .ct-info-panel { padding: 30px 26px; }
}

/* Large mobile */
@media (max-width: 767px) {
    .ct-row-2 { grid-template-columns: 1fr; }
    .ct-stats-grid { gap: 0; }
    .ct-stat { min-width: 80px; padding: 18px 12px; }
    .ct-stat__num { font-size: 1.4rem; }
    .ct-stat-divider { height: 24px; }
    .ct-ways-grid { grid-template-columns: 1fr; }
    .ct-cta-strip__inner { flex-direction: column; text-align: center; }
    .ct-cta-strip__actions { justify-content: center; }
    .ct-form-footer { flex-direction: column; align-items: stretch; }
    .ct-submit-btn { width: 100%; justify-content: center; }
    .ct-privacy-note { justify-content: center; }
}

/* Small mobile */
@media (max-width: 575px) {
    .ct-hero { padding: 52px 0 48px; }
    .ct-hero__title { letter-spacing: -.02em; }
    .ct-trust-row { gap: 8px; }
    .ct-trust-chip { font-size: 11.5px; padding: 6px 11px; }
    .ct-form-card { padding: 24px 18px; }
    .ct-info-panel { padding: 24px 18px; }
    .ct-inquiry-tabs { gap: 5px; }
    .ct-inquiry-tab { padding: 7px 11px; font-size: 11.5px; }
    .ct-map-frame iframe { height: 260px; }
    .ct-faq-item__answer { padding-left: 20px; }
    .ct-faq-item__question { font-size: var(--fs-sm); padding: 15px 16px; }
}

/* ================================================================
   12.  MOTION PREFERENCE
================================================================ */
@media (prefers-reduced-motion: reduce) {
    .ct-hero__orb,
    .ct-info-panel::after,
    .ct-cta-strip::before,
    .ct-contact-card,
    .ct-way-card,
    .ct-faq-item,
    .ct-stat,
    .ct-soc-btn,
    .ct-submit-btn,
    .ct-btn,
    .ct-faq-item__chevron {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ================================================================
   COMMUNITY FORUMS  —  forum-* namespace
   Brand system: 60% #FFFFFF / 30% #A41034 / 10% #3B2C2F
================================================================ */
.forum-hero, .forum-filter-bar, .forum-main, .forum-cta, .forum-modal {
    --fm-primary:      #A41034;
    --fm-primary-dark: #7c0c27;
    --fm-dark:         #3B2C2F;
    --fm-bg:           #FFFFFF;
    --fm-bg-soft:      #FAF7F7;
    --fm-border:       #ECE2E3;
}

/* ── Hero ── */
.forum-hero {
    background: var(--fm-bg);
    padding: 56px 5vw 0;
        position: relative;
    overflow: hidden;
}
.forum-hero::before {
    content: ''; position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(164,16,52,.06) 0%, transparent 70%);
    top: -260px; right: -120px; pointer-events: none;
}
.forum-hero__inner { max-width: 1140px; margin: 0 auto; position: relative; }
.forum-hero__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.forum-hero__title { font-size: clamp(1.9rem,4vw,2.7rem); font-weight: 800; color: var(--fm-dark); margin-bottom: 8px; letter-spacing: -.01em; }
.forum-hero__sub { font-size: var(--fs-md); color: rgba(59,44,47,.65); margin: 0; }
.forum-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

.forum-stat-row {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
    padding-bottom: 32px;
}
@media (max-width: 860px) { .forum-stat-row { grid-template-columns: repeat(2,1fr); } }
.forum-stat-card {
    background: #fff; border: 1px solid var(--fm-border); border-radius: 16px;
    padding: 20px; text-align: center;
    box-shadow: 0 2px 12px rgba(59,44,47,.05);
}
.forum-stat-card__icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(164,16,52,.08); color: var(--fm-primary); display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); margin: 0 auto 10px; }
.forum-stat-card__num { font-size: var(--fs-2xl); font-weight: 800; color: var(--fm-dark); line-height: 1; }
.forum-stat-card__label { font-size: var(--fs-xs); font-weight: 600; color: rgba(59,44,47,.55); text-transform: uppercase; letter-spacing: .4px; margin-top: 6px; }

/* ── Buttons ── */
.forum-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 10px; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; border: none; text-decoration: none; transition: all .2s; }
.forum-btn--primary { background: var(--fm-primary); color: #fff; }
.forum-btn--primary:hover { background: var(--fm-primary-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(164,16,52,.3); }
.forum-btn--outline { background: transparent; border: 2px solid var(--fm-border); color: var(--fm-dark); padding: 10px 22px; }
.forum-btn--outline:hover { border-color: var(--fm-primary); color: var(--fm-primary); }
.forum-btn--outline-light { background: transparent; border: 2px solid rgba(255,255,255,.35); color: #fff; padding: 10px 22px; }
.forum-btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.forum-btn--ghost { background: var(--fm-bg-soft); color: var(--fm-dark); }
.forum-btn--ghost:hover { background: #f1e9ea; }
.forum-btn:disabled { opacity: .7; cursor: not-allowed; }

/* ── Filter bar ── */
.forum-filter-bar {
    background: #fff; border-bottom: 1px solid var(--fm-border); padding: 18px 5vw;
    position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(59,44,47,.05);
    margin-left: -5vw !important; margin-right: -5vw !important;
    padding-left: 5vw !important; padding-right: 5vw !important;
}
.forum-filter-bar__inner { max-width: 1140px; margin: 0 auto; }
.forum-search-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.forum-search-wrap { position: relative; flex: 1; min-width: 220px; }
.forum-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(59,44,47,.4); font-size: var(--fs-sm); }
.forum-search { width: 100%; border: 1.5px solid var(--fm-border); background: var(--fm-bg-soft); border-radius: 10px; padding: 12px 14px 12px 38px; font-size: var(--fs-sm); color: var(--fm-dark); transition: border-color .2s, background .2s; }
.forum-search::placeholder { color: rgba(59,44,47,.4); }
.forum-search:focus { outline: none; border-color: var(--fm-primary); background: #fff; }
.forum-select { border: 1.5px solid var(--fm-border); background: var(--fm-bg-soft); border-radius: 10px; padding: 11px 14px; font-size: var(--fs-sm); color: var(--fm-dark); cursor: pointer; }
.forum-select--full { width: 100%; }
.forum-search-btn { background: var(--fm-primary); color: #fff; border: none; border-radius: 10px; padding: 11px 16px; cursor: pointer; transition: background .2s; }
.forum-search-btn:hover { background: var(--fm-primary-dark); }

.forum-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.forum-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 20px;
    font-size: var(--fs-xs); font-weight: 700; color: rgba(59,44,47,.65);
    background: var(--fm-bg-soft); border: 1px solid var(--fm-border);
    text-decoration: none; white-space: nowrap; transition: all .15s;
}
.forum-pill:hover { border-color: rgba(164,16,52,.3); color: var(--fm-primary); }
.forum-pill--active { background: var(--fm-primary); color: #fff; border-color: var(--fm-primary); }

/* ── Main layout ── */
.forum-main {
    padding: 32px 5vw 0; background: var(--fm-bg-soft); min-height: 400px;
    margin-left: -5vw !important; margin-right: -5vw !important;
    padding-left: 5vw !important; padding-right: 5vw !important;
}
.forum-main__inner { max-width: 1140px; margin: 0 auto; padding-bottom: 56px; display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .forum-main__inner { grid-template-columns: 1fr; } }

.forum-empty { text-align: center; padding: 80px 24px; color: rgba(59,44,47,.5); background: #fff; border-radius: 16px; border: 1px solid var(--fm-border); }
.forum-empty i { font-size: 48px; margin-bottom: 16px; display: block; color: rgba(164,16,52,.3); }
.forum-empty h3 { font-size: var(--fs-lg); font-weight: 800; color: var(--fm-dark); margin-bottom: 6px; }
.forum-empty p { font-size: var(--fs-sm); margin-bottom: 20px; }

/* ── Discussion cards ── */
.forum-thread-list { display: flex; flex-direction: column; gap: 14px; }
.forum-card {
    display: flex; gap: 0; background: #fff;
    border: 1px solid var(--fm-border); border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(59,44,47,.04);
    transition: transform .15s, box-shadow .2s, border-color .2s;
}
.forum-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(59,44,47,.1); border-color: rgba(164,16,52,.2); }
.forum-card--pinned { border-color: rgba(164,16,52,.3); background: linear-gradient(180deg, rgba(164,16,52,.03), #fff 60px); }

/* Vertical vote control (Stack Overflow style) */
.forum-vote-col {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 18px 16px;
    background: var(--fm-bg-soft); border-right: 1px solid var(--fm-border);
    min-width: 68px;
}
.forum-vote-btn {
    width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--fm-border);
    background: #fff; cursor: pointer; font-size: 12px; color: rgba(59,44,47,.45);
    display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.forum-vote-btn:hover { border-color: var(--fm-primary); color: var(--fm-primary); background: rgba(164,16,52,.05); }
.forum-vote-btn--active { background: var(--fm-primary) !important; border-color: var(--fm-primary) !important; color: #fff !important; }
.forum-vote-btn--down.forum-vote-btn--active { background: var(--fm-dark) !important; border-color: var(--fm-dark) !important; }
.forum-vote-score { font-size: var(--fs-lg); font-weight: 800; color: var(--fm-dark); line-height: 1; }

.forum-card__body { flex: 1; padding: 18px 20px; min-width: 0; }
.forum-card__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.forum-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; border-radius: 5px; padding: 3px 8px; }
.forum-badge--pinned     { color: var(--fm-primary); background: rgba(164,16,52,.1); }
.forum-badge--solved     { color: #1f7a3d; background: rgba(31,122,61,.1); }
.forum-badge--trending   { color: #fff; background: var(--fm-primary); }
.forum-badge--new        { color: var(--fm-dark); background: rgba(59,44,47,.08); }
.forum-badge--instructor { color: #fff; background: var(--fm-dark); }

.forum-card__title {
    display: block; font-size: var(--fs-md); font-weight: 800; color: var(--fm-dark);
    margin-bottom: 6px; text-decoration: none; line-height: var(--lh-snug);
}
.forum-card__title:hover { color: var(--fm-primary); }
.forum-card__excerpt { font-size: var(--fs-sm); color: rgba(59,44,47,.6); margin-bottom: 14px; line-height: var(--lh-normal); }

.forum-card__footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.forum-card__author { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: rgba(59,44,47,.55); }
.forum-card__avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.forum-card__author-name { font-weight: 700; color: var(--fm-dark); }
.forum-card__dot { color: rgba(59,44,47,.3); }
.forum-card__course {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: 700; color: var(--fm-primary);
    background: rgba(164,16,52,.07); border-radius: 6px;
    padding: 4px 10px; text-decoration: none;
}
.forum-card__course:hover { background: rgba(164,16,52,.14); color: var(--fm-primary); }
.forum-card__course--general { color: rgba(59,44,47,.55); background: var(--fm-bg-soft); }
.forum-card__meta { display: flex; gap: 12px; margin-left: auto; }
.forum-meta-item { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; color: rgba(59,44,47,.45); }
.forum-meta-item--answered { color: #1f7a3d; }

.forum-pagination { margin-top: 24px; }
.forum-pagination .pagination { justify-content: center; }

/* ── Sidebar ── */
.forum-sidebar { display: flex; flex-direction: column; gap: 16px; }
.forum-side-card { background: #fff; border: 1px solid var(--fm-border); border-radius: 16px; padding: 20px; box-shadow: 0 2px 10px rgba(59,44,47,.04); }
.forum-side-title { font-size: var(--fs-sm); font-weight: 800; color: var(--fm-dark); display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.forum-side-title i { color: var(--fm-primary); }

.forum-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.forum-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--fm-bg-soft); border: 1px solid var(--fm-border); color: var(--fm-dark);
    border-radius: 20px; padding: 6px 12px; font-size: 12px; font-weight: 600;
    text-decoration: none; transition: all .15s;
}
.forum-tag:hover { border-color: rgba(164,16,52,.3); color: var(--fm-primary); }
.forum-tag__count { background: rgba(164,16,52,.1); color: var(--fm-primary); border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 800; }

.forum-contributor-list { display: flex; flex-direction: column; gap: 12px; }
.forum-contributor { display: flex; align-items: center; gap: 10px; }
.forum-contributor__rank { width: 20px; font-size: 12px; font-weight: 800; color: rgba(59,44,47,.4); }
.forum-contributor__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.forum-contributor__name { flex: 1; font-size: var(--fs-xs); font-weight: 700; color: var(--fm-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forum-contributor__score { font-size: 11px; font-weight: 800; color: var(--fm-primary); background: rgba(164,16,52,.08); border-radius: 10px; padding: 2px 8px; }

.forum-trend-list { display: flex; flex-direction: column; gap: 10px; }
.forum-trend-item { display: flex; align-items: flex-start; gap: 10px; text-decoration: none; }
.forum-trend-item__score { font-size: 11px; font-weight: 800; color: var(--fm-primary); background: rgba(164,16,52,.08); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.forum-trend-item__title { font-size: var(--fs-xs); font-weight: 600; color: var(--fm-dark); line-height: 1.4; }
.forum-trend-item:hover .forum-trend-item__title { color: var(--fm-primary); }

.forum-side-card--guidelines { background: var(--fm-bg-soft); }
.forum-guidelines { margin: 0; padding-left: 18px; font-size: 12px; color: rgba(59,44,47,.65); line-height: 1.7; }
.forum-guidelines li { margin-bottom: 4px; }

/* ── Join the conversation CTA ── */
.forum-cta {
    background: var(--fm-dark); padding: 64px 5vw; text-align: center;
    margin-left: -5vw !important; margin-right: -5vw !important;
    padding-left: 5vw !important; padding-right: 5vw !important;
}
.forum-cta__inner { max-width: 600px; margin: 0 auto; }
.forum-cta__title { font-size: clamp(1.6rem,3.4vw,2.2rem); font-weight: 800; color: #fff; margin-bottom: 10px; }
.forum-cta__sub { font-size: var(--fs-md); color: rgba(255,255,255,.65); margin-bottom: 28px; }
.forum-cta__actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ── Sticky mobile FAB ── */
.forum-fab {
    display: none; position: fixed; bottom: 22px; right: 22px; z-index: 200;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--fm-primary); color: #fff; border: none;
    font-size: 20px; box-shadow: 0 6px 20px rgba(164,16,52,.4);
    align-items: center; justify-content: center;
}
@media (max-width: 640px) { .forum-fab { display: flex; } }

/* ── Modal ── */
.forum-modal { border-radius: 16px; overflow: hidden; }
.forum-modal__header { background: var(--fm-dark); color: #fff; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; }
.forum-modal__title { margin: 0; font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.forum-modal__close { background: none; border: none; color: rgba(255,255,255,.6); font-size: var(--fs-xl); cursor: pointer; line-height: 1; }
.forum-modal__body { padding: 24px; }
.forum-modal__footer { padding: 16px 24px; border-top: 1px solid var(--fm-border); display: flex; justify-content: flex-end; gap: 10px; }
.forum-field { margin-bottom: 18px; }
.forum-label { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--fm-dark); margin-bottom: 6px; }
.forum-required { color: var(--fm-primary); }
.forum-optional { font-size: var(--fs-xs); font-weight: 400; color: rgba(59,44,47,.45); }
.forum-input, .forum-textarea { width: 100%; border: 1.5px solid var(--fm-border); background: var(--fm-bg-soft); border-radius: 10px; padding: 11px 14px; font-size: var(--fs-sm); color: var(--fm-dark); resize: vertical; box-sizing: border-box; transition: border-color .2s, background .2s; }
.forum-input:focus, .forum-textarea:focus { outline: none; border-color: var(--fm-primary); background: #fff; }

/* ── Mobile ── */
@media (max-width: 640px) {
    .forum-card { flex-direction: column; }
    .forum-vote-col { flex-direction: row; border-right: none; border-bottom: 1px solid var(--fm-border); width: 100%; padding: 10px 16px; }
    .forum-card__meta { margin-left: 0; }
    .forum-filter-pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .forum-hero__top { align-items: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ALL INSTRUCTORS PAGE  ·  /all-instructors
   Palette → #FFFFFF 60%  ·  #A41034 30%  ·  #1C1514 10%
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.ig-instructors-pg {
    background: #FFFFFF !important;
    min-height: 100vh;}

/* ── Hero — #A41034 dark background ── */
.ig-instructors-hero {
    position: relative;
    overflow: hidden;
    background: #A41034 !important;
    padding: 84px 0 76px;
    text-align: center;
    border-bottom: none;
    }
/* Dot-grid — white dots on dark bg */
.ig-instructors-hero__pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1.2px, transparent 1.2px);
    background-size: 26px 26px;
    pointer-events: none;
    z-index: 0;
}
/* Large white-tint circle — top right */
.ig-instructors-hero::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
/* Dark overlay circle — bottom left */
.ig-instructors-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(0,0,0,0.14) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
/* Soft white bloom at the top */
.ig-instructors-hero__glow {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 320px;
    background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 65%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}
.ig-instructors-hero__inner {
    position: relative;
    z-index: 2;
}
/* Eyebrow pill — white glass on crimson */
.ig-instructors-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.30);
    border-radius: 100px;
    padding: 7px 18px;
    margin-bottom: 22px;
}
.ig-instructors-hero__eyebrow i { font-size: 10.5px; opacity: 0.85; }
/* Title — white on crimson */
.ig-instructors-hero__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 52px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.16;
    margin: 0 0 8px;
    letter-spacing: -0.025em;
    text-transform: none;
}
/* "the Best" — italic warm white to differentiate */
.ig-instructors-hero__title .ig-hero-accent {
    color: rgba(255,255,255,0.80);
    font-style: italic;
}
/* White underline accent */
.ig-instructors-hero__title-underline {
    display: block;
    width: 64px;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.75), rgba(255,255,255,0.25));
    border-radius: 3px;
    margin: 12px auto 18px;
}
/* Subtitle — white at 78% */
.ig-instructors-hero__sub {
    font-size: 15.5px;
    color: rgba(255,255,255,0.78);
    max-width: 480px;
    margin: 0 auto 36px;
    line-height: 1.72;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Stats — 4 individual floating cards */
.ig-instructors-hero__stats {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.ig-ih-stat {
    background: #ffffff;
    border: 1px solid rgba(28,21,20,0.09);
    border-radius: 14px;
    padding: 18px 26px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(28,21,20,0.07), 0 1px 2px rgba(28,21,20,0.04);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    min-width: 110px;
}
.ig-ih-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(28,21,20,0.10), 0 2px 4px rgba(164,16,52,0.06);
}
.ig-ih-stat strong {
    display: block;
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: #A41034;
    line-height: 1;
    margin-bottom: 5px;
    letter-spacing: -0.02em;
}
.ig-ih-stat span {
    font-size: 10px;
    color: #777777;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* hide the old divider elements */
.ig-ih-stat-div { display: none; }

/* Search bar — white on crimson bg */
.ig-instructors-search-wrap {
    display: flex;
    justify-content: center;
}
.ig-instructors-search {
    position: relative;
    width: 100%;
    max-width: 520px;
}
.ig-instructors-search__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: var(--fs-sm);
    pointer-events: none;
    transition: color 0.18s;
    z-index: 1;
}
.ig-instructors-search__input {
    width: 100%;
    padding: 14px 48px 14px 46px;
    border: 2px solid rgba(255,255,255,0.20);
    border-radius: 14px;
    font-size: var(--fs-sm);
    color: #1C1514;
    background: rgba(255,255,255,0.97);
    outline: none;
    font-family: "Inter", system-ui, sans-serif;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.10);
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.ig-instructors-search__input::placeholder { color: #adb5bd; }
.ig-instructors-search__input:focus {
    background: #ffffff;
    border-color: rgba(255,255,255,0.60);
    box-shadow: 0 6px 28px rgba(0,0,0,0.22), 0 0 0 3px rgba(255,255,255,0.20);
}
.ig-instructors-search:focus-within .ig-instructors-search__icon { color: #A41034; }
.ig-instructors-search__clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    font-size: var(--fs-sm);
    cursor: pointer;
    padding: 4px;
    opacity: 0;
    transition: color 0.18s, opacity 0.18s;
    line-height: 1;
    z-index: 1;
}
.ig-instructors-search__clear:hover { color: #A41034; }

/* Hero bottom accent bar — white on crimson */
.ig-instructors-hero__bar {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.70), rgba(255,255,255,0.25));
    border-radius: 3px 3px 0 0;
}

/* ── Body ── */
.ig-instructors-body {
    padding: 48px 0 80px;
}

/* Meta row (results count) */
.ig-instructors-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.ig-instructors-count {
    font-size: var(--fs-sm);
    color: #6b7280;
    font-weight: 500;
}
.ig-instructors-count strong { color: #1C1514; font-weight: 700; }

/* ── Grid ── */
.ig-instructors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 44px;
}

/* ── Card ── */
.ig-instr-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(28,21,20,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.28s cubic-bezier(0.25,0.8,0.25,1),
                box-shadow 0.28s cubic-bezier(0.25,0.8,0.25,1),
                border-color 0.22s ease;
    box-shadow: 0 1px 3px rgba(28,21,20,0.05), 0 4px 16px rgba(28,21,20,0.07);
}
.ig-instr-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(28,21,20,0.10), 0 32px 64px rgba(164,16,52,0.09);
    border-color: rgba(164,16,52,0.20);
}

/* Crimson header band */
.ig-instr-card__header {
    width: 100%;
    height: 88px;
    background: linear-gradient(135deg, #A41034 0%, #7a0d24 100%);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.ig-instr-card__header-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 18px 18px;
}
.ig-instr-card__header-shine {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}

/* Avatar — overlaps the crimson header */
.ig-instr-card__avatar-wrap {
    margin-top: -46px;
    position: relative;
    z-index: 3;
    margin-bottom: 14px;
}
.ig-instr-card__avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 0 0 0 2px rgba(164,16,52,0.20), 0 6px 20px rgba(28,21,20,0.14);
    display: block;
    transition: box-shadow 0.24s ease, transform 0.24s ease;
}
.ig-instr-card:hover .ig-instr-card__avatar {
    box-shadow: 0 0 0 3px #A41034, 0 8px 24px rgba(28,21,20,0.18);
    transform: scale(1.04);
}

/* Card body */
.ig-instr-card__body {
    padding: 0 24px 20px;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Name */
.ig-instr-card__name {
    font-size: 16.5px;
    font-weight: 700;
    color: #1C1514;
    margin: 0 0 4px;
    line-height: var(--lh-snug);
    transition: color 0.18s ease;
    text-transform: none;
    letter-spacing: 0;
}
.ig-instr-card:hover .ig-instr-card__name { color: #A41034; }

/* Role */
.ig-instr-card__role {
    display: block;
    font-size: var(--fs-xs);
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 12px;
    text-transform: none;
    letter-spacing: 0;
}

/* Stars */
.ig-instr-card__stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 14px;
}
.ig-instr-card__stars .fa-star,
.ig-instr-card__stars .fa-star-half-alt { color: #f59e0b; font-size: var(--fs-xs); }
.ig-instr-card__stars .far.fa-star { color: #d1d5db; font-size: var(--fs-xs); }
.ig-instr-card__rating-val {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #374151;
    margin-left: 5px;
}

/* Meta badges */
.ig-instr-card__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.ig-instr-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 100px;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1;
}
.ig-instr-card__badge--courses {
    background: rgba(28,21,20,0.06);
    color: #374151;
    border: 1px solid rgba(28,21,20,0.09);
}
.ig-instr-card__badge--courses i { color: #A41034; font-size: 9px; }
.ig-instr-card__badge--students {
    background: rgba(164,16,52,0.07);
    color: #A41034;
    border: 1px solid rgba(164,16,52,0.14);
}
.ig-instr-card__badge--students i { font-size: 9px; }

/* View Profile CTA */
.ig-instr-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    background: #A41034;
    color: #ffffff;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
    letter-spacing: 0.01em;
    margin-top: auto;
    box-shadow: 0 3px 10px rgba(164,16,52,0.22);
}
.ig-instr-card__cta i { font-size: var(--fs-xs); transition: transform 0.18s; }
.ig-instr-card__cta:hover {
    background: #860d2b;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(164,16,52,0.32);
}
.ig-instr-card__cta:hover i { transform: translateX(3px); }

/* Social strip */
.ig-instr-card__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(28,21,20,0.07);
    width: 100%;
    background: rgba(28,21,20,0.015);
    margin-top: 18px;
}
.ig-instr-soc-link {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(164,16,52,0.07);
    color: #A41034;
    font-size: 11.5px;
    text-decoration: none;
    border: 1px solid rgba(164,16,52,0.12);
    transition: background 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.ig-instr-soc-link:hover {
    background: #A41034;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(164,16,52,0.28);
    border-color: #A41034;
}

/* ── Empty states ── */
.ig-instr-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 24px;
    text-align: center;
}
.ig-instr-empty--search {
    padding: 48px 24px;
}
.ig-instr-empty__icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: rgba(164,16,52,0.07);
    border: 1px solid rgba(164,16,52,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-3xl);
    color: #A41034;
    margin-bottom: 20px;
}
.ig-instr-empty__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: #1C1514;
    margin: 0 0 8px;
    text-transform: none;
}
.ig-instr-empty__sub {
    font-size: var(--fs-sm);
    color: #6b7280;
    margin: 0;
    line-height: var(--lh-normal);
}

/* ── Pagination ── */
.ig-instructors-pagination {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}
.ig-instructors-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
}
.ig-instructors-pagination .page-item .page-link {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    border: 1.5px solid rgba(28,21,20,0.12) !important;
    background: #ffffff !important;
    color: #1C1514 !important;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.18s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding: 0 12px;
}
.ig-instructors-pagination .page-item .page-link:hover {
    background: rgba(164,16,52,0.07) !important;
    border-color: rgba(164,16,52,0.28) !important;
    color: #A41034 !important;
    transform: translateY(-1px);
}
.ig-instructors-pagination .page-item.active .page-link {
    background: #A41034 !important;
    border-color: #A41034 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(164,16,52,0.32);
}
.ig-instructors-pagination .page-item.disabled .page-link {
    opacity: 0.4 !important;
    pointer-events: none;
    cursor: default;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
    .ig-instructors-hero__title { font-size: 42px; }
    .ig-instructors-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .ig-ih-stat { padding: 0 18px; }
}
@media (max-width: 991px) {
    .ig-instructors-hero { padding: 60px 0 56px; }
    .ig-instructors-hero__title { font-size: 34px; }
    .ig-instructors-hero__sub { font-size: var(--fs-sm); }
    .ig-instructors-hero__stats { padding: 14px 16px; gap: 0; }
    .ig-ih-stat { padding: 0 14px; }
    .ig-ih-stat strong { font-size: var(--fs-lg); }
    .ig-instructors-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .ig-instructors-body { padding: 40px 0 64px; }
}
@media (max-width: 767px) {
    .ig-instructors-hero__stats {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 20px;
    }
    .ig-ih-stat-div { display: none; }
    .ig-ih-stat { padding: 0 12px; }
}
@media (max-width: 575px) {
    .ig-instructors-hero { padding: 48px 0 44px; }
    .ig-instructors-hero__title { font-size: var(--fs-3xl); }
    .ig-instructors-grid { grid-template-columns: 1fr; gap: 14px; }
    .ig-instructors-body { padding: 32px 0 52px; }
    .ig-instr-card__body { padding: 0 18px 16px; }
    .ig-instructors-search__input { font-size: var(--fs-sm); }
}

/* ── Page header ── */
.cert-page-header {
    background: #1C1514;
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: #fff;
}
.cert-page-header .ph-icon {
    width: 56px; height: 56px;
    background: rgba(255,255,255,.18);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-2xl);
    flex-shrink: 0;
}
.cert-page-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; color:#FFFFFF; }
.cert-page-header p  { font-size: .9rem; opacity: .85; margin: 0;  color:#FFFFFF;  }

/* ── Search bar ── */
.cert-search-wrap {

    margin-top: 20px;
    margin-bottom: 24px;
}
.cert-search-wrap form {
    display: flex;
    gap: 10px;
}
.cert-search-wrap input[type="text"] {
    flex: 1;
    border: 1.5px solid #FFFFFF;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: .92rem;
    outline: none;
    transition: border-color .2s;
}
.cert-search-wrap input[type="text"]:focus { border-color: #A41034; }
.cert-search-wrap button {
    background: #A41034;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
}
@if(isset($search) && $search)
.cert-search-clear {
    background: #FFFFFF;
    color: #1C1514;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: .88rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
@endif

/* ── Grid ── */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

/* ── Card ── */
.cert-card {
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #FFFFFF;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.cert-card:hover {
    box-shadow: 0 8px 28px rgba(164,16,52,.12);
    transform: translateY(-3px);
}

/* Preview banner */
.cert-preview {
    background: linear-gradient(135deg, #A41034 0%, #6b0a23 100%);
    height: 120px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cert-preview::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 6px;
    pointer-events: none;
}
.cert-preview .cert-watermark {
    position: absolute;
    font-size: 80px;
    font-weight: 900;
    color: rgba(255,255,255,.06);
    letter-spacing: .05em;
    white-space: nowrap;
}
.cert-preview .cert-seal {
    position: absolute;
    top: 10px; right: 12px;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-md); color: #fff;
}
.cert-preview .cert-inner {
    text-align: center;
    z-index: 1;
    padding: 0 16px;
}
.cert-preview .cert-inner .cof {
    font-size: .65rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    margin-bottom: 4px;
}
.cert-preview .cert-inner .cert-name {
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    line-height: var(--lh-snug);
}

/* Body */
.cert-body {
    padding: 16px 18px 12px;
}
.cert-course-title {
    font-size: .95rem;
    font-weight: 700;
    color: #1C1514;
    margin-bottom: 6px;
    line-height: var(--lh-snug);
}
.cert-meta-row {
    display: flex;
    gap: 12px;
    font-size: .78rem;
    color: #888;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.cert-meta-row .cm-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cert-num {
    font-size: .7rem;
    color: #A41034;
    font-weight: 600;
    letter-spacing: .04em;
}

/* Footer */
.cert-footer {
    border-top: 1px solid #f0f0f0;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cert-footer a, .cert-footer button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 7px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
}
.cert-btn-view    { background: #A41034; color: #fff !important; }
.cert-btn-dl      { background: #f0f4ff; color: #3b5fc0 !important; }
.cert-btn-li      { background: #e8f3ff; color: #0A66C2 !important; }
.cert-btn-copy    { background: #f5f5f5; color: #555 !important; }
.cert-btn-copy:hover { background: #e8e8e8; }

/* Empty state */
.cert-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 14px;
    border: 1.5px dashed #FFFFFF;
}
.cert-empty-icon { font-size: var(--fs-5xl); margin-bottom: 14px; color: #ccc; }
.cert-empty-title { font-size: 1.15rem; font-weight: 700; color: #333; margin-bottom: 8px; }
.cert-empty-text { font-size: .9rem; color: #888; margin-bottom: 20px; }
.cert-browse-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: #A41034; color: #fff !important;
    padding: 11px 24px; border-radius: 10px;
    font-weight: 600; font-size: .9rem; text-decoration: none;
}

:root { --tm-red:#A41034; --tm-dark:#1C1514; --tm-bg:#FFFFFF; --tm-white:#fff; }
.tm-page { background: var(--tm-bg); min-height: 80vh; margin-left: -5vw !important;
    margin-right: -5vw !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important;}
.tm-page-header { background: var(--tm-dark); padding: 36px 5vw; margin-left: -5vw !important;
    margin-right: -5vw !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important; }

.tm-page-header__inner { max-width: 1140px; margin: 0 auto; }
.tm-back { color: rgba(255,255,255,.5); font-size: var(--fs-sm); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.tm-back:hover { color: #fff; }
.tm-page-title { color: #fff; font-size: var(--fs-2xl); font-weight: 800; margin: 0 0 4px; }
.tm-page-sub { color: rgba(255,255,255,.5); font-size: var(--fs-sm); margin: 0; }
.tm-page-body { max-width: 1140px; margin: 0 auto; padding: 40px 5vw 72px; display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
@media(max-width:820px){ .tm-page-body { grid-template-columns: 1fr; } }

.tm-alert { padding: 13px 18px; border-radius: 8px; font-size: var(--fs-sm); margin-bottom: 24px; display: flex; align-items: flex-start; gap: 10px; }
.tm-alert--error { background: rgba(164,16,52,.08); color: var(--tm-red); border: 1px solid rgba(164,16,52,.2); }

.tm-btn { display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 8px; padding: 12px 22px; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; text-decoration: none; transition: all .2s; }
.tm-btn--primary { background: var(--tm-red); color: #fff; }
.tm-btn--primary:hover { background: #8a0c29; color: #fff; }
.tm-btn--ghost { background: rgba(164,16,52,.08); color: var(--tm-red); }
.tm-btn--ghost:hover { background: rgba(164,16,52,.15); }

.tm-form-wrap { background: var(--tm-white); border-radius: 16px; padding: 36px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.tm-form__group { margin-bottom: 24px; }
.tm-form__label { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--tm-dark); margin-bottom: 8px; }
.tm-form__label span { color: var(--tm-red); }
.tm-form__input { width: 100%; border: 2px solid #ddd; border-radius: 8px; padding: 12px 16px; font-size: var(--fs-sm); color: var(--tm-dark); background: #fafafa; transition: border-color .2s; box-sizing: border-box; }
.tm-form__input:focus { outline: none; border-color: var(--tm-red); background: #fff; }
.tm-form__textarea { resize: vertical; min-height: 100px; }
.tm-form__hint { font-size: var(--fs-xs); color: #aaa; margin: 6px 0 0; }
.tm-form__actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--tm-bg); }

.tm-info-panel { background: var(--tm-dark); border-radius: 16px; padding: 28px; color: #fff; }
.tm-info-panel__title { font-size: var(--fs-base); font-weight: 800; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.tm-info-panel__title i { color: #f4c430; }
.tm-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tm-info-list li { font-size: var(--fs-sm); color: rgba(255,255,255,.75); display: flex; align-items: flex-start; gap: 10px; }
.tm-info-list li i { color: #4caf50; flex-shrink: 0; margin-top: 2px; }

:root { --tm-red:#A41034; --tm-dark:#1C1514; --tm-bg:#FFFFFF; --tm-white:#fff; }
.tm-page { background: var(--tm-bg); min-height: 80vh; }
.tm-page-header { background: var(--tm-dark); padding: 36px 5vw; }
.tm-page-header__inner { max-width: 1300px; margin: 0 auto; }
.tm-back { color: rgba(255,255,255,.5); font-size: var(--fs-sm); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.tm-back:hover { color: #fff; }
.tm-page-title { color: #fff; font-size: var(--fs-2xl); font-weight: 800; margin: 0 0 4px; }
.tm-page-sub { color: rgba(255,255,255,.5); font-size: var(--fs-sm); margin: 0; }
.tm-dash-body {  margin: 0 auto; padding: 32px 5vw 72px; margin-left: -5vw !important;
    margin-right: -5vw !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important; }

.tm-alert { padding: 13px 18px; border-radius: 8px; font-size: var(--fs-sm); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.tm-alert--success { background: rgba(76,175,80,.1); color: #388e3c; border: 1px solid rgba(76,175,80,.25); }
.tm-alert--error   { background: rgba(164,16,52,.08); color: var(--tm-red); border: 1px solid rgba(164,16,52,.2); }

/* Stats */
.tm-stats-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 14px; margin-bottom: 28px; }
.tm-stat-card { background: var(--tm-white); border-radius: 12px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.06); border-left: 4px solid #ddd; }
.tm-stat-card--red  { border-left-color: var(--tm-red); }
.tm-stat-card--green{ border-left-color: #4caf50; }
.tm-stat-card__icon { width: 38px; height: 38px; border-radius: 8px; background: var(--tm-bg); display: flex; align-items: center; justify-content: center; color: var(--tm-red); font-size: var(--fs-md); flex-shrink: 0; }
.tm-stat-card__num  { font-size: var(--fs-xl); font-weight: 800; color: var(--tm-dark); line-height: 1; }
.tm-stat-card__label{ font-size: var(--fs-xs); color: #999; margin-top: 3px; }

/* Grid */
.tm-main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
@media(max-width:900px){ .tm-main-grid { grid-template-columns: 1fr; } }

/* Cards */
.tm-card { background: var(--tm-white); border-radius: 14px; padding: 24px; box-shadow: 0 1px 8px rgba(0,0,0,.06); }
.tm-card__title { font-size: var(--fs-sm); font-weight: 800; color: var(--tm-dark); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.tm-card__title i { color: var(--tm-red); }
.tm-pill { background: var(--tm-bg); color: #666; border-radius: 50px; padding: 2px 10px; font-size: var(--fs-xs); font-weight: 700; margin-left: auto; }
.tm-empty-small { color: #aaa; font-size: var(--fs-sm); text-align: center; padding: 20px 0; }

/* Forms */
.tm-btn { display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 8px; padding: 12px 18px; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; text-decoration: none; transition: all .2s; }
.tm-btn--primary { background: var(--tm-red); color: #fff; }
.tm-btn--primary:hover { background: #8a0c29; color: #fff; }
.tm-form__input { border: 2px solid #ddd; border-radius: 8px; padding: 10px 14px; font-size: var(--fs-sm); color: var(--tm-dark); background: #fafafa; transition: border-color .2s; box-sizing: border-box; }
.tm-form__input:focus { outline: none; border-color: var(--tm-red); background: #fff; }
.tm-form__select { cursor: pointer; }
.tm-form__hint { font-size: var(--fs-xs); color: #aaa; margin: 6px 0 0; }
.tm-form__group { margin-bottom: 16px; }
.tm-invite-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tm-invite-row .tm-form__input { flex: 1; min-width: 160px; }
.tm-invite-row .tm-form__select { width: 130px; }

/* Table */
.tm-table-wrap { overflow-x: auto; }
.tm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tm-table th { background: var(--tm-bg); color: #777; font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; padding: 10px 14px; text-align: left; white-space: nowrap; }
.tm-table td { padding: 12px 14px; border-bottom: 1px solid var(--tm-bg); vertical-align: middle; }
.tm-table tr:last-child td { border-bottom: none; }
.tm-table tr:hover td { background: rgba(164,16,52,.02); }
.tm-course-col { min-width: 90px; max-width: 120px; }

.tm-member-info { display: flex; align-items: center; gap: 10px; }
.tm-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tm-avatar--fallback { background: var(--tm-red); color: #fff; font-weight: 800; font-size: var(--fs-sm); display: flex; align-items: center; justify-content: center; }
.tm-member-name  { font-weight: 700; color: var(--tm-dark); font-size: var(--fs-sm); }
.tm-member-email { font-size: var(--fs-xs); color: #aaa; }

.tm-role-badge { padding: 2px 9px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 700; }
.tm-role-badge--manager { background: rgba(164,16,52,.1); color: var(--tm-red); }
.tm-role-badge--member  { background: var(--tm-bg); color: #666; }
.tm-status-dot { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); }
.tm-status-dot::before { content:''; width:7px; height:7px; border-radius:50%; display:inline-block; }
.tm-status-dot--active::before  { background: #4caf50; }
.tm-status-dot--pending::before { background: #ff9800; }
.tm-status-dot--inactive::before{ background: #bbb; }

.tm-mini-bar { height: 5px; background: #eee; border-radius: 3px; width: 70px; display: inline-block; overflow: hidden; vertical-align: middle; }
.tm-mini-bar__fill { height: 100%; background: var(--tm-red); border-radius: 3px; transition: width .4s; }
.tm-pct { font-size: var(--fs-xs); color: #888; margin-left: 4px; }
.tm-pct--na { color: #ccc; }
.tm-green { color: #388e3c; }
.tm-orange { color: #f57c00; }
.tm-red-text { color: var(--tm-red); }

.tm-icon-btn { background: none; border: none; color: #ccc; cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: all .15s; }
.tm-icon-btn:hover { background: rgba(164,16,52,.08); color: var(--tm-red); }

/* Course chips */
.tm-course-list { display: flex; flex-direction: column; gap: 10px; }
.tm-course-chip { display: flex; align-items: center; gap: 10px; background: var(--tm-bg); border-radius: 8px; padding: 8px 12px; }
.tm-course-chip__thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.tm-course-chip__thumb--fallback { background: rgba(164,16,52,.1); color: var(--tm-red); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); }
.tm-course-chip span { font-size: var(--fs-sm); font-weight: 600; color: var(--tm-dark); }


/* ================================================================
   SKILL GAP ASSESSMENT  —  sga-* namespace
   Brand system: 60% #FFFFFF / 30% #A41034 / 10% #3B2C2F
================================================================ */
.sga-hero,
.sga-assess,
.sga-results {
    --sga-primary:      #A41034;
    --sga-primary-dark: #7c0c27;
    --sga-dark:         #3B2C2F;
    --sga-bg:           #FFFFFF;
    --sga-bg-soft:      #FAF7F7;
    --sga-border:       #ECE2E3;
}

/* ── Hero ── */
.sga-hero {
    background: var(--sga-bg);
    padding: 76px 5vw 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
    }
.sga-hero::before {
    content: '';
    position: absolute;
    width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(164,16,52,.06) 0%, transparent 70%);
    top: -260px; left: 50%; transform: translateX(-50%);
    pointer-events: none;
}
.sga-hero__inner { max-width: 760px; margin: 0 auto; position: relative; }
.sga-hero__badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(164,16,52,.08); color: var(--sga-primary);
    border: 1px solid rgba(164,16,52,.2);
    border-radius: 20px; padding: 6px 16px;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; margin-bottom: 22px;
}
.sga-hero__title { font-size: clamp(2rem,4.6vw,3rem); font-weight: 800; color: var(--sga-dark); margin-bottom: 16px; line-height: 1.18; letter-spacing: -.01em; }
.sga-hero__accent { color: var(--sga-primary); }
.sga-hero__sub { font-size: var(--fs-md); color: rgba(59,44,47,.72); margin-bottom: 28px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: var(--lh-relaxed); }

.sga-trust-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin-bottom: 8px; }
.sga-trust-item { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 600; color: var(--sga-dark); }
.sga-trust-item i { color: var(--sga-primary); font-size: var(--fs-sm); }

/* ── Assessment card ── */
.sga-assess {
    background: var(--sga-bg-soft);
    padding: 8px 5vw 64px;
    }
.sga-assess__inner { max-width: 760px; margin: 0 auto; }
.sga-card {
    background: var(--sga-bg);
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(59,44,47,.08);
    border: 1px solid var(--sga-border);
    overflow: hidden;
}

/* ── Progress ── */
.sga-progress { position: sticky; top: 0; z-index: 5; background: var(--sga-bg); padding: 22px 32px 18px; border-bottom: 1px solid var(--sga-border); }
.sga-progress__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sga-progress__step { font-size: var(--fs-sm); font-weight: 700; color: var(--sga-dark); }
.sga-progress__pct { font-size: var(--fs-xs); font-weight: 600; color: var(--sga-primary); }
.sga-progress__track { height: 6px; border-radius: 4px; background: #f1e9ea; overflow: hidden; margin-bottom: 18px; }
.sga-progress__fill { height: 100%; background: linear-gradient(90deg, var(--sga-primary), #c81842); border-radius: 4px; transition: width .35s ease; }
.sga-progress__nodes { display: flex; justify-content: space-between; }
.sga-progress__node { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.sga-progress__dot {
    width: 26px; height: 26px; border-radius: 50%;
    background: #f1e9ea; color: rgba(59,44,47,.45);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    transition: background .25s, color .25s;
}
.sga-progress__label { font-size: 11px; font-weight: 600; color: rgba(59,44,47,.45); text-transform: uppercase; letter-spacing: .3px; }
.sga-progress__node--active .sga-progress__dot { background: var(--sga-primary); color: #fff; }
.sga-progress__node--active .sga-progress__label { color: var(--sga-dark); }
.sga-progress__node--done .sga-progress__dot { background: rgba(164,16,52,.15); color: var(--sga-primary); }
.sga-progress__node--done .sga-progress__label { color: var(--sga-dark); }
@media (max-width: 560px) { .sga-progress { padding: 18px 20px 14px; } .sga-progress__label { display: none; } }

/* ── Form / Steps ── */
.sga-form { text-align: left; padding: 32px 32px 28px; }
.sga-step { display: none; }
.sga-step--active { display: block; animation: sgaFadeIn .25s ease; }
@keyframes sgaFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.sga-step__head { margin-bottom: 20px; }
.sga-step__title { font-size: var(--fs-xl); font-weight: 800; color: var(--sga-dark); margin-bottom: 6px; }
.sga-step__hint { font-size: var(--fs-sm); color: rgba(59,44,47,.6); }

.sga-form__group { display: flex; flex-direction: column; gap: 8px; }
.sga-label { font-size: var(--fs-sm); font-weight: 700; color: var(--sga-dark); display: flex; align-items: center; gap: 6px; }
.sga-label i { color: var(--sga-primary); font-size: var(--fs-xs); }
.sga-required { color: var(--sga-primary); }
.sga-optional { font-size: var(--fs-xs); font-weight: 400; color: rgba(59,44,47,.45); }
.sga-input, .sga-textarea {
    background: var(--sga-bg-soft);
    border: 1.5px solid var(--sga-border);
    border-radius: 10px;
    color: var(--sga-dark);
    padding: 13px 16px;
    font-size: var(--fs-sm);
    width: 100%;
    transition: border-color .2s, background .2s, box-shadow .2s;
    resize: vertical;
    box-sizing: border-box;
}
.sga-input--lg { padding: 16px 18px; font-size: var(--fs-md); font-weight: 600; }
.sga-input::placeholder, .sga-textarea::placeholder { color: rgba(59,44,47,.35); }
.sga-input:focus, .sga-textarea:focus {
    outline: none;
    border-color: var(--sga-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(164,16,52,.08);
}
.sga-input--error { border-color: var(--sga-primary); background: rgba(164,16,52,.04); }
.sga-field-error { display: none; font-size: var(--fs-xs); font-weight: 600; color: var(--sga-primary); margin-top: 4px; }
.sga-field-error--show { display: block; }

.sga-chip-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.sga-chip-suggest__label { font-size: var(--fs-xs); font-weight: 600; color: rgba(59,44,47,.5); margin-right: 2px; }
.sga-suggest-chip {
    background: var(--sga-bg-soft); border: 1px solid var(--sga-border);
    color: var(--sga-dark); border-radius: 20px; padding: 6px 14px;
    font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
    transition: all .15s;
}
.sga-suggest-chip:hover { background: rgba(164,16,52,.08); border-color: rgba(164,16,52,.3); color: var(--sga-primary); }

.sga-privacy-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: var(--fs-xs); color: rgba(59,44,47,.55); }
.sga-privacy-note i { color: var(--sga-primary); }

/* ── Step nav / buttons ── */
.sga-step-nav { display: flex; justify-content: space-between; align-items: center; padding: 22px 32px; border-top: 1px solid var(--sga-border); background: var(--sga-bg-soft); }
.sga-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    border: none; border-radius: 10px;
    padding: 13px 28px;
    font-size: var(--fs-sm); font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, background .2s;
}
.sga-btn--primary { background: var(--sga-primary); color: #fff; }
.sga-btn--primary:hover { background: var(--sga-primary-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(164,16,52,.3); }
.sga-btn--primary:disabled { opacity: .7; cursor: not-allowed; transform: none; box-shadow: none; }
.sga-btn--ghost { background: rgba(164,16,52,.08); color: var(--sga-primary); }
.sga-btn--ghost:hover { background: rgba(164,16,52,.15); }
.sga-btn--outline { background: transparent; border: 2px solid var(--sga-primary); color: var(--sga-primary); padding: 11px 26px; }
.sga-btn--outline:hover { background: var(--sga-primary); color: #fff; }

/* ── Error ── */
.sga-error {
    max-width: 600px; margin: 24px auto;
    background: rgba(164,16,52,.06); border: 1px solid rgba(164,16,52,.25);
    border-radius: 10px; padding: 14px 18px;
    color: var(--sga-primary); font-size: var(--fs-sm);
    display: flex; align-items: center; gap: 10px;
}

/* ── Results ── */
.sga-results { padding: 56px 5vw 80px; background: var(--sga-bg-soft);
    margin-left: -5vw !important; margin-right: -5vw !important;
    padding-left: 5vw !important; padding-right: 5vw !important; }
.sga-results__inner { max-width: 1040px; margin: 0 auto; }

.sga-report-head { text-align: center; margin-bottom: 32px; }
.sga-report-head__badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(164,16,52,.08); color: var(--sga-primary);
    border: 1px solid rgba(164,16,52,.2);
    border-radius: 20px; padding: 5px 14px;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    margin-bottom: 14px;
}
.sga-report-head__title { font-size: clamp(1.6rem,3.4vw,2.2rem); font-weight: 800; color: var(--sga-dark); margin-bottom: 6px; }
.sga-report-head__role { font-size: var(--fs-sm); font-weight: 600; color: rgba(59,44,47,.6); }

.sga-stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 28px; }
@media (max-width: 640px) { .sga-stat-row { grid-template-columns: 1fr; } }
.sga-stat-card { background: #fff; border-radius: 14px; border: 1px solid var(--sga-border); padding: 22px 20px; text-align: center; box-shadow: 0 2px 12px rgba(59,44,47,.05); }
.sga-stat-card__icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(164,16,52,.08); color: var(--sga-primary); display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); margin: 0 auto 12px; }
.sga-stat-card__num { font-size: var(--fs-2xl); font-weight: 800; color: var(--sga-dark); line-height: 1; }
.sga-stat-card__label { font-size: var(--fs-xs); font-weight: 600; color: rgba(59,44,47,.55); text-transform: uppercase; letter-spacing: .4px; margin-top: 6px; }

.sga-summary-card {
    background: #fff;
    border: 1px solid var(--sga-border);
    border-left: 4px solid var(--sga-primary);
    border-radius: 14px;
    padding: 24px 26px;
    margin-bottom: 32px;
    display: flex; gap: 16px;
    box-shadow: 0 2px 12px rgba(59,44,47,.05);
}
.sga-summary-card__icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(164,16,52,.08); color: var(--sga-primary); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); flex-shrink: 0; }
.sga-summary-card__title { font-size: var(--fs-xs); font-weight: 700; color: var(--sga-primary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.sga-summary-card__text { font-size: var(--fs-base); color: var(--sga-dark); line-height: var(--lh-relaxed); }

.sga-section-heading { font-size: var(--fs-lg); font-weight: 800; color: var(--sga-dark); display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.sga-section-heading i { color: var(--sga-primary); }

.sga-skills-wrap { margin-bottom: 32px; }
.sga-skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sga-skill-card {
    background: #fff; border: 1px solid var(--sga-border); border-radius: 12px;
    padding: 14px 16px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 2px 10px rgba(59,44,47,.04);
}
.sga-skill-card__num {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    background: rgba(164,16,52,.1); color: var(--sga-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
}
.sga-skill-card__text { font-size: var(--fs-sm); font-weight: 600; color: var(--sga-dark); }

/* ── Timeline / Phase ── */
.sga-timeline { position: relative; margin-bottom: 12px; }
.sga-timeline__item { position: relative; padding-left: 56px; margin-bottom: 36px; }
.sga-timeline__item::before {
    content: ''; position: absolute; left: 19px; top: 40px; bottom: -36px;
    width: 2px; background: var(--sga-border);
}
.sga-timeline__item:last-child::before { display: none; }
.sga-timeline__header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.sga-timeline__node {
    position: absolute; left: 0; top: 0;
    width: 40px; height: 40px;
    background: var(--sga-primary); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); font-weight: 800;
    box-shadow: 0 4px 12px rgba(164,16,52,.3);
}
.sga-timeline__title { font-size: var(--fs-lg); font-weight: 800; color: var(--sga-dark); }
.sga-timeline__desc { font-size: var(--fs-sm); color: rgba(59,44,47,.6); margin-top: 2px; }
.sga-phase__courses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

/* ── Course card ── */
.sga-course-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--sga-border);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(59,44,47,.06);
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.sga-course-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(59,44,47,.12); }
.sga-course-thumb {
    position: relative; overflow: hidden;
    aspect-ratio: 16/9;
}
.sga-course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sga-course-cat {
    position: absolute; top: 10px; left: 10px;
    background: var(--sga-primary); color: #fff;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    padding: 3px 9px; border-radius: 5px;
}
.sga-course-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.sga-course-title { font-size: var(--fs-sm); font-weight: 700; color: var(--sga-dark); margin-bottom: 8px; line-height: var(--lh-snug); }
.sga-course-price {
    font-size: var(--fs-sm); font-weight: 700;
    color: var(--sga-primary); margin-top: auto; padding-top: 10px;
}
.sga-course-price--free { color: #2e7d32; }
.sga-enroll-btn {
    display: block; text-align: center;
    margin: 0 16px 16px;
    background: var(--sga-dark); color: #fff;
    border-radius: 8px; padding: 10px;
    font-size: var(--fs-sm); font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.sga-enroll-btn:hover { background: var(--sga-primary); color: #fff; text-decoration: none; }

.sga-empty-note { color: rgba(59,44,47,.5); text-align: center; padding: 32px 0; font-size: var(--fs-sm); }

/* ── Actions / footer ── */
.sga-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.sga-methodology-note {
    text-align: center; font-size: var(--fs-xs); color: rgba(59,44,47,.5);
    margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sga-methodology-note i { color: var(--sga-primary); }

@media print {
    .sga-hero, .sga-assess, header, footer, .sga-actions, .sga-methodology-note { display: none !important; }
    .sga-results { background: #fff; padding: 0; }
    .sga-course-card, .sga-summary-card, .sga-stat-card { box-shadow: none; }
}


/* ================================================================
   INSTRUCTORS SECTION  —  ig2-inst-* namespace
   Slots into the existing ig-* design system without conflicts.

   Color system (strictly followed):
     60% → #FFFFFF / #F4F4F2  (surfaces, bg)
     30% → #A41034            (primary, accents, CTAs, active)
     10% → #1C1514            (headings, text, icons)
   ================================================================ */


/* ── Section shell ─────────────────────────────────────────────── */
.ig2-inst-section {
    position: relative;
    background: #F4F4F2;
    padding-block: 100px;
    overflow: hidden;
    margin-left:  -5vw !important;
    margin-right: -5vw !important;
    padding-left:  5vw !important;
    padding-right: 5vw !important;
    width: calc(100% + 10vw) !important;
    box-sizing: border-box !important;
}

/* Background decorative orb — very subtle brand warmth */
.ig2-inst-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.ig2-inst-bg__orb {
    position: absolute;
    top: -140px;
    right: -120px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(164, 16, 52, 0.045) 0%,
        transparent 68%
    );
}


/* ── Section header — 2-col: title left, trust + link right ─────── */
.ig2-inst-hd {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 52px;
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    background-color: #FDFBF8 !important;
    background: #F5F1EA !important;
    background-size: 20px 20px !important;
}

.ig2-inst-hd__left {
    flex: 1;
    min-width: 0;
    padding: 20px;
}

/* Uses existing ig-eyebrow — no override needed */

/* Title accent underline */
.ig2-inst-hd__accent {
    position: relative;
    display: inline;
    color: #A41034;
}
.ig2-inst-hd__accent::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background: #A41034;
    border-radius: 1px;
    opacity: .35;
}

.ig2-inst-hd__sub {
    font-size: var(--fs-md);
    color: #6B6B6B;
    line-height: var(--lh-normal);
    margin: 14px 0 0;
    max-width: 520px;
}

/* Right column */
.ig2-inst-hd__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    flex-shrink: 0;
    padding: 20px;
}

/* Trust micro-signals */
.ig2-inst-trust {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1.5px solid #E8E8E6;
    border-radius: 14px;
    padding: 14px 20px;
    box-shadow: 0 2px 10px rgba(34, 34, 34, .05);
}
.ig2-inst-trust__item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ig2-inst-trust__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(164, 16, 52, .1);
    color: #A41034;
    display: grid;
    place-items: center;
    font-size: var(--fs-sm);
    flex-shrink: 0;
}
.ig2-inst-trust__icon--dark {
    background: #1C1514;
    color: #fff;
}
.ig2-inst-trust__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ig2-inst-trust__text strong {
    font-size: var(--fs-md);
    font-weight: 700;
    color: #1C1514;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.ig2-inst-trust__text span {
    font-size: 11.5px;
    color: #8A8A8A;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ig2-inst-trust__sep {
    width: 1px;
    height: 32px;
    background: #E8E8E6;
    flex-shrink: 0;
}

/* The "Meet all faculty" link — uses existing ig-link-arrow */
.ig2-inst-hd__link {
    /* inherits ig-link-arrow; just keeps flex-end alignment */
    align-self: flex-end;
}


/* ── Card grid ─────────────────────────────────────────────────── */
.ig2-inst-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1;
}


/* ── Instructor card ───────────────────────────────────────────── */
.ig2-icard {
    background: #fff;
    border: 1.5px solid #E8E8E6;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
    position: relative;
}
.ig2-icard:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 52px rgba(34, 34, 34, .13);
    border-color: rgba(164, 16, 52, .35);
}


/* Photo ─────────────────────────────────────────────────────────── */
.ig2-icard__photo {
    position: relative;
    height: 240px;
    background: #FFFFFF;
    overflow: hidden;
    flex-shrink: 0;
}
.ig2-icard__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform .45s ease;
}
.ig2-icard:hover .ig2-icard__photo img {
    transform: scale(1.06);
}

/* Hover overlay */
.ig2-icard__overlay {
    position: absolute;
    inset: 0;
    background: rgba(34, 34, 34, .62);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .28s ease;
}
.ig2-icard:hover .ig2-icard__overlay {
    opacity: 1;
}
.ig2-icard__overlay-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #A41034;
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 10px;
    text-decoration: none;
    letter-spacing: .01em;
    transform: translateY(8px);
    transition: background .2s, transform .28s;
    white-space: nowrap;
}
.ig2-icard__overlay-btn svg {
    width: 15px;
    height: 15px;
    transition: transform .2s;
    flex-shrink: 0;
}
.ig2-icard:hover .ig2-icard__overlay-btn {
    transform: translateY(0);
}
.ig2-icard__overlay-btn:hover {
    background: #800B27;
    color: #fff;
    text-decoration: none;
}
.ig2-icard__overlay-btn:hover svg {
    transform: translateX(3px);
}

/* Course-count badge — bottom-left of photo */
.ig2-icard__badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(34, 34, 34, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 100px;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: background .2s;
}
.ig2-icard__badge i {
    color: #E8A33D;
    font-size: 10px;
}
.ig2-icard:hover .ig2-icard__badge {
    background: #A41034;
}
.ig2-icard:hover .ig2-icard__badge i {
    color: #fff;
}


/* Body ─────────────────────────────────────────────────────────── */
.ig2-icard__body {
    padding: 20px 22px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Name */
.ig2-icard__name {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #1C1514;
    line-height: var(--lh-tight);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.ig2-icard__name a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}
.ig2-icard__name a:hover {
    color: #A41034;
}

/* Role */
.ig2-icard__role {
    font-size: var(--fs-sm);
    color: #A41034;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: var(--lh-snug);
}

/* Short bio */
.ig2-icard__bio {
    font-size: var(--fs-sm);
    color: #6B6B6B;
    line-height: var(--lh-normal);
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Rating row */
.ig2-icard__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}
.ig2-icard__rating-score {
    font-size: var(--fs-sm);
    font-weight: 800;
    color: #1C1514;
    letter-spacing: -0.01em;
}
.ig2-icard__stars {
    display: flex;
    gap: 2px;
}
.ig2-icard__stars .fa-star,
.ig2-icard__stars .fa-star-half-alt {
    color: #E8A33D;
    font-size: 11.5px;
}
.ig2-icard__stars .far.fa-star {
    color: #D1D5DB;
    font-size: 11.5px;
}

/* Stats row */
.ig2-icard__stats {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: auto;
    padding: 14px 22px 0;
    border-top: 1px solid #F0F0EE;
}
.ig2-icard__stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}
.ig2-icard__stat b {
    display: block;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #1C1514;
    letter-spacing: -0.03em;
    line-height: 1;
}
.ig2-icard__stat span {
    font-size: var(--fs-xs);
    color: #8A8A8A;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ig2-icard__stat-sep {
    width: 1px;
    height: 32px;
    background: #E8E8E6;
    flex-shrink: 0;
    margin-inline: 4px;
}


/* Footer CTA ───────────────────────────────────────────────────── */
.ig2-icard__foot {
    padding: 14px 22px 20px;
}
.ig2-icard__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    background: #F4F4F2;
    border: 1.5px solid #E8E8E6;
    color: #1C1514;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    letter-spacing: .01em;
    transition:
        background .22s,
        border-color .22s,
        color .22s,
        gap .2s,
        transform .2s;
}
.ig2-icard__cta i {
    font-size: var(--fs-xs);
    transition: transform .2s;
}
.ig2-icard:hover .ig2-icard__cta,
.ig2-icard__cta:hover {
    background: #A41034;
    border-color: #A41034;
    color: #fff;
    text-decoration: none;
}
.ig2-icard:hover .ig2-icard__cta i,
.ig2-icard__cta:hover i {
    transform: translateX(3px);
}


/* ── Empty state ───────────────────────────────────────────────── */
.ig2-inst-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 72px 24px;
    background: #fff;
    border: 1.5px dashed #C8C8C6;
    border-radius: 16px;
}
.ig2-inst-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #F4F4F2;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    font-size: 1.6rem;
    color: #C8C8C6;
}
.ig2-inst-empty__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1C1514;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.ig2-inst-empty__sub {
    font-size: var(--fs-sm);
    color: #8A8A8A;
    margin: 0;
    line-height: var(--lh-normal);
}


/* ── Section footer CTA ────────────────────────────────────────── */
.ig2-inst-footer {
    display: flex;
    justify-content: center;
    margin-top: 44px;
    position: relative;
    z-index: 1;
}
.ig2-inst-footer__btn {
    /* inherits ig-btn ig-btn--ghost */
    min-width: 220px;
}
.ig2-inst-footer__btn:hover {
    /* Ghost hover picks up ig-btn--ghost:hover from design system */
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

/* Large tablets: 3 columns */
@media (max-width: 1180px) {
    .ig2-inst-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* Tablets: 2 columns; trust signals move under header */
@media (max-width: 991px) {
    .ig2-inst-section {
        margin-left:  -3vw !important;
        margin-right: -3vw !important;
        padding-left:  3vw !important;
        padding-right: 3vw !important;
        width: calc(100% + 6vw) !important;
    }
}

@media (max-width: 900px) {
    .ig2-inst-section {
        padding-block: 80px;
    }
    .ig2-inst-hd {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        margin-bottom: 40px;
    }
    .ig2-inst-hd__right {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        width: 100%;
    }
    .ig2-inst-hd__link {
        align-self: center;
    }
    .ig2-inst-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 575px) {
    .ig2-inst-section {
        margin-left:  0 !important;
        margin-right: 0 !important;
        padding-left:  16px !important;
        padding-right: 16px !important;
        width: 100% !important;
    }
}

/* Mobile landscape: 2 columns */
@media (max-width: 640px) {
    .ig2-inst-section {
        padding-block: 64px;
    }
    .ig2-inst-hd__sub {
        font-size: var(--fs-base);
    }
    .ig2-inst-trust {
        padding: 12px 16px;
        gap: 14px;
    }
    .ig2-icard__photo {
        height: 200px;
    }
}

/* Small phones: 1 column */
@media (max-width: 420px) {
    .ig2-inst-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ig2-inst-hd__right {
        flex-direction: column;
    }
    .ig2-inst-trust {
        width: 100%;
    }
}


/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .ig2-icard,
    .ig2-icard__photo img,
    .ig2-icard__overlay,
    .ig2-icard__overlay-btn,
    .ig2-icard__cta,
    .ig2-icard__badge {
        transition: none !important;
        transform: none !important;
    }
    .ig2-icard:hover {
        transform: none !important;
    }
}
:root { --ls-red:#A41034; --ls-dark:#1C1514; --ls-bg:#FFFFFF; --ls-white:#fff; }
.ls-page { background: var(--ls-bg); min-height: 80vh; }
.ls-hero { background: var(--ls-dark); padding: 40px 5vw;  margin-left: -5vw !important;
    margin-right: -5vw !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important;}
.ls-hero--show { padding: 36px 5vw; }
.ls-hero__inner { max-width: 1200px; margin: 0 auto; }
.ls-back { color: rgba(255,255,255,.5); font-size: var(--fs-sm); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.ls-back:hover { color: #fff; }
.ls-hero__title { color: #fff; font-size: var(--fs-3xl); font-weight: 900; margin: 0 0 6px; }
.ls-hero__course { color: rgba(255,255,255,.55); font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ls-live-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--ls-red); color: #fff; padding: 5px 14px; border-radius: 50px; font-size: var(--fs-xs); font-weight: 800; }
.ls-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: ls-pulse 1.2s infinite; }
@keyframes ls-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }
.ls-status-pill { font-size: var(--fs-xs); font-weight: 800; padding: 4px 12px; border-radius: 50px; }
.ls-status-pill--scheduled { background: rgba(255,255,255,.15); color: #fff; }
.ls-status-pill--ended     { background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); }
.ls-status-pill--cancelled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.4); }

.ls-show-body { max-width: 1200px; margin: 0 auto; padding: 32px 5vw 72px; }
.ls-show-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media(max-width:900px){ .ls-show-grid { grid-template-columns: 1fr; } }

.ls-alert { padding: 13px 18px; border-radius: 8px; font-size: var(--fs-sm); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.ls-alert--success { background: rgba(76,175,80,.1); color: #388e3c; border: 1px solid rgba(76,175,80,.25); }
.ls-alert--error   { background: rgba(164,16,52,.08); color: var(--ls-red); border: 1px solid rgba(164,16,52,.2); }

/* Countdown */
.ls-countdown-card { background: var(--ls-dark); border-radius: 14px; padding: 28px; text-align: center; margin-bottom: 20px; }
.ls-countdown-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: rgba(255,255,255,.5); margin-bottom: 18px; }
.ls-countdown { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ls-cd-box { text-align: center; }
.ls-cd-box span { display: block; font-size: var(--fs-4xl); font-weight: 900; color: #fff; line-height: 1; min-width: 60px; }
.ls-cd-box small { font-size: 10px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; display: block; }
.ls-cd-sep { font-size: var(--fs-3xl); font-weight: 900; color: var(--ls-red); padding-bottom: 16px; }

/* Join/Replay banners */
.ls-join-banner { background: var(--ls-red); border-radius: 12px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 20px; flex-wrap: wrap; }
.ls-join-banner i { font-size: var(--fs-xl); margin-right: 8px; }
.ls-replay-banner { background: var(--ls-dark); border-radius: 12px; padding: 20px 24px; display: flex; align-items: center; gap: 20px; color: #fff; margin-bottom: 20px; }
.ls-replay-banner i { font-size: var(--fs-4xl); color: var(--ls-red); flex-shrink: 0; }

/* Card */
.ls-card { background: var(--ls-white); border-radius: 14px; padding: 22px; box-shadow: 0 1px 8px rgba(0,0,0,.06); margin-bottom: 16px; }
.ls-card-title { font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ls-dark); margin-bottom: 16px; display: flex; align-items: center; gap: 7px; }
.ls-card-title i { color: var(--ls-red); }
.ls-desc { font-size: var(--fs-sm); color: #555; line-height: var(--lh-relaxed); margin: 0; white-space: pre-wrap; }

/* RSVP */
.ls-rsvp-card { border: 2px solid rgba(164,16,52,.2); }
.ls-rsvp-confirmed { background: rgba(76,175,80,.06); border: 1px solid rgba(76,175,80,.2); border-radius: 8px; padding: 14px; display: flex; align-items: flex-start; gap: 10px; color: #388e3c; font-size: var(--fs-sm); }
.ls-rsvp-confirmed i { font-size: var(--fs-lg); flex-shrink: 0; margin-top: 1px; }
.ls-rsvp-confirmed p { margin: 4px 0 0; color: #555; }

/* Info list */
.ls-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ls-info-list li { display: flex; align-items: flex-start; gap: 12px; }
.ls-info-list li > i { color: var(--ls-red); font-size: var(--fs-sm); flex-shrink: 0; margin-top: 2px; }
.ls-info-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #aaa; margin-bottom: 2px; }
.ls-info-value { font-size: var(--fs-sm); font-weight: 700; color: var(--ls-dark); }

/* Instructor */
.ls-instr-card { display: flex; align-items: center; gap: 12px; }
.ls-instr-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ls-instr-avatar--fallback { background: var(--ls-red); color: #fff; font-weight: 800; font-size: var(--fs-lg); display: flex; align-items: center; justify-content: center; }
.ls-instr-name  { font-size: var(--fs-sm); font-weight: 800; color: var(--ls-dark); }
.ls-instr-label { font-size: var(--fs-xs); color: #aaa; }

/* Buttons */
.ls-btn { display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: 8px; padding: 10px 18px; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; text-decoration: none; transition: all .2s; }
.ls-btn--primary { background: var(--ls-red); color: #fff; }
.ls-btn--primary:hover { background: #8a0c29; color: #fff; }
.ls-btn--white { background: #fff; color: var(--ls-red); }
.ls-btn--white:hover { background: #f5f5f5; }
.ls-btn--danger { background: rgba(164,16,52,.08); color: var(--ls-red); }
.ls-btn--danger:hover { background: rgba(164,16,52,.15); }
:root { --ls-red:#A41034; --ls-dark:#1C1514; --ls-bg:#FFFFFF; --ls-white:#fff; }

.ls-page { background: var(--ls-bg); min-height: 80vh; }

/* Hero */
.ls-hero { background: var(--ls-dark); padding: 52px 5vw; }
.ls-hero__inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ls-hero__title { color: #fff; font-size: var(--fs-3xl); font-weight: 900; margin: 0 0 6px; display: flex; align-items: center; gap: 12px; }
.ls-hero__title i { color: var(--ls-red); }
.ls-hero__sub { color: rgba(255,255,255,.5); font-size: var(--fs-sm); margin: 0; }
.ls-hero__stats { display: flex; gap: 32px; }
.ls-hero__stat { text-align: center; }
.ls-hero__stat-num { display: block; font-size: var(--fs-3xl); font-weight: 900; color: var(--ls-red); }
.ls-hero__stat-lbl { font-size: var(--fs-xs); color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .6px; }

/* Body */
.ls-body { max-width: 1140px; margin: 0 auto; padding: 36px 5vw 80px;  }

/* Alerts */
.ls-alert { padding: 13px 18px; border-radius: 8px; font-size: var(--fs-sm); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
.ls-alert--success { background: rgba(76,175,80,.1); color: #388e3c; border: 1px solid rgba(76,175,80,.25); }
.ls-alert--error   { background: rgba(164,16,52,.08); color: var(--ls-red); border: 1px solid rgba(164,16,52,.2); }

/* Sections */
.ls-section { margin-bottom: 48px; }
.ls-section--past { opacity: .85; }
.ls-section__header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.ls-section__title { font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--ls-dark); display: flex; align-items: center; gap: 7px; }
.ls-section__title i { color: var(--ls-red); }
.ls-section__count { font-size: var(--fs-xs); color: #aaa; }

/* Live pill */
.ls-live-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--ls-red); color: #fff; padding: 5px 14px; border-radius: 50px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .5px; }
.ls-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: ls-pulse 1.2s infinite; }
@keyframes ls-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }

/* Grid */
.ls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 18px; }
.ls-grid--live .ls-card { border: 2px solid var(--ls-red); }

/* Card (used via partial) */
.ls-card { background: var(--ls-white); border-radius: 14px; padding: 22px; box-shadow: 0 1px 8px rgba(0,0,0,.06); border: 2px solid transparent; transition: all .2s; display: flex; flex-direction: column; gap: 10px; }
.ls-card:hover { border-color: rgba(164,16,52,.3); box-shadow: 0 4px 18px rgba(164,16,52,.08); transform: translateY(-2px); }
.ls-card__top { display: flex; align-items: center; justify-content: space-between; }
.ls-card__status { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 50px; text-transform: uppercase; letter-spacing: .4px; }
.ls-card__status--live      { background: var(--ls-red); color: #fff; }
.ls-card__status--scheduled { background: rgba(21,101,192,.1); color: #1565c0; }
.ls-card__mine { font-size: 10px; background: rgba(164,16,52,.08); color: var(--ls-red); border-radius: 50px; padding: 3px 9px; font-weight: 700; }
.ls-card__title { font-size: var(--fs-base); font-weight: 800; color: var(--ls-dark); line-height: var(--lh-snug); }
.ls-card__course { font-size: var(--fs-xs); color: var(--ls-red); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.ls-card__instructor { display: flex; align-items: center; gap: 8px; }
.ls-card__avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--ls-bg); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); color: #888; font-weight: 700; flex-shrink: 0; }
.ls-card__instr-name { font-size: var(--fs-xs); color: #666; }
.ls-card__time { font-size: var(--fs-xs); color: #888; display: flex; align-items: center; gap: 6px; }
.ls-card__time i { color: var(--ls-red); }
.ls-card__meta { display: flex; gap: 14px; font-size: var(--fs-xs); color: #aaa; }
.ls-card__meta i { color: var(--ls-red); margin-right: 3px; }
.ls-card__actions { display: flex; gap: 8px; margin-top: 4px; }

/* Buttons */
.ls-btn { display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: 7px; padding: 9px 16px; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; text-decoration: none; transition: all .2s; }
.ls-btn--primary { background: var(--ls-red); color: #fff; }
.ls-btn--primary:hover { background: #8a0c29; color: #fff; }
.ls-btn--ghost { background: rgba(164,16,52,.08); color: var(--ls-red); }
.ls-btn--ghost:hover { background: rgba(164,16,52,.15); }
.ls-btn--replay { background: var(--ls-dark); color: #fff; }
.ls-btn--replay:hover { background: #333; color: #fff; }
.ls-btn--danger { background: rgba(164,16,52,.08); color: var(--ls-red); }
.ls-btn--danger:hover { background: rgba(164,16,52,.15); }

/* Past list */
.ls-past-list { display: flex; flex-direction: column; gap: 1px; }
.ls-past-row { background: var(--ls-white); border-radius: 10px; padding: 16px 20px; display: flex; align-items: center; gap: 20px; justify-content: space-between; box-shadow: 0 1px 4px rgba(0,0,0,.04); margin-bottom: 8px; }
.ls-past-row__date { font-size: var(--fs-xs); color: #bbb; margin-bottom: 2px; }
.ls-past-row__title { font-size: var(--fs-sm); font-weight: 700; color: #555; }
.ls-past-row__meta { font-size: var(--fs-xs); color: #aaa; }
.ls-past-row__no-replay { font-size: var(--fs-xs); color: #ccc; }
.ls-past-row__right { flex-shrink: 0; }

/* Empty */
.ls-empty { text-align: center; padding: 80px 24px; }
.ls-empty i { font-size: 56px; color: #ccc; display: block; margin-bottom: 20px; }
.ls-empty h3 { font-size: var(--fs-xl); color: var(--ls-dark); margin-bottom: 8px; }
.ls-empty p { color: #888; }



/* duplicate block removed — kept the first ig2-inst-* block above */


.gami-stats-row {
    margin-top: 20px !important;
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.gami-stat-card {
    flex: 1;
    min-width: 120px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.gami-stat-icon { font-size: 22px; margin-bottom: 8px; }
.gami-stat-value { font-size: 26px; font-weight: 700; color: #1a1a2e; line-height: 1; }
.gami-stat-label { font-size: 12px; color: #888; margin-top: 4px; }

.gami-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}
.gami-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.gami-badge-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px 16px 18px;
    text-align: center;
    border: 2px solid #f0f0f0;
    transition: transform .2s, box-shadow .2s;
}
.gami-badge--earned {
    border-color: #ffd700;
    box-shadow: 0 4px 16px rgba(255,215,0,.18);
}
.gami-badge--earned:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(255,215,0,.25); }
.gami-badge--locked { opacity: .55; }
.gami-badge-icon { font-size: 38px; line-height: 1; margin-bottom: 10px; }
.gami-badge-icon--locked { filter: grayscale(1); }
.gami-badge-name { font-size: 13px; font-weight: 600; color: #1a1a2e; margin-bottom: 4px; }
.gami-badge-date { font-size: 11px; color: #aaa; }
.gami-badge-hint { font-size: 11px; color: #999; margin-top: 4px; }
.gami-empty { color: #aaa; font-size: 14px; grid-column: 1/-1; padding: 24px 0; }



   .smsg-back-btn {
    text-decoration: none;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: #6b7280;
    padding: 8px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    transition: color .2s ease, border-color .2s ease;
}
.smsg-back-btn:hover {
    color: #A41034;
    border-color: #A41034;
}

.smsg-thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 4px;
}

.smsg-bubble {
    display: block;
    border-radius: 12px;
    padding: 16px 20px;
    max-width: 84%;
}
.smsg-bubble--sent {
    background: linear-gradient(135deg, #A41034, #D91247);
    color: #fff;
    align-self: flex-end;
    margin-left: auto;
}
.smsg-bubble--reply {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    color: #111827;
    align-self: flex-start;
}
.smsg-bubble__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 12px;
}
.smsg-bubble--sent .smsg-bubble__meta  { color: rgba(255,255,255,.75); }
.smsg-bubble--reply .smsg-bubble__meta { color: #9ca3af; }
.smsg-bubble__who  { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.smsg-bubble__who-icon { font-size: .7rem; margin-right: 4px; color: #A41034; }
.smsg-bubble--sent .smsg-bubble__who-icon { color: rgba(255,255,255,.85); }
.smsg-bubble__who-sub { font-size: .68rem; font-weight: 400; color: rgba(255,255,255,.65); }
.smsg-bubble__time { font-size: .7rem; }
.smsg-bubble__body { font-size: .88rem; line-height: 1.7; white-space: pre-wrap; }
.smsg-bubble--sent  .smsg-bubble__body { color: rgba(255,255,255,.92); }
.smsg-bubble--reply .smsg-bubble__body { color: #374151; }

.smsg-awaiting {
    text-align: center;
    padding: 24px 0;
    font-size: .82rem;
    color: #9ca3af;
}
.smsg-awaiting i { margin-right: 6px; }

.smsg-reply-box {
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 22px;
}
.smsg-reply-box__lbl {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #A41034;
    margin-bottom: 10px;
}
.smsg-reply-box__actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.smsg-textarea {
    font-size: .88rem;
    resize: vertical;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    cursor: text !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.smsg-textarea:focus {
    outline: none;
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164, 16, 52, .12);
}

.smsg-send-btn {
    background: #A41034;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    padding: 10px 28px;
    border-radius: 8px;
    border: none;
    cursor: pointer !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .2s ease;
}
.smsg-send-btn:hover {
    background: #D91247;
}

.smsg-alert-success {
    padding: 10px 14px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.newsletter .ig-newsletter-form input[type="email"] {
    border: 1px solid #fff !important;
    border-color: #fff !important;
}
.newsletter{
    width:100%;
}

.ig-newsletter-form{
    position:relative;
    width:100%;
    max-width:500px;
}

.ig-newsletter-form input[type="email"]{
    width:100%;
    height:60px;
    padding:0 75px 0 20px;
    border:1px solid #fff !important;
    border-radius:12px;
    background:transparent;
    color:#fff;
}

.ig-newsletter-form input[type="email"]::placeholder{
    color:rgba(255,255,255,.7);
}

.ig-newsletter-form button{
    position:absolute;
    top:50%;
    right:6px;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border:none;
    border-radius:10px;
    background:#fff;
    color:#A41034;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    margin:0;
    z-index:2;
}



.premium-card-footer {
    margin-top: 18px;
    padding-top: 18px;

    border-top: 1px solid rgba(164,16,52,.10);

    display: flex;
    flex-direction: column;
    gap: 16px;
}

.premium-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.premium-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #4A4441;
    font-size: 14px;
    font-weight: 600;
}

.premium-meta-item i {
    color: #A41034;
}

.premium-meta-item small {
    color: #8B8682;
    font-size: 13px;
}

.premium-verified {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;

    background: rgba(16,185,129,.10);

    border: 1px solid rgba(16,185,129,.20);

    border-radius: 999px;

    color: #059669;
    font-size: 13px;
    font-weight: 700;
}

.premium-verified i {
    font-size: 14px;
}

.premium-btn-action {
    width: 100%;

    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background: #fff  !important;
    
    border: 1px solid #A41034 !important;
    color:#A41034 !important;

    border: none;
    border-radius: 14px;

    font-weight: 700;
    text-decoration: none;

    transition: .3s ease;

    box-shadow:
        0 8px 20px rgba(164,16,52,.20);
}

.premium-btn-action:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(164,16,52,.30);
}

.premium-avatar-initial {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;

    border-radius: 50% !important;

    font-size: 17px !important;
    font-weight: 800 !important;

    background: #A41034 !important;

    color: #fff !important;

    box-shadow:
        0 8px 20px rgba(164,16,52,.25) !important;
}

.main {
    max-width: 1340px;
    margin: 0 auto;
    padding: 30px 32px 56px;
    
    grid-template-columns: minmax(0, 1fr) 388px;
    gap: 34px;
    align-items: start;
}




.ig-hero-search-modern{
    max-width:820px;
    position:relative;
    z-index:10;
}

.ig-search-wrapper{
    display:flex;
    align-items:center;
    gap:12px;

    padding:10px;

    background:#fff;

    border-radius:24px;

    box-shadow:
        0 20px 60px rgba(59,44,47,.08);

    border:1px solid rgba(164,16,52,.08);
}

.ig-search-field{
    flex:1;

    display:flex;
    align-items:center;
    gap:12px;

    padding:0 20px;
}

.ig-search-field i{
    color:#A41034;
    font-size:18px;
}

.ig-search-field input{
    width:100%;
    border:none;
    outline:none;

    font-size:16px;
    color:#3B2C2F;

    background:transparent;
}

.ig-category-select{
    min-width:220px;
}

.ig-category-select select{
    width:100%;
    height:56px;

    border:none;
    outline:none;

    border-radius:16px;

    background:#F8F4EF;

    padding:0 20px;

    color:#3B2C2F;
    font-weight:500;
}

.ig-search-wrapper button{
    min-width:160px;
    height:56px;

    border:none;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #A41034,
        #860F2C
    );

    color:#fff;
    font-weight:600;

    transition:.3s;
}

.ig-search-wrapper button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(164,16,52,.25);
}

.ig-popular-tags{
    margin-top:18px;

    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.ig-popular-tags span{
    color:#777;
    font-size:14px;
}

.ig-popular-tags a{
    text-decoration:none;

    padding:8px 16px;

    border-radius:999px;

    background:#fff;

    border:1px solid rgba(164,16,52,.08);

    color:#A41034;

    font-size:14px;
    font-weight:500;

    transition:.3s;
}

/* ================================================================
   AJAX TABLE PAGINATION BAR — additive only. Used by the server-side
   paginated tables (Student Earnings, My Shorts) that nest a "Showing
   A–B of C" count next to the existing .msi-pagination page links.
   Deliberately new class names (not a redefinition of .msi-pagination
   itself) so instructor Payout/Announcement pages that already use
   .msi-pagination are completely unaffected.
================================================================ */
.msi-pagination-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}
.msi-pagination-bar .msi-pagination-nav .pagination{margin:0}
.msi-pagination-bar .msi-pagination-count{
    font-size:12.5px;
    color:#a8a09a;
    white-space:nowrap;
}
.msi-pagination-bar .msi-pagination-count strong{color:rgb(34,34,34)}

.ig-popular-tags a:hover{
    background:#A41034;
    color:#fff;
}