/*
 * Digitera Purple Quiz Theme
 * Inspired by modern mobile quiz dashboards: violet gradients,
 * bright action cards, generous rounded corners, and soft shadows.
 * Loaded after assets/style.css so it safely overrides the base theme.
 */

:root {
    --bg: #f7f5ff;
    --surface: #ffffff;
    --surface-2: #f0eaff;
    --text: #272238;
    --muted: #777187;
    --primary: #7047eb;
    --primary-dark: #5530c9;
    --primary-soft: #eee8ff;
    --secondary: #9f7aea;
    --success: #18bd91;
    --warning: #f59b3d;
    --danger: #ef5b67;
    --info: #3f8cff;
    --border: #ebe7f5;
    --shadow: 0 18px 45px rgba(79, 55, 145, .11);
    --shadow-lg: 0 28px 70px rgba(87, 57, 171, .20);
    --radius: 22px;
    --radius-sm: 15px;
    --purple-gradient: linear-gradient(135deg, #7047eb 0%, #9b6df2 100%);
    --purple-gradient-dark: linear-gradient(135deg, #5530c9 0%, #8251e8 100%);
    --green-gradient: linear-gradient(135deg, #20c997 0%, #19b58a 100%);
    --orange-gradient: linear-gradient(135deg, #ffac4a 0%, #ff7e42 100%);
    --red-gradient: linear-gradient(135deg, #ff715f 0%, #f04d68 100%);
    --blue-gradient: linear-gradient(135deg, #4e9dff 0%, #6578f2 100%);
}

html { background: var(--bg); }
body {
    color: var(--text);
    background:
        radial-gradient(circle at 8% 2%, rgba(157, 111, 242, .11), transparent 24rem),
        radial-gradient(circle at 92% 16%, rgba(112, 71, 235, .08), transparent 26rem),
        var(--bg);
    font-family: "Nunito", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

::selection { color: #fff; background: var(--primary); }
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

/* Header and navigation */
.topbar {
    background: rgba(255, 255, 255, .88);
    border-bottom-color: rgba(112, 71, 235, .10);
    box-shadow: 0 8px 30px rgba(63, 43, 112, .05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.nav-wrap { min-height: 76px; }
.brand { color: var(--text); letter-spacing: -.02em; }
.brand-mark {
    width: 43px;
    height: 43px;
    border-radius: 15px;
    background: var(--purple-gradient);
    box-shadow: 0 11px 24px rgba(112, 71, 235, .32);
}
.brand small { color: #8f879f; }
.nav { gap: 7px; }
.nav > a:not(.btn) {
    padding: 9px 11px;
    border-radius: 12px;
    color: #635d72;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav > a:not(.btn):hover {
    color: var(--primary);
    background: var(--primary-soft);
    transform: translateY(-1px);
}
.nav > a.active {
    color: var(--primary);
    background: var(--primary-soft);
}
.nav-user {
    padding: 7px 10px;
    color: #817a90;
    background: #faf9fd;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: var(--primary);
    background: var(--primary-soft);
}

/* Typography */
h1, h2, h3, h4 { color: var(--text); }
h1 { letter-spacing: -.045em; }
h2 { letter-spacing: -.035em; }
.lead, .muted { color: var(--muted); }
.eyebrow {
    padding: 8px 13px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border: 1px solid rgba(112, 71, 235, .09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}
.eyebrow.light {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .16);
}

/* Buttons */
.btn {
    min-height: 43px;
    padding: 10px 17px;
    border-radius: 14px;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover {
    transform: translateY(-2px);
    filter: saturate(1.04);
}
.btn-primary {
    color: #fff;
    background: var(--purple-gradient);
    box-shadow: 0 11px 24px rgba(112, 71, 235, .26);
}
.btn-primary:hover {
    color: #fff;
    background: var(--purple-gradient-dark);
    box-shadow: 0 15px 30px rgba(112, 71, 235, .32);
}
.btn-secondary, .btn-ghost {
    color: #4f4860;
    background: #fff;
    border-color: var(--border);
    box-shadow: 0 7px 18px rgba(70, 53, 111, .06);
}
.btn-secondary:hover, .btn-ghost:hover {
    color: var(--primary);
    border-color: #d6c9ff;
    background: #fbfaff;
}
.btn-success { background: var(--green-gradient); }
.btn-danger { background: var(--red-gradient); }
.btn-light { color: var(--primary-dark); background: #fff; }
.btn-light:hover { color: var(--primary-dark); background: #faf7ff; }
.btn-outline-light { color: #fff; background: rgba(255, 255, 255, .06); }

/* Hero sections */
.hero {
    padding: 90px 0 82px;
    background:
        radial-gradient(circle at 82% 13%, rgba(255, 255, 255, .22), transparent 14rem),
        radial-gradient(circle at 10% 85%, rgba(255, 184, 107, .16), transparent 20rem),
        linear-gradient(135deg, #4f22c8 0%, #6d38da 52%, #8750e8 100%);
    color: #fff;
    overflow: hidden;
}
.hero h1 { color: #fff; text-shadow: 0 4px 20px rgba(59, 30, 129, .18); }
.hero .lead { color: rgba(255, 255, 255, .84); }
.hero .eyebrow { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .14); }
.hero .btn-secondary { border-color: transparent; }
.hero-trust span { color: rgba(255, 255, 255, .88); }
.hero-card {
    padding: 31px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(80, 39, 172, .64), rgba(122, 74, 224, .42));
    box-shadow: 0 35px 80px rgba(34, 12, 90, .42);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: rotate(1.1deg);
}
.hero-card .mini-card,
.preview-stats div,
.preview-list span {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(57, 24, 132, .32);
}
.preview-stats span { color: rgba(255, 255, 255, .82); }

.student-hero {
    padding: 86px 0;
    background:
        radial-gradient(circle at 88% 22%, rgba(255, 255, 255, .22), transparent 16rem),
        radial-gradient(circle at 8% 90%, rgba(36, 223, 166, .20), transparent 19rem),
        linear-gradient(135deg, #623bd5 0%, #8b58ec 58%, #a978f5 100%);
}
.student-hero .lead { color: rgba(255, 255, 255, .82); }
.join-widget {
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 30px;
    background: rgba(255, 255, 255, .15);
    box-shadow: 0 26px 60px rgba(54, 25, 130, .30);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.code-pill.large {
    color: var(--primary-dark);
    background: #fff;
    box-shadow: 0 12px 30px rgba(51, 24, 119, .18);
}

/* General cards */
.card, .feature-card, .public-post-card, .public-video-card,
.resource-card, .document-row, .portal-preview {
    border-color: rgba(112, 71, 235, .09);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card, .feature-card, .resource-card, .document-row, .portal-preview {
    background: rgba(255, 255, 255, .96);
}
.card { padding: 25px; }
.feature-card {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card::after {
    content: "";
    position: absolute;
    width: 105px;
    height: 105px;
    right: -47px;
    bottom: -55px;
    border-radius: 50%;
    background: rgba(112, 71, 235, .06);
}
.feature-card:hover {
    transform: translateY(-5px);
    border-color: #d9ceff;
    box-shadow: 0 24px 50px rgba(79, 55, 145, .15);
}
.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    color: #fff;
    background: var(--purple-gradient);
    box-shadow: 0 12px 24px rgba(112, 71, 235, .23);
}
.feature-card:nth-child(3n + 2) .feature-icon { background: var(--green-gradient); box-shadow: 0 12px 24px rgba(24, 189, 145, .22); }
.feature-card:nth-child(3n) .feature-icon { background: var(--orange-gradient); box-shadow: 0 12px 24px rgba(245, 155, 61, .23); }
.section-muted { background: rgba(255, 255, 255, .68); }
.section-head > a { font-weight: 800; }

/* Dashboard action cards similar to the reference */
.quick-grid { gap: 18px; }
.quick-card {
    min-height: 142px;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
    padding: 22px;
    color: #fff;
    border: 0;
    border-radius: 24px;
    background: var(--purple-gradient);
    box-shadow: 0 18px 38px rgba(112, 71, 235, .22);
}
.quick-card::after {
    content: "";
    position: absolute;
    width: 125px;
    height: 125px;
    right: -46px;
    top: -52px;
    border: 18px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
}
.quick-card:nth-child(2) { background: var(--green-gradient); box-shadow: 0 18px 38px rgba(24, 189, 145, .22); }
.quick-card:nth-child(3) { background: var(--orange-gradient); box-shadow: 0 18px 38px rgba(245, 126, 66, .22); }
.quick-card:nth-child(4) { background: var(--blue-gradient); box-shadow: 0 18px 38px rgba(63, 140, 255, .22); }
.quick-card:nth-child(5) { background: var(--red-gradient); box-shadow: 0 18px 38px rgba(239, 91, 103, .22); }
.quick-card:hover { color: #fff; border-color: transparent; transform: translateY(-5px); }
.quick-card > span {
    width: 54px;
    height: 54px;
    z-index: 1;
    border-radius: 18px;
    color: #fff;
    background: rgba(255, 255, 255, .19);
    font-size: 1.55rem;
    backdrop-filter: blur(8px);
}
.quick-card > div { position: relative; z-index: 1; }
.quick-card h3 { color: #fff; }
.quick-card p { color: rgba(255, 255, 255, .82); }

/* Stats */
.stats { gap: 17px; }
.stat {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    color: #fff;
    border: 0;
    border-radius: 22px;
    background: var(--purple-gradient);
    box-shadow: 0 16px 34px rgba(112, 71, 235, .18);
}
.stat::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -28px;
    top: -33px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}
.stat:nth-child(4n + 2) { background: var(--green-gradient); box-shadow: 0 16px 34px rgba(24, 189, 145, .18); }
.stat:nth-child(4n + 3) { background: var(--orange-gradient); box-shadow: 0 16px 34px rgba(245, 155, 61, .18); }
.stat:nth-child(4n) { background: var(--blue-gradient); box-shadow: 0 16px 34px rgba(63, 140, 255, .18); }
.stat .muted { color: rgba(255, 255, 255, .78); }
.stat strong { color: #fff; }
.stat-icon { position: absolute; top: 17px; left: 19px; font-size: 1.55rem; }
.stat-link { color: #fff; }
.stat-link:hover {
    color: #fff;
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 24px 45px rgba(71, 47, 138, .21);
}
.score-pill {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

/* Forms and login */
.auth-shell {
    min-height: calc(100vh - 76px);
    background:
        radial-gradient(circle at 15% 15%, rgba(112, 71, 235, .13), transparent 20rem),
        radial-gradient(circle at 85% 80%, rgba(255, 158, 67, .10), transparent 18rem);
}
.auth-card {
    padding: 30px;
    border: 1px solid rgba(112, 71, 235, .10);
    border-radius: 28px;
    box-shadow: var(--shadow-lg);
}
.student-login-card .student-login-icon {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin: 0 auto 13px;
    border-radius: 25px;
    background: var(--purple-gradient);
    box-shadow: 0 16px 35px rgba(112, 71, 235, .28);
}
.form-group label { color: #4f4860; }
input, textarea, select {
    min-height: 46px;
    padding: 12px 14px;
    border-color: #dfd9ec;
    border-radius: 14px;
    background: #fcfbff;
}
textarea { min-height: 118px; }
input:hover, textarea:hover, select:hover { border-color: #cfc2f5; }
input:focus, textarea:focus, select:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(112, 71, 235, .12);
}

/* Tables, lists, progress, status */
.table-wrap {
    border-radius: 18px;
    border-color: var(--border);
    box-shadow: 0 10px 26px rgba(70, 53, 111, .05);
}
thead th { color: #5c556c; background: #f3efff; }
tbody tr:hover { background: #fbf9ff; }
.activity-icon, .portal-item > span {
    color: var(--primary-dark);
    background: var(--primary-soft);
}
.progress { height: 11px; background: #ece8f4; }
.progress span { background: var(--purple-gradient); }
.file-icon {
    border-radius: 15px 15px 19px 15px;
    background: var(--purple-gradient);
    box-shadow: 0 10px 22px rgba(112, 71, 235, .22);
}
.document-row:hover { border-color: #d4c8fa; }
.document-row em, .download-arrow { color: var(--primary); }
.empty {
    border-radius: 20px;
    color: var(--muted);
    background: #fbfaff;
    border-color: #ded5f7;
}
.badge { border-radius: 999px; }
.badge-info { color: #5e36c7; background: #eee8ff; }
.badge-published { color: #08775a; background: #ddf9f0; }
.badge-draft { color: #9b5d16; background: #fff0dc; }

/* Public content cards */
.public-post-card, .public-video-card { transition: transform .2s ease, box-shadow .2s ease; }
.public-post-card:hover, .public-video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 55px rgba(79, 55, 145, .15);
}
.public-cover,
.video-placeholder {
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .20), transparent 6rem),
        var(--purple-gradient);
}
.video-preview { border-radius: 17px; }
.article-cover { border-radius: 26px; box-shadow: var(--shadow); }
.article-content { border-radius: 26px; }
.assignment-public-card .btn { border-radius: 15px; }
.assignment-status-panel, .compact-prose, .current-file { background: #faf8ff; }
.score-display strong { color: var(--primary); }

/* School and login cards */
.school-code-banner,
.login-card-print,
.school-code-print,
.cta-card {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, .18), transparent 12rem),
        var(--purple-gradient-dark);
    box-shadow: 0 25px 55px rgba(80, 47, 167, .25);
}
.school-code-box { background: var(--primary-soft); }
.school-code-box strong, .school-code-print span { color: var(--primary); }
.teacher-avatar {
    color: #fff;
    background: var(--purple-gradient);
    box-shadow: 0 12px 28px rgba(112, 71, 235, .25);
}
.login-card-body { border-radius: 26px; }
.cta-card p { color: rgba(255, 255, 255, .76); }

/* Footer */
.footer {
    margin-top: 35px;
    color: #655e74;
    background: #f0ecfb;
    border-top: 1px solid rgba(112, 71, 235, .09);
}
.footer-bottom { border-top-color: rgba(112, 71, 235, .12); }

/* Mobile experience: student navigation behaves like a quiz app bottom bar */
@media (max-width: 1080px) {
    .nav { gap: 5px; }
    .nav > a:not(.btn) { padding: 10px 12px; }
}

@media (max-width: 850px) {
    .hero, .student-hero { padding: 68px 0; }
    .hero-card { transform: none; }
    .quick-card { min-height: 128px; }

    body.role-student { padding-bottom: 92px; }
    .role-student .topbar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 100;
        border-top: 1px solid rgba(112, 71, 235, .12);
        border-bottom: 0;
        background: rgba(255, 255, 255, .95);
        box-shadow: 0 -14px 38px rgba(63, 43, 112, .13);
    }
    .role-student .nav-wrap {
        width: 100%;
        min-height: auto;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    }
    .role-student .brand,
    .role-student .nav-toggle,
    .role-student .nav-user { display: none !important; }
    .role-student .nav {
        display: flex !important;
        width: 100%;
        flex-direction: row;
        align-items: stretch;
        gap: 5px;
        padding: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }
    .role-student .nav::-webkit-scrollbar { display: none; }
    .role-student .nav > a,
    .role-student .nav > a.btn {
        flex: 1 0 82px;
        min-width: 82px;
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 9px 8px;
        border: 0;
        border-radius: 17px;
        color: #7a738a;
        background: transparent;
        box-shadow: none;
        font-size: .74rem;
        text-align: center;
        white-space: normal;
    }
    .role-student .nav > a.active,
    .role-student .nav > a:hover {
        color: var(--primary);
        background: var(--primary-soft);
        transform: none;
    }
    .role-student .footer { margin-bottom: 0; }
}

@media (max-width: 620px) {
    .container { width: min(100% - 24px, 1120px); }
    .nav-wrap { min-height: 68px; }
    .page-head { padding-top: 30px; }
    .card { padding: 20px; }
    .auth-card { padding: 24px 20px; }
    .student-hero-grid { gap: 28px; }
    .join-widget { padding: 24px; }
    .stats { gap: 12px; }
    .stat { min-height: 120px; }
    .quick-grid { gap: 12px; }
    .quick-card {
        min-height: 118px;
        padding: 19px;
        border-radius: 21px;
    }
    .quick-card > span { width: 49px; height: 49px; }
    .school-code-banner, .cta-card { border-radius: 24px; }
}

@media print {
    body { background: #fff; }
    .login-card-print, .school-code-print { background: var(--purple-gradient-dark) !important; }
}

/* ============================================================
   Digitera 2.0: school self-registration + mobile footer menu
   ============================================================ */

.registration-page {
    padding: 54px 0 72px;
    background:
        radial-gradient(circle at 8% 12%, rgba(255,255,255,.19), transparent 19rem),
        radial-gradient(circle at 88% 82%, rgba(255,177,78,.18), transparent 21rem),
        var(--purple-gradient-dark);
}
.registration-grid {
    display: grid;
    grid-template-columns: minmax(0,.85fr) minmax(560px,1.15fr);
    gap: 52px;
    align-items: center;
}
.registration-intro { color: #fff; }
.registration-intro h1 {
    max-width: 650px;
    margin: 10px 0 18px;
    color: #fff;
    font-size: clamp(2.35rem,5vw,4.6rem);
    line-height: 1.02;
    letter-spacing: -.055em;
}
.registration-intro > p {
    max-width: 610px;
    color: rgba(255,255,255,.79);
    font-size: 1.08rem;
    line-height: 1.75;
}
.registration-steps {
    display: grid;
    gap: 13px;
    margin: 30px 0;
}
.registration-steps > div {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 19px;
    background: rgba(255,255,255,.09);
    backdrop-filter: blur(12px);
}
.registration-steps span {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--primary-dark);
    background: #fff;
    font-weight: 900;
    box-shadow: 0 9px 20px rgba(28,13,73,.18);
}
.registration-steps strong { color: #fff; }
.registration-steps small { color: rgba(255,255,255,.68); }
.registration-form-card {
    padding: 34px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 32px;
    box-shadow: 0 30px 75px rgba(38,18,91,.33);
}
.check-line {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 5px 0 19px;
    color: #655e74;
    font-size: .9rem;
    line-height: 1.5;
}
.check-line input { min-height: auto; margin-top: 3px; }

.status-shell { padding: 52px 18px 76px; }
.status-card { width: min(720px,100%); }
.status-school-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 15px;
    align-items: center;
    margin: 24px 0 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fbfaff;
}
.status-school-head h3,.status-school-head p { margin: 0; }
.status-school-head p { margin-top: 4px; color: var(--muted); font-size: .9rem; }
.school-avatar {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    flex: 0 0 50px;
    border-radius: 17px;
    background: var(--primary-soft);
    font-size: 1.45rem;
}
.tracking-code {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 13px 15px;
    border-radius: 16px;
    background: #f4f1fb;
}
.tracking-code span { color: var(--muted); font-size: .82rem; }
.tracking-code code {
    flex: 1;
    overflow-wrap: anywhere;
    color: #49377a;
    font-weight: 800;
}
.approval-state {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin: 18px 0;
    padding: 18px;
    border-radius: 20px;
}
.approval-state > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 14px;
    font-size: 1.2rem;
    font-weight: 900;
}
.approval-state strong { display: block; margin-bottom: 4px; }
.approval-state p { margin: 0; line-height: 1.6; }
.state-pending { color: #725016; background: #fff4d8; }
.state-pending > span { background: #ffe4a2; }
.state-approved { color: #08775a; background: #dff9ef; }
.state-approved > span { color: #fff; background: #21bd91; }
.state-rejected { color: #9a3040; background: #ffe7eb; }
.state-rejected > span { background: #ffc8d1; }
.approved-code {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
    margin: 17px 0;
    padding: 24px;
    color: #fff;
    border-radius: 23px;
    background: var(--purple-gradient-dark);
    box-shadow: 0 18px 38px rgba(87,50,184,.25);
}
.approved-code span { color: rgba(255,255,255,.72); }
.approved-code strong { grid-row: 2; font-size: clamp(1.8rem,7vw,2.65rem); letter-spacing: .08em; }
.approved-code .btn { grid-row: 1 / span 2; }
.credential-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0;
}
.credential-summary > div {
    padding: 15px;
    border-radius: 16px;
    background: #f7f4ff;
}
.credential-summary span { display: block; color: var(--muted); font-size: .78rem; }
.credential-summary strong { display: block; margin-top: 4px; }
.status-updated { margin: 18px 0 0; }

.filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 18px 0;
}
.filter-pills a {
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: #6a6278;
    background: #fff;
    font-weight: 700;
    font-size: .86rem;
}
.filter-pills a.active,.filter-pills a:hover { color: #fff; border-color: transparent; background: var(--purple-gradient); }
.school-review-list { display: grid; gap: 18px; }
.school-review-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) 260px;
    gap: 24px;
    padding: 25px;
}
.school-review-title {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
}
.school-review-title h2,.school-review-title p { margin: 0; }
.school-review-title p { margin-top: 4px; color: var(--muted); }
.school-detail-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin-top: 18px;
}
.school-detail-grid > div {
    min-width: 0;
    padding: 12px;
    border-radius: 15px;
    background: #f8f6fd;
}
.school-detail-grid span { display: block; color: var(--muted); font-size: .76rem; }
.school-detail-grid strong { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: .9rem; }
.school-review-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-left: 23px;
    border-left: 1px solid var(--border);
}
.school-review-actions form,.school-review-actions button { width: 100%; }
.review-action-form textarea { min-height: 78px; margin-bottom: 8px; }
.active-school-code {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: 16px;
    background: var(--primary-soft);
}
.active-school-code span { color: var(--muted); }
.active-school-code strong { color: var(--primary-dark); font-size: 1.25rem; letter-spacing: .05em; }
.active-school-code .btn { margin-left: auto; }
.rejection-note { margin-top: 14px; padding: 14px 16px; color: #923042; border-radius: 16px; background: #fff0f2; }
.rejection-note p { margin: 4px 0 0; }

/* Dedicated mobile footer navigation. Desktop keeps the top navigation. */
.mobile-bottom-nav,.mobile-more-sheet,.mobile-more-backdrop { display: none; }

@media (max-width: 900px) {
    .registration-grid { grid-template-columns: 1fr; gap: 30px; }
    .registration-intro { max-width: 720px; }
    .school-review-card { grid-template-columns: 1fr; }
    .school-review-actions { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 850px) {
    html { scroll-padding-bottom: 100px; }
    body.has-mobile-footer { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
    body.mobile-menu-open { overflow: hidden; }

    /* On phones the top area only carries the brand. All menus move to the footer. */
    .topbar,
    .role-student .topbar {
        position: sticky !important;
        inset: auto !important;
        top: 0 !important;
        z-index: 70;
        border-top: 0 !important;
        border-bottom: 1px solid rgba(112,71,235,.09) !important;
        background: rgba(255,255,255,.94) !important;
        box-shadow: 0 8px 25px rgba(57,40,105,.07) !important;
        backdrop-filter: blur(16px);
    }
    .nav-wrap,
    .role-student .nav-wrap {
        width: min(100% - 24px,1120px) !important;
        min-height: 64px !important;
        padding: 7px 0 !important;
    }
    .topbar .brand,
    .role-student .brand { display: flex !important; }
    .topbar .brand small { display: none; }
    .topbar .brand-mark { width: 38px; height: 38px; border-radius: 13px; }
    .topbar .nav,
    .role-student .nav { display: none !important; }
    .topbar .nav-toggle,
    .role-student .nav-toggle,
    .role-student .nav-user { display: none !important; }

    .mobile-bottom-nav {
        position: fixed;
        inset: auto 10px calc(8px + env(safe-area-inset-bottom)) 10px;
        z-index: 120;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        min-height: 68px;
        padding: 6px;
        border: 1px solid rgba(112,71,235,.12);
        border-radius: 23px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 16px 44px rgba(45,27,94,.22);
        backdrop-filter: blur(18px);
    }
    .mobile-bottom-nav a,.mobile-bottom-nav button {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 3px;
        border: 0;
        border-radius: 17px;
        color: #7c748c;
        background: transparent;
        font: inherit;
        text-decoration: none;
        cursor: pointer;
    }
    .mobile-bottom-nav a > span,.mobile-bottom-nav button > span { font-size: 1.18rem; line-height: 1; }
    .mobile-bottom-nav small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: inherit; font-size: .67rem; font-weight: 800; white-space: nowrap; }
    .mobile-bottom-nav a.active,.mobile-bottom-nav a:hover,.mobile-bottom-nav button:hover {
        color: var(--primary);
        background: var(--primary-soft);
        transform: none;
    }
    .mobile-bottom-nav a.active > span { transform: translateY(-1px); }

    .mobile-more-backdrop {
        position: fixed;
        inset: 0;
        z-index: 125;
        display: block;
        background: rgba(25,15,52,.42);
        backdrop-filter: blur(3px);
    }
    .mobile-more-sheet {
        position: fixed;
        inset: auto 10px calc(88px + env(safe-area-inset-bottom)) 10px;
        z-index: 130;
        display: block;
        padding: 10px 16px 18px;
        border: 1px solid rgba(112,71,235,.13);
        border-radius: 27px;
        background: #fff;
        box-shadow: 0 30px 75px rgba(34,19,72,.32);
        animation: mobileSheetIn .18s ease-out;
    }
    .mobile-more-sheet[hidden],.mobile-more-backdrop[hidden] { display: none !important; }
    .mobile-sheet-handle { width: 42px; height: 5px; margin: 0 auto 8px; border-radius: 999px; background: #ded8ea; }
    .mobile-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
    .mobile-sheet-head button { width: 35px; height: 35px; border: 0; border-radius: 12px; color: #655b75; background: #f4f1fa; font-size: 1.35rem; cursor: pointer; }
    .mobile-sheet-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .mobile-sheet-grid a { display: flex; gap: 10px; align-items: center; padding: 15px; border-radius: 17px; color: #4d465b; background: #f8f6fd; }
    .mobile-sheet-grid a span { font-size: 1.25rem; }
    .mobile-sheet-grid a:hover { color: var(--primary); background: var(--primary-soft); }

    .footer { margin-bottom: 0 !important; }
    .registration-page { padding: 35px 0 50px; }
    .registration-intro h1 { font-size: clamp(2.2rem,12vw,3.8rem); }
}

@media (max-width: 620px) {
    .registration-form-card { padding: 23px 18px; border-radius: 25px; }
    .registration-steps > div { padding: 12px; }
    .status-shell { padding: 28px 12px 46px; }
    .status-school-head,.school-review-title { grid-template-columns: auto 1fr; }
    .status-school-head .badge,.school-review-title .badge { grid-column: 1 / -1; justify-self: start; }
    .credential-summary { grid-template-columns: 1fr; }
    .approved-code { grid-template-columns: 1fr; }
    .approved-code .btn { grid-row: auto; margin-top: 10px; }
    .school-detail-grid { grid-template-columns: 1fr 1fr; }
    .school-review-card { padding: 19px; }
    .registration-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .registration-stats .stat:first-child { grid-column: 1 / -1; }
    .mobile-bottom-nav { inset-inline: 7px; }
}

@keyframes mobileSheetIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* =========================================================
   Digitera 2.1 — Navigasi mobile kembali ke HEADER
   Footer navigation dinonaktifkan. Menu dibuka dari tombol
   hamburger di bagian atas pada semua jenis akun.
   ========================================================= */
.mobile-bottom-nav,
.mobile-more-sheet,
.mobile-more-backdrop {
    display: none !important;
}

@media (max-width: 1199px) {
    html { scroll-padding-top: 92px; scroll-padding-bottom: 0; }
    body,
    body.has-mobile-footer,
    body.role-student {
        padding-bottom: 0 !important;
    }
    body.mobile-menu-open { overflow: auto; }

    .topbar,
    .role-student .topbar {
        position: sticky !important;
        inset: auto !important;
        top: 0 !important;
        z-index: 120;
        border-top: 0 !important;
        border-bottom: 1px solid rgba(112, 71, 235, .11) !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 10px 30px rgba(57, 40, 105, .09) !important;
        backdrop-filter: blur(18px);
    }

    .topbar .nav-wrap,
    .role-student .nav-wrap {
        position: relative;
        width: min(100% - 28px, 1120px) !important;
        min-height: 68px !important;
        padding: 7px 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
    }

    .topbar .brand,
    .role-student .brand {
        display: flex !important;
        min-width: 0;
    }
    .topbar .brand > span:last-child,
    .role-student .brand > span:last-child {
        min-width: 0;
    }
    .topbar .brand small,
    .role-student .brand small {
        display: block;
        max-width: min(52vw, 260px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .topbar .brand-mark,
    .role-student .brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }

    .topbar .nav-toggle,
    .role-student .nav-toggle {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        display: grid !important;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(112, 71, 235, .13);
        border-radius: 15px;
        color: var(--primary);
        background: var(--primary-soft);
        font-size: 1.55rem;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 8px 20px rgba(112, 71, 235, .12);
    }

    .topbar .nav,
    .role-student .nav {
        position: absolute !important;
        top: calc(100% + 7px) !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 130;
        width: 100% !important;
        max-height: calc(100vh - 92px);
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 12px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid rgba(112, 71, 235, .12);
        border-radius: 22px;
        background: rgba(255, 255, 255, .985);
        box-shadow: 0 24px 60px rgba(42, 25, 88, .22);
        backdrop-filter: blur(20px);
        overscroll-behavior: contain;
    }
    .topbar .nav.open,
    .role-student .nav.open {
        display: flex !important;
        animation: digiteraHeaderMenuIn .17s ease-out;
    }

    .topbar .nav > a:not(.btn),
    .topbar .nav > a.btn,
    .role-student .nav > a,
    .role-student .nav > a.btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 12px 14px !important;
        border: 0 !important;
        border-radius: 14px !important;
        color: #625b70 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: .92rem !important;
        font-weight: 750 !important;
        text-align: left !important;
        white-space: normal !important;
        transform: none !important;
    }
    .topbar .nav > a.active,
    .topbar .nav > a:hover,
    .role-student .nav > a.active,
    .role-student .nav > a:hover {
        color: var(--primary) !important;
        background: var(--primary-soft) !important;
    }
    .topbar .nav > a.btn-primary,
    .role-student .nav > a.btn-primary {
        color: #fff !important;
        background: var(--purple-gradient) !important;
    }

    .topbar .nav-user,
    .role-student .nav-user {
        display: block !important;
        padding: 10px 14px !important;
        color: var(--muted);
        border-bottom: 1px solid rgba(112, 71, 235, .09);
        font-size: .82rem;
        overflow-wrap: anywhere;
    }
    .role-student .footer,
    .footer { margin-bottom: 0 !important; }
}

@media (max-width: 620px) {
    .topbar .nav-wrap,
    .role-student .nav-wrap {
        width: min(100% - 22px, 1120px) !important;
        min-height: 64px !important;
    }
    .topbar .brand small,
    .role-student .brand small { display: none; }
    .topbar .brand-mark,
    .role-student .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 13px;
    }
    .topbar .nav-toggle,
    .role-student .nav-toggle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
    .topbar .nav,
    .role-student .nav {
        top: calc(100% + 5px) !important;
        padding: 10px !important;
        border-radius: 19px;
    }
}

@keyframes digiteraHeaderMenuIn {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
    to { opacity: 1; transform: none; }
}


/* Digitera V3: kode akses guru */
.teacher-access-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px;background:linear-gradient(135deg,#fff 0%,#f5f0ff 100%);border:1px solid rgba(112,71,235,.16)}
.teacher-access-banner h2{font-size:clamp(2rem,5vw,3.3rem);letter-spacing:.12em;color:#7047eb;margin:.25rem 0}
.status-card{margin-bottom:24px}
@media(max-width:700px){.teacher-access-banner{align-items:flex-start;flex-direction:column}.teacher-access-banner .actions{width:100%}.teacher-access-banner .btn{flex:1}}


/* =========================================================
   Digitera V3.1 — visual polish, stronger contrast and curves
   ========================================================= */

:root {
    --page-ink: #28203b;
    --page-copy: #625a72;
    --input-border: #d8d0e8;
    --input-bg: #ffffff;
    --curve-soft: rgba(142, 101, 239, .13);
    --curve-warm: rgba(255, 177, 91, .13);
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: #f7f4ff;
}

main {
    position: relative;
    min-height: calc(100vh - 76px);
    isolation: isolate;
}

/* Decorative curved shapes shared by all pages. */
main::before,
main::after {
    content: "";
    position: fixed;
    z-index: -2;
    pointer-events: none;
    filter: blur(.2px);
}
main::before {
    top: 96px;
    left: -180px;
    width: 430px;
    height: 330px;
    border-radius: 42% 58% 65% 35% / 48% 36% 64% 52%;
    background: linear-gradient(145deg, rgba(151, 109, 242, .14), rgba(112, 71, 235, .03));
    transform: rotate(-13deg);
}
main::after {
    right: -190px;
    bottom: 40px;
    width: 470px;
    height: 360px;
    border-radius: 61% 39% 42% 58% / 39% 58% 42% 61%;
    background: linear-gradient(145deg, rgba(255, 180, 92, .12), rgba(112, 71, 235, .07));
    transform: rotate(16deg);
}

/* High-contrast form controls across the application. */
.form-group label {
    color: #3b324d;
    font-weight: 800;
}
input,
textarea,
select {
    min-height: 47px;
    color: #2d263c;
    background: var(--input-bg);
    border-color: var(--input-border);
    border-radius: 14px;
    box-shadow: inset 0 1px 2px rgba(47, 35, 75, .025);
}
textarea { min-height: 120px; }
input::placeholder,
textarea::placeholder { color: #9b92a9; opacity: 1; }
input:hover,
textarea:hover,
select:hover {
    border-color: #bba9e7;
    background: #fff;
}
input:focus,
textarea:focus,
select:focus {
    color: #241d35;
    border-color: #7750e9;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(112, 71, 235, .14), 0 9px 24px rgba(74, 48, 139, .07);
}
input:disabled,
textarea:disabled,
select:disabled {
    color: #736b80;
    background: #f1eef6;
}
.field-help {
    display: block;
    margin-top: 7px;
    color: #746c82;
    font-size: .81rem;
    line-height: 1.5;
}

/* More rounded, softly curved content surfaces. */
.card,
.feature-card,
.stat,
.quiz-card,
.public-post-card,
.public-video-card,
.resource-card,
.document-row,
.portal-preview,
.table-wrap,
.empty {
    border-radius: 25px;
}
.card,
.feature-card,
.stat,
.quiz-card,
.resource-card,
.document-row,
.portal-preview {
    border-color: rgba(112, 71, 235, .11);
}
.section-muted {
    margin: 22px 18px;
    border-radius: 54px;
    background: linear-gradient(155deg, #ffffff 0%, #faf8ff 100%);
    box-shadow: 0 18px 55px rgba(72, 48, 128, .055);
}
.cta-card {
    position: relative;
    overflow: hidden;
    border-radius: 42px 20px 42px 20px;
}
.cta-card::after {
    content: "";
    position: absolute;
    right: -58px;
    bottom: -78px;
    width: 210px;
    height: 180px;
    border-radius: 58% 42% 66% 34% / 44% 62% 38% 56%;
    background: rgba(255, 255, 255, .09);
    pointer-events: none;
}
.footer {
    position: relative;
    overflow: hidden;
    border-radius: 48px 48px 0 0;
}
.footer::before {
    content: "";
    position: absolute;
    left: -90px;
    top: -115px;
    width: 260px;
    height: 210px;
    border-radius: 50%;
    background: rgba(112, 71, 235, .055);
    pointer-events: none;
}

/* Public page title panel. */
.public-page-head {
    position: relative;
    overflow: hidden;
    margin-top: 34px;
    padding: 35px 38px;
    border: 1px solid rgba(112, 71, 235, .10);
    border-radius: 28px 52px 28px 52px;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(243,237,255,.94));
    box-shadow: 0 18px 50px rgba(77, 51, 139, .08);
}
.public-page-head::after {
    content: "";
    position: absolute;
    right: -45px;
    top: -55px;
    width: 170px;
    height: 150px;
    border-radius: 41% 59% 55% 45% / 56% 38% 62% 44%;
    background: rgba(112, 71, 235, .09);
    transform: rotate(18deg);
}
.public-page-head > * { position: relative; z-index: 1; }
.public-page-head h1 { color: var(--page-ink); }
.public-page-head .lead { color: var(--page-copy); }

/* Login screens receive a curved violet canvas instead of a flat page. */
.auth-shell {
    position: relative;
    overflow: hidden;
    margin: 28px 18px 42px;
    min-height: calc(100vh - 165px);
    border-radius: 38px 72px 38px 72px;
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.18), transparent 17rem),
        radial-gradient(circle at 87% 78%, rgba(255,181,89,.15), transparent 19rem),
        linear-gradient(135deg, #5d36cb 0%, #8152e5 53%, #a979f1 100%);
}
.auth-shell::before,
.auth-shell::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.auth-shell::before {
    left: -80px;
    bottom: -110px;
    width: 310px;
    height: 260px;
    border-radius: 60% 40% 54% 46% / 42% 62% 38% 58%;
    background: rgba(255,255,255,.10);
}
.auth-shell::after {
    right: -88px;
    top: -105px;
    width: 300px;
    height: 250px;
    border-radius: 45% 55% 37% 63% / 58% 39% 61% 42%;
    background: rgba(255,255,255,.11);
}
.auth-card {
    position: relative;
    z-index: 1;
    width: min(490px, calc(100% - 30px));
    padding: 34px;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 34px 20px 34px 20px;
    background: rgba(255,255,255,.975);
    box-shadow: 0 32px 75px rgba(38, 18, 91, .30);
}
.auth-card h2 { color: #28203a; }
.auth-card .muted { color: #6e667a; }

/* Teacher registration — fix text/background collision and enhance hierarchy. */
.page-teacher-register main::before,
.page-teacher-register main::after { display: none; }
.registration-page {
    position: relative;
    overflow: hidden;
    padding: 66px 0 82px;
    border-radius: 0 0 78px 78px;
    color: #fff;
    background:
        radial-gradient(circle at 9% 8%, rgba(255,255,255,.18), transparent 21rem),
        radial-gradient(circle at 92% 88%, rgba(255,178,82,.18), transparent 24rem),
        linear-gradient(135deg, #5932c5 0%, #7547df 44%, #a36ff0 100%);
    box-shadow: 0 28px 65px rgba(68, 39, 145, .19);
}
.registration-page::after {
    content: "";
    position: absolute;
    left: 17%;
    right: 17%;
    bottom: -104px;
    height: 165px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: #f7f4ff;
    opacity: .12;
    pointer-events: none;
}
.curve-orb {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.curve-orb-one {
    left: -115px;
    top: 35%;
    width: 330px;
    height: 270px;
    border-radius: 57% 43% 66% 34% / 42% 61% 39% 58%;
    background: rgba(255,255,255,.075);
    transform: rotate(-18deg);
}
.curve-orb-two {
    right: -95px;
    top: -70px;
    width: 310px;
    height: 280px;
    border-radius: 38% 62% 45% 55% / 58% 39% 61% 42%;
    background: rgba(255,255,255,.10);
    transform: rotate(14deg);
}
.registration-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(530px, 1.12fr);
    gap: clamp(34px, 5vw, 64px);
    align-items: center;
}
.registration-intro {
    color: #fff;
    text-shadow: 0 2px 18px rgba(44, 19, 111, .10);
}
.registration-intro h1 {
    color: #fff;
}
.registration-intro > p {
    color: rgba(255,255,255,.88);
}
.registration-steps > div {
    border-color: rgba(255,255,255,.21);
    background: rgba(255,255,255,.115);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 28px rgba(50,25,119,.08);
}
.registration-steps strong { color: #fff; }
.registration-steps small { color: rgba(255,255,255,.79); }
.registration-intro .btn-outline-light {
    color: #fff;
    border: 1px solid rgba(255,255,255,.58);
    background: rgba(255,255,255,.10);
    box-shadow: 0 11px 28px rgba(45,20,111,.12);
}
.registration-intro .btn-outline-light:hover {
    color: #5b34c4;
    border-color: #fff;
    background: #fff;
}
.registration-form-card {
    position: relative;
    overflow: hidden;
    padding: 36px;
    color: #2b233c;
    border: 1px solid rgba(255,255,255,.70);
    border-radius: 38px 22px 38px 22px;
    background: rgba(255,255,255,.985);
    box-shadow: 0 34px 80px rgba(37, 17, 91, .35);
    backdrop-filter: blur(16px);
}
.registration-form-card::before {
    content: "";
    position: absolute;
    right: -68px;
    top: -74px;
    width: 190px;
    height: 175px;
    border-radius: 43% 57% 62% 38% / 56% 41% 59% 44%;
    background: linear-gradient(145deg, rgba(112,71,235,.12), rgba(159,122,234,.035));
    pointer-events: none;
}
.registration-form-card > * { position: relative; z-index: 1; }
.registration-form-card .section-head { margin-bottom: 22px; }
.registration-form-card h2 {
    margin-top: 8px;
    color: #271f38;
}
.registration-form-card .muted { color: #6a6278; }
.registration-form-card .eyebrow {
    color: #5b34c4;
    background: #eee8ff;
}
.registration-form-card form {
    padding: 23px;
    border: 1px solid #eee9f7;
    border-radius: 25px 15px 25px 15px;
    background: linear-gradient(145deg, #fcfbff 0%, #f8f5ff 100%);
}
.registration-form-card .form-group label {
    color: #3a304c;
}
.registration-form-card .form-group label span {
    color: #d83f5f;
}
.registration-form-card input {
    color: #282036;
    background: #fff;
    border-color: #d8d0e6;
}
.registration-form-card input::placeholder { color: #9a91a7; }
.registration-form-card .flash-danger {
    color: #8f2438;
    background: #fff0f3;
    border-color: #ffc6d0;
}
.registration-submit {
    min-height: 51px;
    margin-top: 3px;
    border-radius: 16px;
    font-size: 1rem;
    box-shadow: 0 14px 30px rgba(112,71,235,.28);
}

/* Dashboard headings use a gentle curved background. */
.role-teacher .page-head,
.role-developer .page-head,
.role-student .page-head {
    position: relative;
    overflow: hidden;
    margin-top: 26px;
    margin-bottom: 20px;
    padding: 30px 32px;
    border: 1px solid rgba(112,71,235,.10);
    border-radius: 25px 48px 25px 48px;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,236,255,.96));
    box-shadow: 0 16px 48px rgba(72, 47, 132, .075);
}
.role-teacher .page-head::after,
.role-developer .page-head::after,
.role-student .page-head::after {
    content: "";
    position: absolute;
    right: -58px;
    top: -72px;
    width: 190px;
    height: 170px;
    border-radius: 44% 56% 62% 38% / 61% 39% 61% 39%;
    background: rgba(112,71,235,.08);
    pointer-events: none;
}
.role-teacher .page-head > *,
.role-developer .page-head > *,
.role-student .page-head > * { position: relative; z-index: 1; }

@media (max-width: 980px) {
    .registration-layout {
        grid-template-columns: 1fr;
        max-width: 760px;
    }
    .registration-intro { max-width: 680px; }
    .registration-page { padding-top: 48px; }
}

@media (max-width: 700px) {
    main::before {
        left: -175px;
        width: 340px;
        height: 270px;
    }
    main::after {
        right: -190px;
        width: 370px;
        height: 300px;
    }
    .section-muted {
        margin-inline: 8px;
        border-radius: 34px;
    }
    .public-page-head {
        margin-top: 22px;
        padding: 27px 23px;
        border-radius: 22px 38px 22px 38px;
    }
    .auth-shell {
        margin: 14px 8px 30px;
        min-height: calc(100vh - 120px);
        border-radius: 28px 48px 28px 48px;
    }
    .auth-card {
        padding: 27px 21px;
        border-radius: 28px 17px 28px 17px;
    }
    .registration-page {
        padding: 38px 0 52px;
        border-radius: 0 0 40px 40px;
    }
    .registration-layout { width: min(100% - 24px, 760px); }
    .registration-intro h1 { font-size: clamp(2.25rem, 12vw, 3.55rem); }
    .registration-intro > p { font-size: 1rem; }
    .registration-form-card {
        padding: 22px 16px;
        border-radius: 29px 17px 29px 17px;
    }
    .registration-form-card form {
        padding: 18px 14px;
        border-radius: 21px 13px 21px 13px;
    }
    .registration-form-card .form-grid { grid-template-columns: 1fr; gap: 0; }
    .registration-steps > div { border-radius: 17px; }
    .role-teacher .page-head,
    .role-developer .page-head,
    .role-student .page-head {
        margin-top: 18px;
        padding: 24px 21px;
        border-radius: 21px 35px 21px 35px;
    }
    .footer { border-radius: 34px 34px 0 0; }
}

@media (max-width: 420px) {
    .registration-layout { width: min(100% - 18px, 760px); }
    .registration-form-card { padding-inline: 12px; }
    .registration-form-card form { padding-inline: 12px; }
    .registration-steps > div {
        grid-template-columns: 43px 1fr;
        column-gap: 11px;
    }
    .registration-steps span {
        width: 39px;
        height: 39px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .curve-orb,
    main::before,
    main::after { transform: none !important; }
}

/* Final accessibility safeguards. */
input[type="hidden"] { display: none !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
input::placeholder,
textarea::placeholder,
.registration-form-card input::placeholder { color: #837a91; }
.registration-page {
    background:
        radial-gradient(circle at 9% 8%, rgba(255,255,255,.18), transparent 21rem),
        radial-gradient(circle at 92% 88%, rgba(255,178,82,.16), transparent 24rem),
        linear-gradient(135deg, #5932c5 0%, #7547df 48%, #8f5be4 100%);
}


/* Digitera V3.2 — akses publik hanya Guru dan Siswa */
.user-login-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 900px;
    margin-inline: auto;
}
.user-login-grid .login-role-card,
.user-login-grid .feature-card {
    min-height: 100%;
}
.login-role-action {
    display: inline-flex;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--primary, #7047eb);
}
.private-topbar .nav-wrap {
    justify-content: space-between;
}
.private-topbar .brand {
    pointer-events: none;
}
.private-access-label {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.12);
    color: #fff;
    border-radius: 999px;
    padding: .55rem .9rem;
    font-size: .82rem;
    font-weight: 700;
}
.private-footer {
    padding-top: 0;
}
.private-login-note {
    padding: .8rem 1rem;
    border-radius: 18px;
    background: rgba(112,71,235,.08);
}
@media (max-width: 720px) {
    .user-login-grid { grid-template-columns: 1fr; }
    .private-access-label { font-size: .72rem; padding: .45rem .7rem; }
}

/* ============================================================
   Digitera V3.3 — mobile dashboard cleanup
   Clean header icon, compact statistics, and no duplicated shortcut menu.
   ============================================================ */
.nav-toggle-icon {
    width: 21px;
    height: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}
.nav-toggle-icon > span {
    width: 100%;
    height: 2.5px;
    display: block;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle.is-open .nav-toggle-icon > span:nth-child(1) { transform: translateY(6.75px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-icon > span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-icon > span:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); }

.dashboard-stats .stat {
    min-width: 0;
    min-height: 142px;
    padding: 18px;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
}
.dashboard-stats .stat-icon {
    position: relative;
    top: auto;
    left: auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    margin-bottom: auto;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 15px;
    color: #fff;
    background: rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(7px);
}
.dashboard-stats .stat-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dashboard-stats .stat-label {
    width: 100%;
    margin-top: 15px;
    color: rgba(255,255,255,.84);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.28;
    overflow-wrap: anywhere;
}
.dashboard-stats .stat strong {
    display: block;
    margin-top: 4px;
    font-size: clamp(1.65rem, 3vw, 2rem);
    line-height: 1;
}
.dashboard-stats .stat::after { pointer-events: none; }

.activity-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: var(--purple-gradient);
    font-size: .82rem;
    font-weight: 900;
    font-family: inherit;
}
.activity-tugas { background: var(--blue-gradient); }
.activity-dokumen { background: var(--green-gradient); }
.activity-blog { background: var(--orange-gradient); }
.activity-video { background: var(--red-gradient); }

/* The old shortcut cards duplicated the header navigation and are removed
   from the teacher dashboard markup in V3.3. Keep this guard for cached markup. */
.page-dashboard .quick-grid-five { display: none !important; }

@media (max-width: 620px) {
    .page-dashboard .container { width: min(100% - 28px, 1120px); }
    .page-dashboard .dashboard-head { padding-top: 22px; }
    .page-dashboard .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }
    .dashboard-stats .stat {
        min-height: 136px;
        padding: 15px;
        border-radius: 22px;
    }
    .dashboard-stats .stat-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 13px;
    }
    .dashboard-stats .stat-icon svg { width: 21px; height: 21px; }
    .dashboard-stats .stat-label {
        margin-top: 13px;
        font-size: .8rem;
    }
    .dashboard-stats .stat strong { font-size: 1.55rem; }
}

@media (max-width: 360px) {
    .page-dashboard .dashboard-stats { grid-template-columns: 1fr !important; }
    .dashboard-stats .stat { min-height: 126px; }
}



/* ============================================================
   Digitera V3.4 — clean analytics cards on mobile
   Prevents icons and labels from overlapping on quiz analytics.
   ============================================================ */
.analytics-stats .analytics-stat {
    min-width: 0;
    min-height: 142px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.analytics-stats .stat-icon {
    position: relative;
    inset: auto;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    margin: 0;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 15px;
    color: #fff;
    background: rgba(255,255,255,.17);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(7px);
}
.analytics-stats .stat-icon svg {
    width: 23px;
    height: 23px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.analytics-stats .stat-label {
    width: 100%;
    margin-top: 15px;
    color: rgba(255,255,255,.86);
    font-size: .87rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.analytics-stats .analytics-stat strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: clamp(1.7rem,3vw,2rem);
    line-height: 1.05;
}
.analytics-stats .analytics-stat::after { pointer-events: none; }

@media (max-width: 620px) {
    .page-analytics .container { width: min(100% - 28px,1120px); }
    .page-analytics .analytics-stats {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 12px;
    }
    .analytics-stats .analytics-stat {
        min-height: 136px;
        padding: 15px;
        border-radius: 22px;
    }
    .analytics-stats .stat-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 13px;
    }
    .analytics-stats .stat-icon svg { width: 21px; height: 21px; }
    .analytics-stats .stat-label {
        margin-top: 13px;
        font-size: .8rem;
    }
    .analytics-stats .analytics-stat strong { font-size: 1.55rem; }
}

@media (max-width: 350px) {
    .page-analytics .analytics-stats { grid-template-columns: 1fr !important; }
}

/* =========================================================
   Digitera v3.5+ — alat pembuatan soal
   ========================================================= */
.question-builder-head { align-items: flex-end; gap: 18px; }
.question-create-actions { margin-top: 0; align-items: center; justify-content: flex-end; }
.question-create-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn-ai {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    color: #fff !important;
    background: linear-gradient(135deg,#6d3ff0,#9b5cff 58%,#c164f6);
    box-shadow: 0 12px 28px rgba(112,71,235,.28);
}
.btn-ai:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(112,71,235,.34); }
.btn-ai span { line-height: 1; font-size: 1rem; }

.question-tool-layout {
    display: grid;
    grid-template-columns: minmax(0,1.55fr) minmax(280px,.65fr);
    gap: 22px;
    align-items: start;
}
.question-tool-card { overflow: hidden; }
.question-tool-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}
.question-tool-heading > div:first-child {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.question-tool-heading h2 { margin: 0 0 4px; }
.question-tool-heading p { margin: 0; }
.tool-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1;
}
.tool-icon-ai { color: #fff; background: linear-gradient(135deg,#7047eb,#b45cff); box-shadow: 0 10px 24px rgba(112,71,235,.26); }
.question-tool-help { position: sticky; top: 102px; }
.question-tool-help ol { margin: 18px 0; padding-left: 22px; }
.question-tool-help li { margin: 0 0 12px; color: var(--text-soft,#5d6475); }
.question-tool-help code { padding: 2px 6px; border-radius: 7px; background: #f0edff; color: #5c36c9; font-size: .82em; }
.form-grid-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.btn-ai-generate { display: inline-flex; align-items: center; gap: 9px; }

.ai-preview-list { display: grid; gap: 16px; margin-top: 18px; }
.ai-preview-item {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(112,71,235,.14);
    border-radius: 22px;
    background: linear-gradient(145deg,#fff,#faf8ff);
    box-shadow: 0 10px 28px rgba(55,40,110,.07);
}
.ai-preview-item::after {
    content: "";
    position: absolute;
    right: -48px;
    top: -58px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(151,104,255,.08);
    pointer-events: none;
}
.ai-preview-item h3 { position: relative; z-index: 1; margin: 14px 0; font-size: 1.05rem; line-height: 1.55; }
.preview-select {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eee9ff;
    color: #5632c5;
    font-size: .85rem;
    font-weight: 800;
    cursor: pointer;
}
.preview-select input { width: auto; margin: 0; accent-color: #7047eb; }
.ai-preview-item .option-list { position: relative; z-index: 1; }
.ai-preview-item .meta { position: relative; z-index: 1; }

@media (max-width: 900px) {
    .question-tool-layout { grid-template-columns: 1fr; }
    .question-tool-help { position: static; }
    .question-builder-head { align-items: flex-start; }
    .question-create-actions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 680px) {
    .question-create-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .question-create-actions .btn { width: 100%; }
    .form-grid-three { grid-template-columns: 1fr; }
    .question-tool-heading { align-items: flex-start; }
    .question-tool-heading > .badge { flex: 0 0 auto; }
    .ai-preview-item { padding: 16px; border-radius: 18px; }
    .ai-preview-item .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (max-width: 420px) {
    .question-tool-heading { display: block; }
    .question-tool-heading > div:first-child { align-items: flex-start; }
    .question-tool-heading > .badge { display: inline-flex; margin-top: 12px; }
    .ai-preview-item .meta { grid-template-columns: 1fr; }
}

/* Digitera V3.6 — AI gratis tanpa API key */
.free-ai-steps {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin: 0 0 22px;
}
.free-ai-step {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(112,71,235,.13);
    border-radius: 20px 20px 20px 8px;
    color: #68677a;
    background: rgba(255,255,255,.76);
    box-shadow: 0 9px 25px rgba(62,43,118,.07);
}
.free-ai-step > span {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 13px;
    color: #6745c8;
    background: #eee9ff;
    font-weight: 900;
}
.free-ai-step div { min-width: 0; }
.free-ai-step strong,.free-ai-step small { display: block; }
.free-ai-step strong { color: #3c3751; }
.free-ai-step small { margin-top: 2px; color: #858294; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.free-ai-step.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg,#7047eb,#a956f0);
    box-shadow: 0 14px 32px rgba(112,71,235,.24);
}
.free-ai-step.is-active > span { color: #7047eb; background: #fff; }
.free-ai-step.is-active strong,.free-ai-step.is-active small { color: #fff; }
.free-ai-step.is-done > span { color: #075f4f; background: #ccf7eb; }

.free-ai-paste-layout { align-items: start; }
.no-api-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid #b7eadb;
    border-radius: 999px;
    color: #08745f;
    background: #e7fbf5;
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
}
.prompt-copy-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 18px 0 12px;
}
.copy-status {
    min-height: 1.3em;
    color: #08745f;
    font-size: .88rem;
    font-weight: 800;
}
.ai-prompt-box,.ai-output-box {
    width: 100%;
    resize: vertical;
    border-radius: 20px 20px 20px 8px;
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
    font-size: .88rem;
    line-height: 1.65;
}
.ai-prompt-box {
    min-height: 390px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.14);
    color: #f8f7ff;
    background:
        radial-gradient(circle at 100% 0,rgba(178,102,255,.26),transparent 35%),
        linear-gradient(145deg,#29203f,#3a2462 62%,#4d2b78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09),0 14px 30px rgba(43,28,82,.16);
}
.ai-prompt-box:focus { outline: 3px solid rgba(112,71,235,.18); border-color: #9a7cf2; }
.ai-output-box {
    min-height: 290px;
    padding: 16px;
    border: 1px solid #ddd5f6;
    color: #302b40;
    background: linear-gradient(180deg,#fff,#fbfaff);
}
.ai-output-box:focus { border-color: #8060df; box-shadow: 0 0 0 4px rgba(112,71,235,.11); }
.ai-output-box::placeholder { color: #9691a7; }

@media (max-width: 760px) {
    .free-ai-steps { grid-template-columns: 1fr; gap: 8px; }
    .free-ai-step { padding: 11px 13px; border-radius: 17px 17px 17px 7px; }
    .free-ai-step > span { width: 32px; height: 32px; flex-basis: 32px; border-radius: 11px; }
    .free-ai-step small { white-space: normal; }
    .prompt-copy-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
    .prompt-copy-toolbar .btn { width: 100%; }
    .copy-status { grid-column: 1/-1; }
    .ai-prompt-box { min-height: 330px; font-size: .82rem; }
    .ai-output-box { min-height: 250px; }
}
@media (max-width: 430px) {
    .prompt-copy-toolbar { grid-template-columns: 1fr; }
    .copy-status { grid-column: auto; }
    .no-api-badge { margin-top: 10px; }
}


/* Digitera V3.7 — petunjuk pembuatan soal untuk guru */
.user-guide {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0,1fr);
    gap: 16px;
    align-items: start;
    margin: 0 0 20px;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid rgba(112,71,235,.16);
    border-radius: 24px 24px 24px 9px;
    color: #3e3850;
    background:
        radial-gradient(circle at 100% 0,rgba(166,104,255,.13),transparent 35%),
        linear-gradient(145deg,#ffffff,#faf8ff);
    box-shadow: 0 12px 30px rgba(57,40,111,.08);
}
.user-guide::after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -72px;
    width: 150px;
    height: 120px;
    border-radius: 60% 45% 0 0;
    background: rgba(112,71,235,.055);
    pointer-events: none;
}
.user-guide-mark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 18px 18px 18px 7px;
    color: #fff;
    background: linear-gradient(135deg,#7047eb,#aa5bf4);
    box-shadow: 0 10px 24px rgba(112,71,235,.23);
    font-weight: 900;
    font-size: .9rem;
}
.user-guide > div:last-child { position: relative; z-index: 1; min-width: 0; }
.user-guide strong { display: block; margin: 1px 0 6px; color: #382f55; font-size: 1rem; }
.user-guide p { margin: 0; color: #656075; line-height: 1.65; }
.user-guide p + p { margin-top: 8px; }
.user-guide ol,.user-guide ul { margin: 8px 0 0; padding-left: 20px; color: #656075; }
.user-guide li { margin: 5px 0; line-height: 1.5; }
.user-guide-note {
    padding: 9px 11px;
    border-left: 3px solid #8c65ea;
    border-radius: 0 10px 10px 0;
    background: rgba(112,71,235,.055);
}
.user-guide-ai .user-guide-mark { font-size: .76rem; letter-spacing: .02em; }
.user-guide-choice { margin-top: -2px; }
.section-help {
    margin: 0 0 16px;
    padding: 11px 13px;
    border: 1px solid rgba(112,71,235,.12);
    border-radius: 14px 14px 14px 6px;
    color: #666074;
    background: #faf8ff;
    font-size: .9rem;
    line-height: 1.55;
}
.section-help strong { color: #5b3fc4; }

@media (max-width: 620px) {
    .user-guide {
        grid-template-columns: 42px minmax(0,1fr);
        gap: 12px;
        padding: 15px;
        border-radius: 20px 20px 20px 8px;
    }
    .user-guide-mark { width: 42px; height: 42px; border-radius: 14px 14px 14px 6px; }
    .user-guide strong { font-size: .95rem; }
    .user-guide p,.user-guide li { font-size: .88rem; }
    .section-help { font-size: .86rem; }
}

.prompt-preview {
    margin: 12px 0 18px;
    border: 1px solid rgba(112,71,235,.14);
    border-radius: 16px;
    background: #faf8ff;
}
.prompt-preview summary {
    padding: 12px 14px;
    cursor: pointer;
    color: #5b3fc4;
    font-weight: 800;
}
.prompt-preview .ai-prompt-box {
    display: block;
    margin: 0;
    border-radius: 0 0 16px 16px;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

/* ===== Digitera V3.8: banyak soal + editor gambar ===== */
.question-image-display,
.question-image-preview {
    display: block;
    width: min(100%, 760px);
    max-height: 440px;
    object-fit: contain;
    border-radius: 22px 22px 22px 8px;
    border: 1px solid rgba(112,71,235,.14);
    background: #f8f6ff;
    box-shadow: 0 12px 30px rgba(63,43,124,.10);
}
.question-image-display { margin: 14px 0 18px; }
.question-image-builder { max-width: 620px; }
.question-image-play { margin: 16px auto 20px; max-height: 520px; }
.question-image-preview { max-width: 360px; max-height: 250px; margin-top: 10px; }
.question-image-preview[hidden] { display: none !important; }
.question-image-editor {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(220px,.7fr);
    gap: 18px;
    align-items: start;
    padding: 16px;
    margin: 8px 0 22px;
    border-radius: 24px 24px 24px 10px;
    background: linear-gradient(135deg, rgba(112,71,235,.07), rgba(75,188,255,.06));
    border: 1px dashed rgba(112,71,235,.22);
}
.question-image-editor.compact { margin: 12px 0 18px; }
.remove-image-check { display:flex; gap:8px; align-items:center; margin-top:10px; font-weight:700; color:#6b5c92; }
.remove-image-check input { width:auto; }
.option-edit-row {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    margin: 9px 0;
}
.option-edit-row > input[type="radio"] { width:auto; margin:0; }

.bulk-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    margin-bottom:18px;
    border-radius:28px 28px 28px 12px;
}
.bulk-toolbar p { margin:4px 0 0; }
.bulk-count-input { width:100px !important; min-width:90px; }
.bulk-question-card {
    margin-bottom:18px;
    border-radius:30px 30px 30px 12px;
    box-shadow:0 15px 34px rgba(63,43,124,.10);
}
.bulk-options-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; }
.sticky-save-bar {
    position: sticky;
    bottom: 14px;
    z-index: 20;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    margin-top:18px;
    border:1px solid rgba(112,71,235,.18);
    border-radius:24px 24px 24px 10px;
    background:rgba(255,255,255,.96);
    box-shadow:0 16px 42px rgba(55,38,112,.18);
    backdrop-filter:blur(14px);
}
.ai-editable-preview-list { display:grid; gap:18px; }
.ai-edit-card {
    border-radius:28px 28px 28px 12px;
    background:linear-gradient(180deg,#fff,#fbfaff);
    border:1px solid rgba(112,71,235,.14);
    padding:20px;
}
.ai-edit-card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.ai-edit-options { margin: 12px 0 16px; }
.ai-edit-options > label:first-child { font-weight:800; color:#433369; }

@media (max-width: 760px) {
    .question-image-editor { grid-template-columns:1fr; border-radius:22px 22px 22px 8px; }
    .question-image-preview { max-width:100%; }
    .bulk-toolbar { align-items:flex-start; flex-direction:column; border-radius:24px 24px 24px 9px; }
    .bulk-toolbar .actions { width:100%; }
    .bulk-toolbar .actions .btn { flex:1 1 160px; }
    .bulk-count-input { flex:0 0 88px !important; }
    .bulk-options-grid { grid-template-columns:1fr; }
    .sticky-save-bar { bottom:8px; border-radius:20px 20px 20px 8px; }
    .sticky-save-bar .btn { white-space:nowrap; }
    .ai-edit-card { padding:15px; border-radius:24px 24px 24px 9px; }
    .ai-edit-card-head { align-items:flex-start; flex-direction:column; }
    .question-create-actions .btn { flex:1 1 180px; }
}

@media (max-width: 430px) {
    .sticky-save-bar { align-items:stretch; flex-direction:column; }
    .sticky-save-bar .btn { width:100%; }
    .bulk-toolbar .actions { flex-direction:column; }
    .bulk-count-input { width:100% !important; flex:auto !important; }
}


/* Digitera V3.9 — impor CSV */
.import-error-details { margin:16px 0; padding:14px 16px; border-radius:18px; background:#fff7ed; border:1px solid #fed7aa; }
.import-error-details summary { cursor:pointer; font-weight:800; color:#9a3412; }
.import-error-details ul { margin:12px 0 0; padding-left:20px; color:#7c2d12; }
.page-quizzes .question-create-actions { flex-wrap:wrap; }
@media (max-width:720px) {
  .page-quizzes .question-create-actions .btn { flex:1 1 calc(50% - 8px); justify-content:center; }
  .page-quizzes .question-create-actions .btn:last-child { flex-basis:100%; }
}

/* =========================================================
   Digitera V4.0 — portal quiz tanpa kode tambahan + quiz studio
   ========================================================= */
:root{
    --quiz-red:#e94b4b;
    --quiz-blue:#316fd4;
    --quiz-yellow:#d89d16;
    --quiz-green:#2e9d63;
    --quiz-ink:#251c43;
    --quiz-purple:#6d42e8;
}

/* Siswa: daftar quiz setelah login dengan kode guru */
.student-quiz-hero{
    position:relative;
    overflow:hidden;
    padding:72px 0 62px;
    color:#fff;
    background:
        radial-gradient(circle at 88% 20%,rgba(255,255,255,.18),transparent 24%),
        radial-gradient(circle at 9% 105%,rgba(78,220,255,.22),transparent 28%),
        linear-gradient(135deg,#4f28c9 0%,#7447ed 48%,#9756ee 100%);
}
.student-quiz-hero::after{
    content:"";position:absolute;left:-8%;right:-8%;bottom:-70px;height:130px;
    border-radius:50% 50% 0 0/100% 100% 0 0;background:#f8f6ff;
}
.student-quiz-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:42px;align-items:center}
.student-quiz-hero h1{max-width:760px;margin:16px 0;font-size:clamp(2.2rem,5vw,4rem)}
.student-quiz-hero .lead{max-width:690px;color:rgba(255,255,255,.84)}
.student-code-mini{justify-self:end;width:min(100%,330px);padding:22px;border:1px solid rgba(255,255,255,.22);border-radius:28px 28px 28px 10px;background:rgba(255,255,255,.13);box-shadow:0 24px 60px rgba(44,21,101,.24);backdrop-filter:blur(12px)}
.student-code-mini span,.student-code-mini small{display:block;color:rgba(255,255,255,.75)}
.student-code-mini strong{display:block;margin:6px 0;font-size:1.8rem;letter-spacing:.08em;color:#fff}
.student-quiz-section{padding-top:38px;background:#f8f6ff}
.student-quiz-filter-card{display:grid;grid-template-columns:minmax(180px,.55fr) minmax(0,1.1fr) minmax(240px,.75fr);gap:18px;align-items:center;margin-bottom:30px;padding:18px;border:1px solid rgba(112,71,235,.12);border-radius:28px;background:#fff;box-shadow:0 14px 38px rgba(56,38,113,.08)}
.student-quiz-filter-copy strong,.student-quiz-filter-copy span{display:block}.student-quiz-filter-copy strong{color:#392b66}.student-quiz-filter-copy span{margin-top:4px;color:#777184;font-size:.86rem}
.class-chip-row{display:flex;gap:8px;overflow-x:auto;padding:3px 2px;scrollbar-width:none}.class-chip-row::-webkit-scrollbar{display:none}
.class-chip{flex:0 0 auto;padding:9px 13px;border:1px solid #e2ddf6;border-radius:999px;color:#594f73;background:#faf9ff;font-size:.86rem;font-weight:800}.class-chip:hover,.class-chip.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,#7047eb,#9355ef);box-shadow:0 8px 18px rgba(112,71,235,.2)}
.student-quiz-search{display:flex;gap:8px}.student-quiz-search input{min-width:0}.student-quiz-search .btn{flex:0 0 auto}
.student-quiz-list-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.student-quiz-list-head h2{margin:8px 0 0}.quiz-count-pill{padding:8px 12px;border-radius:999px;color:#6043bc;background:#eee9ff;font-weight:900;font-size:.84rem}
.student-quiz-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.student-quiz-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:310px;padding:21px;border:1px solid rgba(112,71,235,.12);border-radius:28px 28px 28px 10px;background:linear-gradient(160deg,#fff 0%,#fbfaff 78%,#f0eaff 100%);box-shadow:0 15px 38px rgba(57,39,111,.09);transition:.18s ease}
.student-quiz-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(57,39,111,.14);border-color:rgba(112,71,235,.26)}
.student-quiz-card::after{content:"";position:absolute;right:-45px;top:-45px;width:125px;height:125px;border-radius:50%;background:rgba(112,71,235,.065)}
.student-quiz-card-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px}.quiz-number{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#7047eb,#a95cf0);font-weight:900}.class-badge{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;color:#6546c5;background:#eee9ff;font-size:.78rem;font-weight:900}
.quiz-card-subject{position:relative;z-index:1;margin-top:22px;color:#8b62e8;font-size:.82rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.student-quiz-card h3{position:relative;z-index:1;margin:6px 0 8px;color:#30254f;font-size:1.28rem}.student-quiz-card p{position:relative;z-index:1;margin:0 0 16px;color:#797386;font-size:.9rem}.student-quiz-meta{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:auto 0 15px}.student-quiz-meta span{padding:9px 6px;border-radius:12px;background:#f4f1ff;color:#766f86;text-align:center;font-size:.76rem}.student-quiz-meta b{display:block;color:#46346f;font-size:.95rem}.student-quiz-start{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:15px;color:#fff!important;background:linear-gradient(135deg,#7047eb,#9254ed);font-weight:900;box-shadow:0 10px 24px rgba(112,71,235,.22)}
.student-quiz-empty{border-radius:28px;background:#fff}
.student-home-quiz-section{background:linear-gradient(180deg,#fff,#f9f7ff)}
.student-home-quiz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.student-home-quiz-card{display:flex;flex-direction:column;gap:8px;min-height:176px;padding:18px;border:1px solid rgba(112,71,235,.12);border-radius:24px 24px 24px 9px;color:#35294f;background:#fff;box-shadow:0 12px 28px rgba(54,37,105,.07)}.student-home-quiz-card:hover{color:#35294f;transform:translateY(-2px);border-color:#b8a4ef}.student-home-quiz-card strong{font-size:1.02rem}.student-home-quiz-card small{color:#817b8c}.student-home-quiz-go{margin-top:auto;color:#7047eb;font-weight:900}

/* Siswa: halaman mulai */
.quiz-start-shell{min-height:calc(100vh - 70px);padding:56px 0 70px;background:radial-gradient(circle at 15% 20%,rgba(81,223,255,.15),transparent 25%),linear-gradient(135deg,#3e1d9f,#7047eb 55%,#a85bed)}
.quiz-start-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.65fr);gap:38px;align-items:center}.quiz-start-summary{color:#fff}.quiz-start-summary h1{margin:18px 0;font-size:clamp(2.4rem,5vw,4.3rem)}.quiz-start-summary .lead{color:rgba(255,255,255,.82)}.quiz-back-link{display:inline-flex;margin-bottom:24px;color:rgba(255,255,255,.8);font-weight:800}.quiz-back-link:hover{color:#fff}.quiz-start-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px}.quiz-start-facts>div{padding:15px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(255,255,255,.1)}.quiz-start-facts span,.quiz-start-facts strong{display:block}.quiz-start-facts span{color:rgba(255,255,255,.68);font-size:.8rem}.quiz-start-facts strong{margin-top:4px;color:#fff}
.quiz-start-card{padding:28px;border-radius:30px 30px 30px 12px;background:#fff;box-shadow:0 30px 70px rgba(39,18,87,.28)}.quiz-start-step{display:inline-flex;padding:7px 10px;border-radius:999px;color:#6848c6;background:#eee9ff;font-size:.8rem;font-weight:900}.quiz-start-card h2{margin:14px 0 6px}.quiz-start-card>p{margin:0 0 20px;color:#777184}.selected-class-card{margin:4px 0 18px;padding:14px;border:1px solid #e5dff8;border-radius:16px;background:#faf8ff}.selected-class-card span,.selected-class-card strong,.selected-class-card small{display:block}.selected-class-card span,.selected-class-card small{color:#80788f;font-size:.82rem}.selected-class-card strong{margin:3px 0;color:#4a367a}.quiz-start-button{min-height:52px;border-radius:15px!important;font-size:1rem}

/* Guru: studio soal ala editor kuis modern */
.quiz-studio-container{width:min(1220px,calc(100% - 32px))}.quiz-studio-page-head{padding-bottom:18px}.quiz-studio-tip{display:grid;grid-template-columns:44px minmax(0,1fr);gap:13px;align-items:start;margin-bottom:18px;padding:14px 16px;border:1px solid rgba(112,71,235,.14);border-radius:20px 20px 20px 8px;background:#fff;box-shadow:0 10px 26px rgba(53,37,102,.06)}.quiz-studio-tip-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#7047eb,#aa5af1);font-weight:900}.quiz-studio-tip strong,.quiz-studio-tip p{display:block;margin:0}.quiz-studio-tip p{margin-top:3px;color:#746d80;font-size:.9rem}
.quiz-studio-form{padding-bottom:35px}.quiz-studio-toolbar{position:sticky;top:76px;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;padding:13px 16px;border:1px solid rgba(112,71,235,.14);border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 12px 34px rgba(53,36,102,.11);backdrop-filter:blur(14px)}.studio-toolbar-brand{display:flex;align-items:center;gap:11px}.studio-toolbar-brand strong,.studio-toolbar-brand small{display:block}.studio-toolbar-brand small{margin-top:2px;color:#858091}.studio-question-number{display:inline-grid;place-items:center;min-width:54px;height:38px;padding:0 10px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#7047eb,#9655ec);font-size:.78rem;font-weight:900;letter-spacing:.04em}.studio-toolbar-fields,.bulk-studio-toolbar-fields{display:flex;align-items:end;gap:10px}.studio-toolbar-fields label,.bulk-studio-toolbar-fields label{display:grid;gap:4px;color:#786f8c;font-size:.72rem;font-weight:800}.studio-toolbar-fields select,.bulk-studio-toolbar-fields select{min-width:180px;padding:9px 11px;border-radius:11px}
.quiz-studio-canvas{position:relative;overflow:hidden;padding:28px;border-radius:32px 32px 32px 12px;color:#fff;background:radial-gradient(circle at 100% 0,rgba(255,255,255,.12),transparent 28%),linear-gradient(145deg,#331b72,#5226a7 50%,#6f35c8);box-shadow:0 24px 60px rgba(52,26,111,.22)}.quiz-studio-canvas::after{content:"";position:absolute;left:-90px;bottom:-150px;width:320px;height:260px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}.quiz-studio-canvas>*{position:relative;z-index:1}
.studio-question-box{max-width:930px;margin:0 auto 18px;text-align:center}.studio-question-box.compact{max-width:none;margin:0 0 16px;text-align:left}.studio-question-box>label{display:block;margin-bottom:8px;color:rgba(255,255,255,.7);font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.studio-question-box.compact>label{color:#6a5a91}.studio-question-input{min-height:118px;padding:20px;border:2px solid transparent!important;border-radius:18px!important;color:#251e38!important;background:#fff!important;box-shadow:0 14px 36px rgba(27,12,59,.17)!important;text-align:center;font-size:clamp(1.15rem,2.4vw,1.7rem)!important;font-weight:800;line-height:1.45}.studio-question-box.compact .studio-question-input{min-height:92px;padding:14px;text-align:left;font-size:1.02rem!important}.studio-question-input:focus{border-color:#a888ff!important;box-shadow:0 0 0 5px rgba(255,255,255,.12),0 14px 36px rgba(27,12,59,.17)!important}.studio-question-hint{margin-top:8px;color:rgba(255,255,255,.68);font-size:.84rem}
.studio-media-zone{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(160px,.45fr);gap:14px;align-items:center;max-width:930px;margin:0 auto 24px;padding:12px 14px;border:1px dashed rgba(255,255,255,.24);border-radius:18px;background:rgba(255,255,255,.08)}.studio-media-copy strong,.studio-media-copy span{display:block}.studio-media-copy span{color:rgba(255,255,255,.68);font-size:.82rem}.studio-upload-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 13px;border-radius:12px;color:#4d2ba3;background:#fff;font-weight:900;cursor:pointer}.studio-upload-button.compact{min-height:36px;padding:7px 11px;color:#6040bf;background:#eee9ff}.studio-media-preview{display:flex;justify-content:flex-end}.studio-media-preview .question-image-preview{max-width:150px;max-height:96px;margin:0;border-color:rgba(255,255,255,.24);border-radius:12px}.quiz-studio-canvas .remove-image-check{grid-column:1/-1;margin:0;color:#fff}
.studio-answer-section{max-width:1050px;margin:0 auto}.studio-section-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:12px}.studio-section-title span,.studio-section-title strong{display:block}.studio-section-title span{color:rgba(255,255,255,.65);font-size:.78rem;font-weight:900;text-transform:uppercase}.studio-section-title strong{font-size:1.05rem}.studio-section-title small{color:rgba(255,255,255,.65)}
.studio-answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.studio-answer-tile{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 42px;gap:10px;align-items:center;min-height:82px;padding:12px 13px;border:3px solid transparent;border-radius:16px;color:#fff;box-shadow:0 10px 22px rgba(18,9,39,.14);transition:.15s ease}.studio-answer-tile.answer-red{background:var(--quiz-red)}.studio-answer-tile.answer-blue{background:var(--quiz-blue)}.studio-answer-tile.answer-yellow{background:var(--quiz-yellow)}.studio-answer-tile.answer-green{background:var(--quiz-green)}.studio-answer-tile.is-correct{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18),0 13px 28px rgba(18,9,39,.22)}.answer-shape{display:grid;place-items:center;width:38px;height:38px;color:#fff;font-size:1.45rem;text-shadow:0 2px 4px rgba(0,0,0,.16)}.answer-text-input{min-width:0!important;padding:11px 12px!important;border:0!important;border-radius:10px!important;color:#2e2940!important;background:rgba(255,255,255,.96)!important;font-weight:750}.answer-text-input:focus{box-shadow:0 0 0 4px rgba(255,255,255,.23)!important}.answer-key-toggle{display:grid!important;place-items:center!important;width:38px;height:38px;margin:0!important;border:2px solid rgba(255,255,255,.65);border-radius:50%;cursor:pointer}.answer-key-toggle input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important}.answer-key-toggle span{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;color:transparent;font-weight:900}.studio-answer-tile.is-correct .answer-key-toggle{border-color:#fff;background:#fff}.studio-answer-tile.is-correct .answer-key-toggle span{color:#2f7e57}.studio-answer-grid-tf{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-answer-grid-tf .studio-answer-tile strong{font-size:1.1rem}
.studio-settings{margin-top:14px;border:1px solid rgba(112,71,235,.14);border-radius:22px 22px 22px 8px;background:#fff;box-shadow:0 10px 28px rgba(54,38,104,.07);overflow:hidden}.studio-settings summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;cursor:pointer;list-style:none}.studio-settings summary::-webkit-details-marker{display:none}.studio-settings summary span{color:#433368;font-weight:900}.studio-settings summary small{color:#8b8494}.studio-settings[open] summary{border-bottom:1px solid #eee9f8}.studio-settings-body{padding:17px}.studio-settings.compact{margin:15px 0 0}.studio-settings.compact .studio-settings-body{padding:13px}.studio-order-field{max-width:260px;margin-bottom:0}
.studio-save-bar{position:sticky;bottom:12px;z-index:14;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:13px 15px;border:1px solid rgba(112,71,235,.18);border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 15px 38px rgba(48,31,95,.17);backdrop-filter:blur(14px)}.studio-save-bar strong,.studio-save-bar span{display:block}.studio-save-bar span{margin-top:2px;color:#858091;font-size:.82rem}.studio-save-button{min-width:170px;min-height:46px;border-radius:13px!important;background:linear-gradient(135deg,#7047eb,#9655ee)!important}

/* Banyak soal */
.bulk-studio-topbar{position:sticky;top:76px;z-index:14;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;padding:14px 16px;border:1px solid rgba(112,71,235,.15);border-radius:22px;background:rgba(255,255,255,.97);box-shadow:0 12px 32px rgba(54,37,104,.11);backdrop-filter:blur(12px)}.bulk-studio-topbar strong,.bulk-studio-topbar span{display:block}.bulk-studio-topbar span{color:#858091;font-size:.83rem}.bulk-studio-add-controls{display:flex;gap:9px;align-items:center}.bulk-studio-list{display:grid;gap:18px}.bulk-studio-question{padding:18px;border:1px solid rgba(112,71,235,.14);border-radius:28px 28px 28px 11px;background:linear-gradient(180deg,#fff,#fbfaff);box-shadow:0 15px 38px rgba(55,38,108,.09)}.bulk-studio-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.bulk-studio-card-title{display:flex;align-items:center;gap:11px}.bulk-studio-card-title strong,.bulk-studio-card-title small{display:block}.bulk-studio-card-title small{color:#888190}.bulk-remove-button{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:12px;color:#a43c47;background:#fff0f2;font-size:1.35rem;cursor:pointer}.bulk-studio-toolbar-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:14px}.bulk-studio-toolbar-fields select{width:100%;min-width:0}.bulk-studio-question .studio-question-box.compact>label{color:#715b9d}.bulk-studio-media-row{display:flex;align-items:center;gap:10px;min-height:48px;margin:4px 0 15px;padding:9px 11px;border:1px dashed #d9d0f3;border-radius:14px;background:#faf8ff}.bulk-studio-media-row>span{color:#8b8496;font-size:.82rem}.bulk-image-preview{width:70px!important;max-height:54px!important;margin:0!important;border-radius:9px!important}.bulk-answer-grid{margin-top:10px}.bulk-studio-save{bottom:10px}

/* Hasil AI/CSV ikut terasa seperti studio soal */
.ai-edit-card{overflow:hidden;border-radius:28px!important;box-shadow:0 14px 34px rgba(55,38,108,.09)!important}.ai-edit-card .form-group>textarea[data-edit="prompt"]{min-height:100px;padding:15px;border:2px solid #eee8fb;border-radius:16px;background:#fff;font-size:1.05rem;font-weight:750;text-align:center}.ai-edit-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ai-edit-options>label:first-child{grid-column:1/-1}.ai-edit-options .option-edit-row{grid-template-columns:34px minmax(0,1fr);min-height:58px;margin:0;padding:9px;border:3px solid transparent;border-radius:14px;color:#fff}.ai-edit-options .option-edit-row:nth-of-type(2){background:var(--quiz-red)}.ai-edit-options .option-edit-row:nth-of-type(3){background:var(--quiz-blue)}.ai-edit-options .option-edit-row:nth-of-type(4){background:var(--quiz-yellow)}.ai-edit-options .option-edit-row:nth-of-type(5){background:var(--quiz-green)}.ai-edit-options .option-edit-row:has(input[type="radio"]:checked){border-color:#4b376f;box-shadow:0 0 0 3px rgba(112,71,235,.13)}.ai-edit-options .option-edit-row>input[type="radio"]{accent-color:#fff;transform:scale(1.15)}.ai-edit-options .option-edit-row>input:last-child{border:0!important;background:rgba(255,255,255,.96)!important;color:#2f2940!important;font-weight:750}

/* Guru: daftar kuis tidak lagi menonjolkan kode kuis */
.quiz-visibility-note{display:flex;align-items:center;gap:10px;margin:12px 0 16px;padding:11px 12px;border-radius:14px;background:#f4f0ff;color:#5f4b92}.quiz-visibility-note>span{display:grid;place-items:center;width:31px;height:31px;flex:0 0 31px;border-radius:10px;color:#fff;background:#7551dd;font-weight:900}.quiz-visibility-note strong,.quiz-visibility-note small{display:block}.quiz-visibility-note small{margin-top:2px;color:#81798e;font-size:.79rem}.teacher-quiz-access{margin:10px 0 12px;padding:13px;border-radius:16px;background:linear-gradient(135deg,#f2edff,#faf8ff)}.teacher-quiz-access span,.teacher-quiz-access strong,.teacher-quiz-access small{display:block}.teacher-quiz-access span{color:#837b91;font-size:.78rem}.teacher-quiz-access strong{margin:3px 0;color:#5637ba;font-size:1.2rem;letter-spacing:.06em}.teacher-quiz-access small{color:#7b7487;line-height:1.5}

/* Siswa: player satu soal per layar */
.quiz-player-shell{min-height:calc(100vh - 70px);padding:24px 0 60px;background:linear-gradient(180deg,#f1edff 0,#f8f6ff 220px,#f7f7fb 100%)}.quiz-player-container{max-width:980px}.quiz-player-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;border:1px solid rgba(112,71,235,.14);border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(54,37,104,.08)}.quiz-player-title span,.quiz-player-title strong,.quiz-player-timer span,.quiz-player-timer strong{display:block}.quiz-player-title span,.quiz-player-timer span{color:#8b8496;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.quiz-player-title strong{color:#3a2b63}.quiz-player-timer{text-align:right}.quiz-player-timer strong{color:#6041c1;font-size:1.25rem}.quiz-player-timer.is-warning strong{color:#c63c4a}.quiz-progress-wrap{margin:12px 0 17px}.quiz-progress-track{height:9px;overflow:hidden;border-radius:999px;background:#ded7f3}.quiz-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7047eb,#b45bec);transition:width .2s ease}.quiz-progress-text{display:flex;justify-content:space-between;gap:12px;margin-top:7px;color:#817a8e;font-size:.8rem;font-weight:800}.quiz-step-stack{min-height:470px}.quiz-step-card{padding:26px;border:1px solid rgba(112,71,235,.13);border-radius:30px 30px 30px 12px;background:#fff;box-shadow:0 18px 42px rgba(55,38,108,.1)}.quiz-stepper-ready .quiz-step-card{display:none}.quiz-stepper-ready .quiz-step-card.is-active{display:block}.quiz-step-badges{display:flex;gap:8px;align-items:center;justify-content:center}.quiz-step-number,.quiz-step-indicator{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:.77rem;font-weight:900}.quiz-step-number{color:#6445c0;background:#eee9ff}.quiz-step-indicator{color:#216947;background:#e5f8ee}.quiz-step-card h2{max-width:820px;margin:18px auto 22px;text-align:center;color:#30254d;font-size:clamp(1.35rem,3vw,2rem);line-height:1.45}.quiz-player-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quiz-player-option{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 38px;gap:10px;align-items:center;min-height:78px;padding:12px 14px;border:3px solid transparent;border-radius:16px;color:#fff;cursor:pointer;box-shadow:0 10px 22px rgba(29,20,55,.1);transition:.14s ease}.quiz-player-option.answer-red{background:var(--quiz-red)}.quiz-player-option.answer-blue{background:var(--quiz-blue)}.quiz-player-option.answer-yellow{background:var(--quiz-yellow)}.quiz-player-option.answer-green{background:var(--quiz-green)}.quiz-player-option:hover{filter:brightness(1.03);transform:translateY(-1px)}.quiz-player-option.is-selected{border-color:#fff;box-shadow:0 0 0 4px rgba(112,71,235,.16),0 14px 28px rgba(35,20,74,.17)}.quiz-player-option input{position:absolute;opacity:0;width:1px;height:1px}.quiz-player-shape{display:grid;place-items:center;font-size:1.5rem}.quiz-player-option-text{font-weight:850;line-height:1.35}.quiz-player-selected{display:grid;place-items:center;width:32px;height:32px;border:2px solid rgba(255,255,255,.58);border-radius:50%;color:transparent;font-weight:900}.quiz-player-option.is-selected .quiz-player-selected{color:#337a56;background:#fff;border-color:#fff}.quiz-player-controls{position:sticky;bottom:10px;z-index:12;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:14px;padding:11px;border:1px solid rgba(112,71,235,.14);border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 13px 34px rgba(49,32,96,.15);backdrop-filter:blur(12px)}.quiz-player-control-hint{text-align:center;color:#857e90;font-size:.82rem}.quiz-player-controls .btn{min-width:130px}

@media (max-width:980px){
    .student-quiz-filter-card{grid-template-columns:1fr}.student-quiz-filter-copy{display:none}.student-quiz-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.student-home-quiz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .quiz-start-grid{grid-template-columns:1fr}.quiz-start-card{max-width:620px;width:100%;justify-self:center}
    .quiz-studio-toolbar{position:static;align-items:flex-start;flex-direction:column}.studio-toolbar-fields{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.studio-toolbar-fields select{width:100%;min-width:0}
    .bulk-studio-topbar{position:static}
}
@media (max-width:720px){
    .student-quiz-hero{padding:52px 0 76px}.student-quiz-hero-inner{grid-template-columns:1fr}.student-code-mini{justify-self:start}.student-quiz-card-grid{grid-template-columns:1fr}.student-quiz-search{display:grid;grid-template-columns:minmax(0,1fr) auto}.student-home-quiz-grid{grid-template-columns:1fr 1fr}
    .quiz-start-shell{padding:35px 0 55px}.quiz-start-facts{grid-template-columns:1fr}.quiz-start-card{padding:21px;border-radius:25px 25px 25px 9px}
    .quiz-studio-container{width:min(100% - 20px,1220px)}.quiz-studio-canvas{padding:16px;border-radius:24px 24px 24px 9px}.studio-media-zone{grid-template-columns:1fr}.studio-media-preview{justify-content:flex-start}.studio-media-preview .question-image-preview{max-width:100%;max-height:180px}.studio-answer-grid,.studio-answer-grid-tf{grid-template-columns:1fr}.studio-answer-tile{min-height:70px;grid-template-columns:38px minmax(0,1fr) 38px;padding:9px}.studio-section-title{align-items:flex-start;flex-direction:column}.studio-section-title small{font-size:.78rem}.studio-save-bar{align-items:stretch;flex-direction:column}.studio-save-button{width:100%}
    .bulk-studio-topbar{align-items:stretch;flex-direction:column}.bulk-studio-add-controls{display:grid;grid-template-columns:80px 1fr}.bulk-studio-add-controls .btn:last-child{grid-column:1/-1}.bulk-studio-toolbar-fields{grid-template-columns:1fr}.bulk-studio-media-row{align-items:flex-start;flex-wrap:wrap}.bulk-answer-grid{grid-template-columns:1fr}
    .ai-edit-options{grid-template-columns:1fr}.ai-edit-options>label:first-child{grid-column:auto}
    .quiz-player-shell{padding-top:14px}.quiz-player-topbar{padding:11px 13px}.quiz-player-title strong{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quiz-step-stack{min-height:0}.quiz-step-card{padding:17px;border-radius:24px 24px 24px 9px}.quiz-player-options{grid-template-columns:1fr}.quiz-player-option{min-height:68px}.quiz-player-controls{grid-template-columns:1fr 1fr}.quiz-player-control-hint{display:none}.quiz-player-controls .btn{min-width:0;width:100%}
}
@media (max-width:430px){
    .student-home-quiz-grid{grid-template-columns:1fr}.student-quiz-search{grid-template-columns:1fr}.student-quiz-search .btn{width:100%}.student-code-mini strong{font-size:1.45rem}.student-quiz-meta{grid-template-columns:repeat(3,1fr)}
    .studio-toolbar-fields{grid-template-columns:1fr}.quiz-studio-tip{grid-template-columns:38px minmax(0,1fr);padding:12px}.quiz-studio-tip-icon{width:38px;height:38px}.studio-question-input{min-height:105px;padding:14px!important;font-size:1.08rem!important}.answer-text-input{font-size:.9rem}.bulk-studio-add-controls{grid-template-columns:1fr}.bulk-studio-add-controls .btn:last-child{grid-column:auto}.bulk-count-input{width:100%!important}
    .quiz-player-title strong{max-width:160px}.quiz-progress-text span:last-child{display:none}.quiz-player-option{grid-template-columns:34px minmax(0,1fr) 30px;padding:9px 10px}.quiz-player-shape{font-size:1.15rem}.quiz-player-selected{width:28px;height:28px}
}
.portal-teacher-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;color:#7047eb;background:#fff;font-size:1.15rem;font-weight:950;box-shadow:0 10px 24px rgba(29,14,66,.16)}

/* =========================================================
   Digitera V4.1 — pilih kelas dulu + tampilan quiz lebih modern
   ========================================================= */
.page-student-quizzes {
    background: #f6f4fb;
    color: #2f2940;
}
.page-student-quizzes main {
    background:
        radial-gradient(circle at 8% 36%, rgba(121, 85, 235, .07), transparent 22rem),
        radial-gradient(circle at 94% 66%, rgba(62, 177, 238, .06), transparent 24rem),
        #f7f5fc;
}
.page-student-quizzes .student-quiz-hero {
    padding: 66px 0 84px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 14%, rgba(255,255,255,.18), transparent 22%),
        radial-gradient(circle at 12% 92%, rgba(81,219,255,.17), transparent 28%),
        linear-gradient(135deg,#4324b4 0%,#7047eb 48%,#9252ea 100%);
}
.page-student-quizzes .student-quiz-hero::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -130px;
    top: -150px;
    border-radius: 42% 58% 60% 40% / 46% 40% 60% 54%;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.045);
    transform: rotate(18deg);
}
.page-student-quizzes .student-quiz-hero::after {
    height: 115px;
    bottom: -57px;
    background: #f7f5fc;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.page-student-quizzes .student-quiz-hero-copy,
.page-student-quizzes .student-code-mini {
    position: relative;
    z-index: 2;
}
.page-student-quizzes .student-quiz-hero h1 {
    color: #fff;
    text-shadow: 0 2px 18px rgba(36,17,86,.18);
}
.page-student-quizzes .student-quiz-hero .lead {
    color: rgba(255,255,255,.88);
    line-height: 1.72;
}
.page-student-quizzes .student-code-mini {
    color: #fff;
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.12);
    box-shadow: 0 24px 55px rgba(36,17,86,.24);
}
.page-student-quizzes .student-code-mini strong { color: #fff; }
.page-student-quizzes .student-code-mini span,
.page-student-quizzes .student-code-mini small { color: rgba(255,255,255,.78); }

.page-student-quizzes .student-quiz-section {
    position: relative;
    z-index: 2;
    min-height: 520px;
    padding: 34px 0 78px;
    background: transparent;
}

/* Pilihan kelas */
.class-picker-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 24px;
    padding: 4px 2px;
}
.class-picker-head h2,
.modern-list-head h2 {
    margin: 7px 0 5px;
    color: #2c2342;
    font-size: clamp(1.65rem,3vw,2.25rem);
    letter-spacing: -.025em;
}
.class-picker-head p,
.modern-list-head p {
    margin: 0;
    color: #6f687b;
    line-height: 1.6;
}
.class-picker-summary {
    flex: 0 0 auto;
    min-width: 118px;
    padding: 14px 18px;
    border: 1px solid rgba(112,71,235,.12);
    border-radius: 22px 22px 22px 8px;
    color: #5f43bd;
    background: #fff;
    box-shadow: 0 12px 30px rgba(49,32,96,.07);
    text-align: center;
}
.class-picker-summary strong,
.class-picker-summary span { display: block; }
.class-picker-summary strong { color: #5637ba; font-size: 1.65rem; line-height: 1; }
.class-picker-summary span { margin-top: 5px; color: #777084; font-size: .78rem; font-weight: 800; }

.student-class-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}
.student-class-card {
    --class-accent: #7047eb;
    --class-soft: #f0ebff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 245px;
    padding: 22px;
    border: 1px solid rgba(76,58,120,.11);
    border-radius: 30px 30px 30px 11px;
    color: #30283f !important;
    background: linear-gradient(150deg,#ffffff 0%,#ffffff 66%,var(--class-soft) 132%);
    box-shadow: 0 16px 38px rgba(53,37,102,.085);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.student-class-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 145px;
    height: 145px;
    right: -48px;
    top: -50px;
    border-radius: 44% 56% 65% 35% / 58% 42% 58% 42%;
    background: var(--class-soft);
    transform: rotate(18deg);
}
.student-class-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -55px;
    bottom: -82px;
    width: 150px;
    height: 130px;
    border-radius: 58% 42% 0 0 / 100% 100% 0 0;
    background: color-mix(in srgb, var(--class-soft) 72%, white);
    transform: rotate(-13deg);
}
.student-class-card:hover {
    color: #30283f !important;
    transform: translateY(-5px);
    border-color: color-mix(in srgb,var(--class-accent) 30%,#fff);
    box-shadow: 0 24px 50px rgba(53,37,102,.14);
}
.student-class-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 19px 19px 19px 7px;
    color: #fff;
    background: var(--class-accent);
    box-shadow: 0 12px 25px color-mix(in srgb,var(--class-accent) 25%,transparent);
}
.student-class-icon svg,
.empty-state-icon svg,
.student-quiz-search-field svg {
    display: block;
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.student-class-card-body { margin-top: 22px; }
.student-class-kicker {
    display: block;
    color: var(--class-accent);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.student-class-card h3 {
    margin: 4px 0 8px;
    color: #2d2540;
    font-size: 1.38rem;
    letter-spacing: -.02em;
}
.student-class-card p {
    margin: 0;
    color: #756e80;
    font-size: .88rem;
    line-height: 1.55;
}
.student-class-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
    color: #6e6679;
    font-size: .84rem;
    font-weight: 800;
}
.student-class-card-foot strong { color: #3c3157; }
.student-class-arrow {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    color: #fff;
    background: var(--class-accent);
    font-size: 1.05rem;
    box-shadow: 0 9px 20px color-mix(in srgb,var(--class-accent) 22%,transparent);
}
.class-tone-1 { --class-accent:#7047eb; --class-soft:#eee9ff; }
.class-tone-2 { --class-accent:#2477d9; --class-soft:#e8f2ff; }
.class-tone-3 { --class-accent:#15956f; --class-soft:#e5f8f1; }
.class-tone-4 { --class-accent:#d37a24; --class-soft:#fff0df; }
.class-tone-5 { --class-accent:#ce4d6b; --class-soft:#ffeaf0; }
.class-tone-6 { --class-accent:#7c55ad; --class-soft:#f2eaff; }

.class-picker-help {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 13px;
    align-items: start;
    margin-top: 22px;
    padding: 15px 17px;
    border: 1px solid #ddd5f3;
    border-radius: 20px 20px 20px 8px;
    color: #5d5669;
    background: rgba(255,255,255,.82);
    box-shadow: 0 10px 26px rgba(53,37,102,.05);
}
.class-picker-help-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg,#7047eb,#9a59ed);
    font-weight: 900;
}
.class-picker-help strong { display:block; color:#3c3351; }
.class-picker-help p { margin:3px 0 0; color:#746d80; font-size:.87rem; line-height:1.55; }

/* Setelah kelas dipilih */
.selected-class-toolbar {
    display: grid;
    grid-template-columns: minmax(220px,.45fr) minmax(0,1fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 28px;
    padding: 14px;
    border: 1px solid rgba(112,71,235,.11);
    border-radius: 26px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 14px 34px rgba(53,37,102,.075);
    backdrop-filter: blur(12px);
}
.selected-class-back {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 11px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 16px;
    color: #49366f !important;
    background: #f4f0ff;
}
.selected-class-back > span:first-child {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: #fff;
    background: #7047eb;
    font-weight: 900;
}
.selected-class-back small,
.selected-class-back strong { display:block; }
.selected-class-back small { color:#80778e; font-size:.73rem; }
.selected-class-back strong { margin-top:2px; color:#49366f; }
.student-quiz-search {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 9px;
}
.student-quiz-search-field {
    display: grid;
    grid-template-columns: 22px minmax(0,1fr);
    gap: 9px;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #ddd7ed;
    border-radius: 15px;
    color: #80778e;
    background: #fff;
}
.student-quiz-search-field:focus-within {
    border-color: #8a69e6;
    box-shadow: 0 0 0 4px rgba(112,71,235,.10);
}
.student-quiz-search-field svg { width:20px;height:20px; }
.student-quiz-search-field input {
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0 !important;
    outline: 0 !important;
    color: #342b48;
    background: transparent !important;
    box-shadow: none !important;
}
.student-quiz-search-field input::placeholder { color:#9a93a5; }
.modern-list-head { align-items:center; }
.quiz-count-pill {
    color: #5539ad;
    background: #ebe5ff;
    border: 1px solid #dcd2fb;
}

/* Kartu quiz dengan kontras teks lebih kuat */
.page-student-quizzes .student-quiz-card {
    min-height: 320px;
    border-color: rgba(89,66,151,.12);
    background: linear-gradient(155deg,#fff 0%,#fff 70%,#f2edff 125%);
    box-shadow: 0 16px 38px rgba(48,31,94,.08);
}
.page-student-quizzes .student-quiz-card h3 { color:#2d2540; }
.page-student-quizzes .student-quiz-card p { color:#716a7c; line-height:1.55; }
.page-student-quizzes .quiz-card-subject { color:#6846c6; }
.page-student-quizzes .student-quiz-meta span {
    color: #6f687a;
    background: #f4f1fb;
}
.page-student-quizzes .student-quiz-meta b { color:#392e55; }
.page-student-quizzes .student-quiz-start {
    min-height: 48px;
    color: #fff !important;
    background: linear-gradient(135deg,#6440d6,#8b50e8);
}
.student-quiz-start-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(255,255,255,.16);
}
.modern-empty-state {
    max-width: 680px;
    margin: 0 auto;
    padding: 38px 28px;
    text-align: center;
    border: 1px solid rgba(112,71,235,.12);
    border-radius: 32px 32px 32px 12px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(53,37,102,.08);
}
.modern-empty-state h2,
.modern-empty-state h3 { color:#322847; }
.modern-empty-state p { color:#746d80; }
.empty-state-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 21px 21px 21px 8px;
    color:#fff;
    background:linear-gradient(135deg,#7047eb,#a25cef);
    box-shadow:0 12px 28px rgba(112,71,235,.23);
}
.empty-state-icon svg { width:29px;height:29px; }

@media (max-width: 940px) {
    .student-class-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .selected-class-toolbar { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .page-student-quizzes .student-quiz-hero { padding: 45px 0 74px; }
    .page-student-quizzes .student-quiz-hero h1 { font-size: clamp(2rem,9vw,3rem); }
    .page-student-quizzes .student-code-mini { width: 100%; padding: 17px; border-radius: 22px 22px 22px 8px; }
    .class-picker-head { align-items:flex-start; }
    .class-picker-summary { min-width:100px; padding:12px 14px; }
    .student-class-card { min-height: 220px; padding:19px; border-radius:25px 25px 25px 9px; }
    .student-class-icon { width:52px;height:52px;border-radius:17px 17px 17px 6px; }
    .student-class-card-body { margin-top:18px; }
    .selected-class-toolbar { padding:11px; border-radius:22px; }
    .student-quiz-search { grid-template-columns: minmax(0,1fr) auto; }
}
@media (max-width: 540px) {
    .page-student-quizzes .student-quiz-section { padding-top: 25px; }
    .class-picker-head { display:block; }
    .class-picker-summary { display:inline-block; margin-top:14px; min-width:0; text-align:left; }
    .class-picker-summary strong,.class-picker-summary span { display:inline; }
    .class-picker-summary span { margin-left:5px; }
    .student-class-grid { grid-template-columns: 1fr 1fr; gap:12px; }
    .student-class-card { min-height:190px; padding:15px; border-radius:22px 22px 22px 8px; }
    .student-class-icon { width:44px;height:44px;border-radius:14px 14px 14px 5px; }
    .student-class-icon svg { width:21px;height:21px; }
    .student-class-card-body { margin-top:14px; }
    .student-class-card h3 { font-size:1.08rem; }
    .student-class-card p { font-size:.76rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .student-class-card-foot { padding-top:13px; font-size:.76rem; }
    .student-class-arrow { width:32px;height:32px;border-radius:11px; }
    .class-picker-help { grid-template-columns:36px minmax(0,1fr); padding:13px; }
    .class-picker-help-icon { width:36px;height:36px;border-radius:12px; }
    .selected-class-back { grid-template-columns:38px minmax(0,1fr); }
    .selected-class-back > span:first-child { width:38px;height:38px; }
    .student-quiz-search { grid-template-columns:1fr; }
    .student-quiz-search .btn { width:100%; }
    .modern-list-head { align-items:flex-start; }
}
@media (max-width: 355px) {
    .student-class-grid { grid-template-columns: 1fr; }
    .student-class-card { min-height:180px; }
}


/* Digitera V4.3 — pilihan jenis kelamin guru */
.gender-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}.gender-choice{position:relative;display:block;cursor:pointer}.gender-choice input{position:absolute;opacity:0;pointer-events:none}.gender-choice-content{display:flex;flex-direction:column;gap:4px;min-height:78px;padding:16px 18px;border:2px solid #e5e1f7;border-radius:20px;background:linear-gradient(145deg,#fff,#f8f6ff);color:#24164f;box-shadow:0 8px 22px rgba(76,48,145,.07);transition:.2s ease}.gender-choice-content strong{font-size:1rem;color:#24164f}.gender-choice-content small{color:#71668a}.gender-choice:hover .gender-choice-content{border-color:#b7a4ff;transform:translateY(-1px)}.gender-choice input:checked+.gender-choice-content{border-color:#7047eb;background:linear-gradient(145deg,#f2edff,#fff);box-shadow:0 0 0 4px rgba(112,71,235,.12),0 10px 25px rgba(76,48,145,.12)}.gender-choice input:focus-visible+.gender-choice-content{outline:3px solid rgba(112,71,235,.25);outline-offset:2px}@media(max-width:520px){.gender-choice-grid{grid-template-columns:1fr}.gender-choice-content{min-height:70px}}

.teacher-gender-admin-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;border:1px solid #e6e0fb;border-radius:16px;background:#faf9ff}.teacher-gender-admin-form label{font-size:.82rem;font-weight:700;color:#4c3d70}.teacher-gender-admin-form select{min-width:180px;margin:0}@media(max-width:560px){.teacher-gender-admin-form>*{width:100%}.teacher-gender-admin-form select{min-width:0}}

/* =============================================================
   Digitera V4.4 — dropdown gender + teacher profile photo
   ============================================================= */
.registration-profile-upload{
    display:grid;
    grid-template-columns:86px minmax(0,1fr);
    gap:16px;
    align-items:center;
    margin:0 0 22px;
    padding:15px;
    border:1px solid #e8e2fb;
    border-radius:24px;
    background:linear-gradient(135deg,#fbfaff 0%,#f4f0ff 100%);
}
.profile-upload-preview,
.teacher-profile-avatar,
.teacher-public-photo{
    overflow:hidden;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    color:#fff;
    background:linear-gradient(145deg,#7047eb,#a55bed);
    box-shadow:0 12px 28px rgba(72,43,146,.18);
}
.profile-upload-preview{
    width:76px;
    height:76px;
    border:4px solid #fff;
    border-radius:25px;
    font-size:1.25rem;
    font-weight:900;
}
.profile-upload-preview img,
.teacher-profile-avatar img,
.teacher-public-photo img,
.teacher-admin-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.profile-upload-copy label{
    display:block;
    margin-bottom:4px;
    color:#34255c;
    font-weight:850;
}
.profile-upload-copy p{
    margin:0 0 10px;
    color:#716983;
    font-size:.88rem;
}
.profile-upload-copy small{
    display:block;
    margin-top:6px;
    color:#8a8297;
    font-size:.76rem;
}
.profile-upload-copy input[type="file"]{
    padding:9px;
    border:1px dashed #cfc2f5;
    border-radius:13px;
    background:#fff;
}
.registration-form-card select#teacher-gender{
    min-height:48px;
    padding:11px 42px 11px 13px;
    border:1px solid #ddd5f4;
    border-radius:14px;
    color:#342d41;
    background-color:#fff;
    font-weight:650;
}
.registration-form-card select#teacher-gender:focus{
    border-color:#8667ee;
    box-shadow:0 0 0 4px rgba(112,71,235,.11);
}

.teacher-dashboard-welcome{
    align-items:center;
}
.teacher-welcome-identity{
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0;
}
.teacher-profile-avatar{
    width:72px;
    height:72px;
    border:4px solid #fff;
    border-radius:24px;
    text-decoration:none;
    font-size:1.2rem;
    font-weight:950;
}
.teacher-profile-avatar-lg{
    width:92px;
    height:92px;
    border-radius:30px;
}
.teacher-profile-avatar-xl{
    width:150px;
    height:150px;
    margin:0 auto 18px;
    border-radius:44px;
    font-size:2rem;
}
.teacher-profile-link{
    display:inline-flex;
    margin-top:7px;
    color:#6f4de3;
    font-size:.86rem;
    font-weight:800;
    text-decoration:none;
}
.teacher-profile-link:hover{text-decoration:underline}

.teacher-public-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
.teacher-public-photo{
    width:108px;
    height:108px;
    margin-bottom:14px;
    border:5px solid rgba(255,255,255,.9);
    border-radius:34px;
    font-size:1.8rem;
    font-weight:950;
    box-shadow:0 18px 36px rgba(30,14,70,.24);
}
.teacher-public-label{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    color:#efeaff;
    background:rgba(255,255,255,.12);
    font-size:.72rem;
    font-weight:850;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.teacher-public-card h2{margin:10px 0 4px!important;color:#fff}
.teacher-public-card p{margin:0 0 15px;color:rgba(255,255,255,.78)}

.teacher-profile-page{padding-top:34px}
.teacher-profile-layout{
    display:grid;
    grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
    gap:20px;
    align-items:start;
}
.teacher-profile-preview-card,
.teacher-profile-form-card{
    padding:28px;
    border-radius:30px;
}
.teacher-profile-preview-card{
    text-align:center;
    background:linear-gradient(160deg,#fff,#f8f5ff);
}
.teacher-profile-preview-card h2{margin:0;color:#34235e}
.teacher-profile-preview-card>p{margin:6px 0 16px;color:#766e86}
.teacher-profile-meta{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
}
.teacher-profile-meta span{
    padding:7px 10px;
    border-radius:999px;
    color:#615477;
    background:#eee9ff;
    font-size:.78rem;
    font-weight:750;
}
.teacher-profile-form-card h2{margin:8px 0 6px;color:#33265a}
.profile-remove-form{margin-top:10px}

.teacher-admin-avatar{
    overflow:hidden;
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    border-radius:18px;
    background:linear-gradient(145deg,#7047eb,#a55bed);
    color:#fff;
    font-size:.9rem;
    font-weight:900;
}
.teacher-admin-avatar span{color:#fff}

@media(max-width:820px){
    .teacher-dashboard-welcome{align-items:flex-start}
    .teacher-welcome-identity{align-items:flex-start}
    .teacher-profile-avatar-lg{width:76px;height:76px;border-radius:24px}
    .teacher-profile-layout{grid-template-columns:1fr}
    .teacher-profile-preview-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;text-align:left;align-items:center}
    .teacher-profile-preview-card .teacher-profile-avatar-xl{grid-row:1/5;width:104px;height:104px;margin:0;border-radius:30px}
    .teacher-profile-preview-card h2,.teacher-profile-preview-card>p{align-self:end}
    .teacher-profile-preview-card>p{align-self:start;margin:3px 0 8px}
    .teacher-profile-meta{justify-content:flex-start}
}
@media(max-width:560px){
    .registration-profile-upload{grid-template-columns:68px minmax(0,1fr);padding:12px;border-radius:20px}
    .profile-upload-preview{width:62px;height:62px;border-radius:20px}
    .profile-upload-copy p{display:none}
    .teacher-welcome-identity{gap:12px}
    .teacher-profile-avatar-lg{width:62px;height:62px;border-radius:20px}
    .teacher-welcome-identity h1{font-size:clamp(1.55rem,7vw,2.15rem)}
    .teacher-profile-preview-card{grid-template-columns:1fr;text-align:center}
    .teacher-profile-preview-card .teacher-profile-avatar-xl{grid-row:auto;width:116px;height:116px;margin:0 auto 12px}
    .teacher-profile-meta{justify-content:center}
    .teacher-public-photo{width:92px;height:92px;border-radius:28px}
}
.student-code-mini-profile{display:flex!important;align-items:center;gap:12px;text-align:left!important}.student-code-mini-profile>div:last-child{min-width:0}.student-mini-teacher-photo{overflow:hidden;display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;border:3px solid rgba(255,255,255,.72);border-radius:19px;color:#7047eb;background:#fff;font-size:.9rem;font-weight:950;box-shadow:0 9px 22px rgba(28,13,65,.15)}.student-mini-teacher-photo img{width:100%;height:100%;object-fit:cover;display:block}.student-code-mini-profile span,.student-code-mini-profile strong,.student-code-mini-profile small{display:block}
@media(max-width:520px){.student-mini-teacher-photo{flex-basis:50px;width:50px;height:50px;border-radius:16px}}

/* Digitera v4.6 — multi mata pelajaran */
.dashboard-subject-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:18px 0 20px;padding:24px 26px;border-radius:30px;background:linear-gradient(145deg,#fff,#f6f1ff);border:1px solid #e7defd}.dashboard-subject-banner h2{margin:6px 0;color:#34235e}.dashboard-subject-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.subject-chip,.subject-chip-more,.subject-empty-chip{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;font-size:.78rem;font-weight:850}.subject-chip{color:#4d347e;background:#eee7ff}.subject-chip-more,.subject-empty-chip{color:#706684;background:#f1eff5}
.subject-manager-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:22px;align-items:start}.subject-form-card{position:sticky;top:88px;padding:26px;border-radius:30px}.subject-list-panel{min-width:0}.subject-summary-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.subject-summary-bar>div{padding:18px 20px;border-radius:24px;background:#fff;border:1px solid #e9e2fb;box-shadow:0 10px 28px rgba(76,48,136,.07)}.subject-summary-bar strong{display:block;color:#432a78;font-size:1.7rem}.subject-summary-bar span{color:#766d86;font-size:.82rem}.teacher-subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.teacher-subject-card{position:relative;overflow:hidden;padding:22px;border-radius:28px;background:#fff;border:1px solid #e8e1fa;box-shadow:0 14px 34px rgba(58,36,111,.08)}.teacher-subject-card:before,.student-subject-card:before,.subject-hub-hero:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-64px;top:-70px;background:var(--subject-soft,#eee7ff);opacity:.9}.teacher-subject-card.is-inactive{opacity:.72;filter:saturate(.55)}.teacher-subject-card-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}.subject-book-icon,.student-subject-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:17px;background:var(--subject-bg,#7047eb);color:#fff;box-shadow:0 10px 22px color-mix(in srgb,var(--subject-bg,#7047eb) 24%,transparent)}.subject-book-icon svg,.student-subject-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.teacher-subject-card h3{position:relative;z-index:1;margin:18px 0 7px;color:#34235e}.teacher-subject-card p{position:relative;z-index:1;min-height:42px;color:#756c84}.subject-content-counts{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.subject-content-counts span{padding:6px 9px;border-radius:10px;background:#f5f1fb;color:#615477;font-size:.74rem;font-weight:750}.subject-color-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.subject-color-choice{display:flex;align-items:center;gap:7px;padding:9px;border:1px solid #e7e0f6;border-radius:14px;cursor:pointer}.subject-color-choice input{width:auto;margin:0}.subject-color-choice>span{width:18px;height:18px;border-radius:6px;background:var(--subject-bg,#7047eb)}.subject-color-choice small{font-size:.72rem;color:#5d536f}
.subject-tone-purple,.tone-purple{--subject-bg:#7047eb;--subject-soft:#eee7ff}.subject-tone-blue,.tone-blue{--subject-bg:#3c72e8;--subject-soft:#e9f0ff}.subject-tone-green,.tone-green{--subject-bg:#1fa06c;--subject-soft:#e4f7ef}.subject-tone-orange,.tone-orange{--subject-bg:#f08a36;--subject-soft:#fff0df}.subject-tone-pink,.tone-pink{--subject-bg:#db5e9c;--subject-soft:#ffeaf5}.subject-tone-teal,.tone-teal{--subject-bg:#1596a6;--subject-soft:#e5f7fa}
.student-subject-section{background:linear-gradient(180deg,#fbf9ff,#f7f3ff)}.subject-total-pill{padding:8px 12px;border-radius:999px;background:#eee8ff;color:#5e40b3;font-size:.8rem;font-weight:850}.student-subject-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.student-subject-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:250px;padding:22px;border-radius:30px;background:#fff;border:1px solid #e9e1fb;box-shadow:0 16px 34px rgba(61,39,113,.09);text-decoration:none;transition:.2s ease}.student-subject-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(61,39,113,.14)}.student-subject-card>*{position:relative;z-index:1}.student-subject-card small{display:block;margin:15px 0 4px;color:#817793;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.68rem}.student-subject-card h3{margin:0 0 7px;color:#322159;font-size:1.25rem}.student-subject-card p{margin:0;color:#746a83;font-size:.88rem;line-height:1.5}.student-subject-counts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px}.student-subject-counts span{padding:7px 9px;border-radius:12px;background:var(--subject-soft,#eee7ff);color:#584d6d;font-size:.73rem}.student-subject-counts strong{color:var(--subject-bg,#7047eb);font-size:1rem}.student-subject-open{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:13px;border-top:1px solid #eee9f6;color:var(--subject-bg,#7047eb);font-weight:850}.quiz-subject-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.subject-mini-label{display:inline-flex;width:max-content;margin:2px 0 10px;padding:6px 9px;border-radius:999px;background:#eee8ff;color:#6245b8;font-size:.72rem;font-weight:850}
.subject-hub-hero{position:relative;overflow:hidden;padding:44px 0;background:linear-gradient(140deg,var(--subject-bg,#7047eb),color-mix(in srgb,var(--subject-bg,#7047eb) 72%,#2d155d));color:#fff}.subject-hub-hero:before{width:340px;height:340px;right:-90px;top:-150px;background:rgba(255,255,255,.12)}.subject-hub-back{position:relative;z-index:1;display:inline-flex;margin-bottom:22px;color:#fff;text-decoration:none;font-weight:800}.subject-hub-title{position:relative;z-index:1;display:flex;align-items:center;gap:20px}.subject-hub-title .student-subject-icon{background:#fff;color:var(--subject-bg,#7047eb);width:68px;height:68px;border-radius:22px}.subject-hub-title h1{margin:4px 0;color:#fff}.subject-hub-title p{margin:0;color:rgba(255,255,255,.82)}.subject-hub-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:34px}.subject-hub-actions a{display:flex;flex-direction:column;align-items:center;padding:17px 10px;border-radius:22px;background:#fff;border:1px solid #e8e1f8;text-decoration:none;box-shadow:0 10px 25px rgba(62,39,113,.07)}.subject-hub-actions strong{font-size:1.45rem;color:#5f3fc2}.subject-hub-actions span{font-size:.78rem;color:#746a84}.subject-section-gap{margin-top:40px}.subject-material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.subject-material-card{padding:22px;border-radius:25px;background:#fff;border:1px solid #e8e1f8;text-decoration:none}.subject-material-card strong{font-size:1.8rem;color:#7047eb}.subject-material-card h3{margin:8px 0 5px;color:#372660}.subject-material-card p{margin:0;color:#776d86}.public-subject-filter{display:flex;gap:8px;overflow:auto;padding:4px 0 10px;scrollbar-width:thin}.public-subject-filter a{flex:0 0 auto;padding:8px 12px;border-radius:999px;background:#f0ebfb;color:#66597a;text-decoration:none;font-size:.78rem;font-weight:800}.public-subject-filter a.active{background:#7047eb;color:#fff}.profile-subject-summary{display:flex;flex-direction:column;gap:4px;margin-top:16px;padding-top:14px;border-top:1px solid #eee8f8}.profile-subject-summary strong{color:#4f367f}.profile-subject-summary a{font-size:.8rem;text-decoration:none;color:#7047eb;font-weight:800}
@media(max-width:960px){.student-subject-grid,.quiz-subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.subject-manager-layout{grid-template-columns:1fr}.subject-form-card{position:static}.subject-hub-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.dashboard-subject-banner{align-items:flex-start;flex-direction:column;padding:20px;border-radius:24px}.teacher-subject-grid{grid-template-columns:1fr}.student-subject-grid,.quiz-subject-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.student-subject-card{min-height:220px;padding:16px;border-radius:23px}.student-subject-icon{width:42px;height:42px;border-radius:14px}.student-subject-card h3{font-size:1.02rem}.student-subject-card p{font-size:.78rem}.student-subject-counts{gap:5px}.student-subject-counts span{font-size:.67rem}.subject-hub-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.subject-material-grid{grid-template-columns:1fr}.subject-hub-title{align-items:flex-start}.subject-hub-title .student-subject-icon{width:56px;height:56px;flex:0 0 56px}.subject-color-picker{grid-template-columns:repeat(2,1fr)}}
@media(max-width:390px){.student-subject-grid,.quiz-subject-grid{grid-template-columns:1fr}.student-subject-card{min-height:auto}.subject-summary-bar{grid-template-columns:1fr}}

/* =============================================================
   Digitera V4.6.3 — logo baru + perbaikan kontras teks
   ============================================================= */

/* Logo resmi Digitera pada header/footer. */
.brand-mark.brand-mark-logo {
    overflow: hidden;
    padding: 2px;
    color: transparent;
    background: #fff;
    border: 1px solid rgba(112, 71, 235, .16);
    box-shadow: 0 9px 24px rgba(78, 49, 155, .18);
}
.brand-mark.brand-mark-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(100% - 2px);
}
.footer .brand-mark.brand-mark-logo {
    background: #fff;
}

/* Warna kartu gradient dibuat lebih gelap agar teks putih terbaca. */
:root {
    --purple-gradient: linear-gradient(135deg, #7047eb 0%, #8a58dc 100%);
    --purple-gradient-dark: linear-gradient(135deg, #5530c9 0%, #7447d1 100%);
    --green-gradient: linear-gradient(135deg, #14805d 0%, #116f51 100%);
    --orange-gradient: linear-gradient(135deg, #bd4a1a 0%, #9f3717 100%);
    --red-gradient: linear-gradient(135deg, #c93e58 0%, #a9334a 100%);
    --blue-gradient: linear-gradient(135deg, #346fc7 0%, #4e59c8 100%);
}

/* Hero siswa: jangan biarkan aturan heading global mengubah teks menjadi gelap. */
.student-hero {
    color: #fff;
    background:
        radial-gradient(circle at 88% 22%, rgba(255, 255, 255, .16), transparent 16rem),
        radial-gradient(circle at 8% 90%, rgba(36, 223, 166, .13), transparent 19rem),
        linear-gradient(135deg, #5b34c9 0%, #7645d8 58%, #7f4bd4 100%);
}
.student-hero h1,
.student-hero h2,
.student-hero h3,
.student-hero h4 {
    color: #fff !important;
    text-shadow: 0 3px 18px rgba(35, 16, 82, .26);
}
.student-hero .lead,
.student-hero > .container > div > p {
    color: rgba(255, 255, 255, .94) !important;
}
.student-hero .eyebrow.light {
    color: #fff !important;
    background: rgba(44, 20, 105, .34);
    border-color: rgba(255, 255, 255, .46);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.student-hero .btn-outline-light {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .62);
    background: rgba(41, 18, 100, .22);
}
.student-hero .btn-outline-light:hover,
.student-hero .btn-outline-light:focus-visible {
    color: var(--primary-dark) !important;
    border-color: #fff;
    background: #fff;
}

/* Kartu identitas guru pada portal siswa. */
.teacher-public-card {
    color: #fff;
    background: rgba(49, 23, 111, .25);
    border-color: rgba(255,255,255,.34);
}
.teacher-public-label {
    color: #fff !important;
    background: rgba(48, 22, 108, .42);
    border: 1px solid rgba(255, 255, 255, .30);
}
.teacher-public-card h2,
.teacher-public-card p,
.teacher-public-school {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(35, 16, 82, .28);
}
.teacher-public-card p { opacity: 1; }
.teacher-public-school {
    display: block;
    margin: -7px 0 15px;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.45;
}
.teacher-public-card .code-pill.large {
    color: #4f2daf !important;
    text-shadow: none;
    background: #fff;
}

/* Komponen lain dengan latar gelap/gradient juga memakai teks terang secara eksplisit. */
.hero h1,
.hero h2,
.hero h3,
.cta-card h1,
.cta-card h2,
.cta-card h3,
.school-code-banner h1,
.school-code-banner h2,
.school-code-banner h3,
.student-quiz-hero h1,
.student-quiz-hero h2,
.quiz-start-summary h1,
.quiz-start-summary h2,
.subject-hub-hero h1,
.subject-hub-hero h2 {
    color: #fff !important;
}
.cta-card p,
.school-code-banner p,
.school-code-banner small,
.student-quiz-hero .lead,
.quiz-start-summary .lead,
.subject-hub-hero p {
    color: rgba(255, 255, 255, .92) !important;
}
.quick-card p,
.stat .muted,
.dashboard-stats .stat-label,
.student-code-mini span,
.student-code-mini small,
.quiz-start-facts span {
    color: rgba(255, 255, 255, .90) !important;
}
.quick-card h3,
.quick-card strong,
.stat strong,
.stat a,
.student-code-mini strong,
.quiz-start-facts strong {
    color: #fff !important;
}

/* Pastikan tombol primer/sukses/danger tetap putih saat hover/focus. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-success,
.btn-success:hover,
.btn-success:focus-visible,
.btn-danger,
.btn-danger:hover,
.btn-danger:focus-visible {
    color: #fff !important;
}

@media (max-width: 620px) {
    .student-hero {
        padding-top: 64px;
        padding-bottom: 64px;
    }
    .student-hero h1 {
        font-size: clamp(2.35rem, 12vw, 3.65rem);
        line-height: 1.02;
    }
    .student-hero .lead {
        line-height: 1.58;
    }
    .teacher-public-card {
        background: rgba(49, 23, 111, .30);
    }
}


/* =============================================================
   Digitera V4.6.4 — desktop navigation refinement
   Menjaga menu guru tetap rapi, satu baris, dan tidak memecah nama.
   ============================================================= */
@media (min-width: 1200px) {
    .topbar .nav-wrap {
        width: min(1320px, calc(100% - 36px));
        min-height: 72px;
        gap: 16px;
        flex-wrap: nowrap;
    }

    .topbar .brand {
        flex: 0 0 auto;
        gap: 9px;
        font-size: 1.05rem;
        white-space: nowrap;
    }
    .topbar .brand-mark {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 14px;
    }
    .topbar .brand > span:last-child {
        min-width: 0;
    }
    .topbar .brand small {
        margin-top: 3px;
        font-size: .52rem;
        line-height: 1.05;
        white-space: nowrap;
    }

    .topbar .nav {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 3px;
    }
    .topbar .nav > a:not(.btn) {
        flex: 0 0 auto;
        padding: 8px 8px;
        border-radius: 10px;
        font-size: .79rem;
        line-height: 1.15;
        white-space: nowrap;
    }
    .topbar .nav > a.active {
        box-shadow: inset 0 0 0 1px rgba(112,71,235,.04);
    }
    .topbar .nav-user {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 7px 10px;
        margin-left: 3px;
        border-radius: 11px;
        font-size: .78rem;
        line-height: 1.1;
        white-space: nowrap;
    }
    .topbar .nav > .btn {
        flex: 0 0 auto;
        min-height: 36px;
        margin-left: 3px;
        padding: 7px 12px;
        border-radius: 11px;
        font-size: .8rem;
        line-height: 1.1;
        white-space: nowrap;
    }
}

/* Laptop kecil memakai menu hamburger agar item tidak dipaksa berhimpitan. */
@media (min-width: 1200px) and (max-width: 1279px) {
    .topbar .nav-wrap { gap: 11px; }
    .topbar .brand { font-size: 1rem; }
    .topbar .brand small { display: none; }
    .topbar .nav { gap: 1px; }
    .topbar .nav > a:not(.btn) { padding-inline: 6px; font-size: .75rem; }
    .topbar .nav-user { padding-inline: 8px; font-size: .75rem; }
    .topbar .nav > .btn { padding-inline: 10px; font-size: .76rem; }
}

/* =============================================================
   Digitera V4.6.5 — Teacher Workspace Sidebar
   Dashboard guru bergaya admin modern dengan menu samping dropdown.
   ============================================================= */
:root {
    --teacher-sidebar-width: 272px;
    --teacher-topbar-height: 74px;
    --teacher-sidebar-bg: #202b3a;
    --teacher-sidebar-bg-2: #172230;
    --teacher-sidebar-text: #c7d0dc;
    --teacher-sidebar-muted: #77869a;
    --teacher-sidebar-active: #7047eb;
}

.role-teacher {
    background: #f3f6fb;
}
.role-teacher .teacher-app-shell {
    min-height: 100vh;
    background: #f3f6fb;
}
.role-teacher .teacher-app-stage {
    min-width: 0;
    min-height: 100vh;
    margin-left: var(--teacher-sidebar-width);
    transition: margin-left .24s ease;
}
.role-teacher .teacher-app-main {
    position: relative;
    min-height: calc(100vh - var(--teacher-topbar-height));
    padding: 0 0 44px;
    overflow: visible;
    background: #f3f6fb;
}
.role-teacher .teacher-app-main::before,
.role-teacher .teacher-app-main::after {
    content: none !important;
}
.role-teacher .teacher-app-main > .container {
    width: min(1280px, calc(100% - 48px));
}

.teacher-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    width: var(--teacher-sidebar-width);
    display: flex;
    flex-direction: column;
    color: var(--teacher-sidebar-text);
    background:
        radial-gradient(circle at 12% 0%, rgba(112,71,235,.16), transparent 240px),
        linear-gradient(180deg, var(--teacher-sidebar-bg) 0%, var(--teacher-sidebar-bg-2) 100%);
    border-right: 1px solid rgba(255,255,255,.04);
    box-shadow: 18px 0 45px rgba(16,24,40,.08);
    transition: transform .24s ease;
}
.teacher-sidebar-head {
    min-height: var(--teacher-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.teacher-sidebar-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff !important;
    text-decoration: none;
}
.teacher-sidebar-logo {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 2px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 9px 25px rgba(112,71,235,.25);
}
.teacher-sidebar-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.teacher-sidebar-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}
.teacher-sidebar-brand-copy strong {
    color: #fff;
    font-size: 1.14rem;
    letter-spacing: -.02em;
}
.teacher-sidebar-brand-copy small {
    margin-top: 4px;
    color: #8f9bad;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.teacher-sidebar-close {
    display: none;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #d8deea;
    background: rgba(255,255,255,.08);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.teacher-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 13px 22px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}
.teacher-side-link,
.teacher-side-group,
.teacher-side-submenu a {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 11px;
    color: var(--teacher-sidebar-text) !important;
    background: transparent;
    font: inherit;
    font-size: .87rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.teacher-side-link,
.teacher-side-group {
    padding: 10px 12px;
}
.teacher-side-link:hover,
.teacher-side-group:hover,
.teacher-side-submenu a:hover {
    color: #fff !important;
    background: rgba(255,255,255,.065);
}
.teacher-side-link.active,
.teacher-side-submenu a.active {
    color: #fff !important;
    background: linear-gradient(135deg, #6545e7, #7c54ef);
    box-shadow: 0 10px 26px rgba(74,46,177,.28);
}
.teacher-side-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: grid;
    place-items: center;
    color: currentColor;
}
.teacher-side-icon svg,
.teacher-topbar-portal svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.teacher-side-section {
    margin-top: 7px;
}
.teacher-side-group {
    color: #9eabbb !important;
}
.teacher-side-group-label {
    flex: 1 1 auto;
}
.teacher-side-chevron {
    margin-left: auto;
    color: #7e8b9d;
    font-size: 1rem;
    transform: rotate(-90deg);
    transition: transform .16s ease;
}
.teacher-side-group.is-open .teacher-side-chevron {
    transform: rotate(0deg);
}
.teacher-side-submenu {
    display: none;
    gap: 3px;
    padding: 4px 0 5px 13px;
}
.teacher-side-submenu.is-open {
    display: grid;
    animation: teacherMenuIn .16s ease-out;
}
.teacher-side-submenu a {
    min-height: 40px;
    padding: 8px 11px;
    color: #aab5c4 !important;
    font-size: .82rem;
    font-weight: 650;
}
.teacher-side-submenu a .teacher-side-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    opacity: .86;
}
.teacher-side-submenu a .teacher-side-icon svg {
    width: 17px;
    height: 17px;
}
.teacher-side-divider {
    height: 1px;
    margin: 16px 8px;
    background: rgba(255,255,255,.075);
}
.teacher-sidebar-user {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 34px;
    align-items: center;
    gap: 10px;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(7,14,22,.18);
}
.teacher-side-avatar,
.teacher-topbar-avatar {
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #fff !important;
    background: linear-gradient(145deg, #7047eb, #a55bed);
    font-weight: 900;
    text-decoration: none;
}
.teacher-side-avatar {
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255,255,255,.16);
    border-radius: 13px;
}
.teacher-side-avatar img,
.teacher-topbar-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.teacher-sidebar-user-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.teacher-sidebar-user-copy strong {
    overflow: hidden;
    color: #fff;
    font-size: .78rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.teacher-sidebar-user-copy small {
    overflow: hidden;
    margin-top: 3px;
    color: #8390a2;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.teacher-side-logout {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #b8c3d0 !important;
    background: rgba(255,255,255,.06);
    text-decoration: none;
}
.teacher-side-logout:hover {
    color: #fff !important;
    background: rgba(225,72,94,.22);
}
.teacher-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    background: rgba(12,20,31,.48);
    backdrop-filter: blur(2px);
}

.teacher-app-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    min-height: var(--teacher-topbar-height);
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.95);
    border-bottom: 1px solid #e6eaf0;
    box-shadow: 0 7px 24px rgba(30,41,59,.035);
    backdrop-filter: blur(16px);
}
.teacher-app-topbar-inner {
    width: 100%;
    min-height: var(--teacher-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 25px;
}
.teacher-topbar-left,
.teacher-topbar-actions,
.teacher-topbar-profile {
    display: flex;
    align-items: center;
}
.teacher-topbar-left { gap: 14px; min-width: 0; }
.teacher-topbar-actions { gap: 10px; }
.teacher-sidebar-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    color: #5e6877;
    background: #fff;
    cursor: pointer;
    transition: .16s ease;
}
.teacher-sidebar-toggle:hover {
    color: #7047eb;
    border-color: #d9d0f8;
    background: #f8f5ff;
}
.teacher-sidebar-toggle span {
    width: 17px;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: currentColor;
}
.teacher-page-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.12;
}
.teacher-page-title small {
    color: #8a94a3;
    font-size: .66rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.teacher-page-title strong {
    overflow: hidden;
    margin-top: 3px;
    color: #263244;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.teacher-topbar-portal {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #e5e9ef;
    border-radius: 12px;
    color: #5d6674 !important;
    background: #fff;
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
}
.teacher-topbar-portal:hover {
    color: #6641d8 !important;
    border-color: #ddd4f8;
    background: #f9f7ff;
}
.teacher-topbar-profile {
    gap: 9px;
    min-width: 0;
    padding: 5px 8px 5px 5px;
    border-radius: 13px;
    color: #344054 !important;
    text-decoration: none;
    transition: background .16s ease;
}
.teacher-topbar-profile:hover {
    color: #344054 !important;
    background: #f5f7fa;
}
.teacher-topbar-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
}
.teacher-topbar-name {
    max-width: 180px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.teacher-topbar-name strong,
.teacher-topbar-name small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.teacher-topbar-name strong { color: #2f3948; font-size: .78rem; }
.teacher-topbar-name small { margin-top: 3px; color: #8a94a3; font-size: .66rem; }

.teacher-app-footer {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 25px;
    color: #8993a1;
    background: #fff;
    border-top: 1px solid #e8ebf0;
    font-size: .76rem;
}

/* Dashboard utama dibuat lebih dekat dengan referensi admin modern. */
.role-teacher.page-dashboard .teacher-app-main > .container {
    padding-top: 24px;
}
.role-teacher.page-dashboard .teacher-dashboard-welcome {
    min-height: 230px;
    align-items: flex-start;
    margin: 0 0 0;
    padding: 34px 36px 74px;
    border: 0;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 8%, rgba(255,255,255,.18), transparent 230px),
        linear-gradient(118deg, #5842f2 0%, #7047eb 50%, #9d54e6 100%);
    box-shadow: 0 18px 45px rgba(82,59,195,.19);
}
.role-teacher.page-dashboard .teacher-dashboard-welcome::after {
    width: 300px;
    height: 280px;
    right: -90px;
    top: -125px;
    background: rgba(255,255,255,.08);
}
.role-teacher.page-dashboard .teacher-dashboard-welcome h1,
.role-teacher.page-dashboard .teacher-dashboard-welcome p,
.role-teacher.page-dashboard .teacher-dashboard-welcome .muted,
.role-teacher.page-dashboard .teacher-dashboard-welcome .teacher-profile-link {
    color: #fff !important;
}
.role-teacher.page-dashboard .teacher-dashboard-welcome .muted {
    opacity: .87;
}
.role-teacher.page-dashboard .teacher-dashboard-welcome .eyebrow {
    color: #fff;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.18);
}
.role-teacher.page-dashboard .teacher-dashboard-welcome .teacher-profile-avatar {
    border-color: rgba(255,255,255,.94);
    box-shadow: 0 15px 35px rgba(41,25,111,.24);
}
.role-teacher.page-dashboard .teacher-dashboard-welcome .btn-secondary {
    color: #5d3bd0;
    background: #fff;
    border-color: #fff;
}
.role-teacher.page-dashboard .teacher-dashboard-welcome .btn-primary {
    color: #fff !important;
    background: rgba(25,17,82,.24);
    border-color: rgba(255,255,255,.42);
    box-shadow: none;
}
.role-teacher.page-dashboard .dashboard-stats {
    position: relative;
    z-index: 5;
    margin: -48px 22px 24px;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}
.role-teacher.page-dashboard .dashboard-stats .stat {
    min-height: 132px;
    padding: 17px;
    border: 1px solid #e7eaf0;
    border-radius: 16px;
    color: #263244;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(30,41,59,.08) !important;
}
.role-teacher.page-dashboard .dashboard-stats .stat::after { display: none; }
.role-teacher.page-dashboard .dashboard-stats .stat-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    margin-bottom: 13px;
    color: #7047eb;
    border: 0;
    border-radius: 12px;
    background: #eee9ff;
    box-shadow: none;
}
.role-teacher.page-dashboard .dashboard-stats .stat:nth-child(4n + 2) .stat-icon { color: #14805d; background: #e5f6ef; }
.role-teacher.page-dashboard .dashboard-stats .stat:nth-child(4n + 3) .stat-icon { color: #bd671a; background: #fff0df; }
.role-teacher.page-dashboard .dashboard-stats .stat:nth-child(4n) .stat-icon { color: #346fc7; background: #e8f1ff; }
.role-teacher.page-dashboard .dashboard-stats .stat-label {
    margin-top: 0;
    color: #7b8492 !important;
    font-size: .75rem;
}
.role-teacher.page-dashboard .dashboard-stats .stat strong,
.role-teacher.page-dashboard .dashboard-stats .stat a {
    color: #263244 !important;
}
.role-teacher.page-dashboard .dashboard-stats .stat strong {
    margin-top: 5px;
    font-size: 1.65rem;
}
.role-teacher.page-dashboard .dashboard-stats .stat-link:hover {
    transform: translateY(-3px);
    border-color: #dcd4f8;
    box-shadow: 0 16px 34px rgba(45,55,72,.11) !important;
}
.role-teacher.page-dashboard .dashboard-subject-banner,
.role-teacher.page-dashboard .teacher-access-banner,
.role-teacher.page-dashboard .dashboard-grid > .card {
    border-radius: 18px;
    box-shadow: 0 9px 25px rgba(30,41,59,.055);
}
.role-teacher.page-dashboard .dashboard-subject-banner {
    margin-top: 0;
}

/* Semua halaman guru menyesuaikan ruang sidebar. */
.role-teacher:not(.page-dashboard) .teacher-app-main > .container:first-child .page-head,
.role-teacher:not(.page-dashboard) .teacher-app-main .page-head {
    margin-top: 24px;
}
.role-teacher .subject-form-card,
.role-teacher .sidebar-card {
    top: calc(var(--teacher-topbar-height) + 18px);
}

body.teacher-sidebar-collapsed .teacher-sidebar {
    transform: translateX(-100%);
}
body.teacher-sidebar-collapsed .teacher-app-stage {
    margin-left: 0;
}

@keyframes teacherMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1180px) {
    .role-teacher .teacher-app-main > .container {
        width: min(100% - 36px, 1180px);
    }
    .role-teacher.page-dashboard .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 1024px) {
    .teacher-sidebar {
        transform: translateX(-100%);
        box-shadow: 24px 0 55px rgba(8,15,25,.22);
    }
    .teacher-sidebar-close { display: grid; }
    .role-teacher .teacher-app-stage,
    body.teacher-sidebar-collapsed .teacher-app-stage {
        margin-left: 0;
    }
    body.teacher-sidebar-open {
        overflow: hidden;
    }
    body.teacher-sidebar-open .teacher-sidebar {
        transform: translateX(0);
    }
    body.teacher-sidebar-open .teacher-sidebar-backdrop {
        display: block;
    }
    .teacher-app-topbar-inner { padding-inline: 18px; }
}

@media (max-width: 720px) {
    :root { --teacher-topbar-height: 66px; }
    .role-teacher .teacher-app-main > .container {
        width: min(100% - 24px, 1120px);
    }
    .teacher-app-topbar-inner {
        min-height: var(--teacher-topbar-height);
        padding-inline: 12px;
    }
    .teacher-page-title small { display: none; }
    .teacher-page-title strong { font-size: .9rem; }
    .teacher-topbar-portal { display: none; }
    .teacher-topbar-name { display: none; }
    .teacher-topbar-profile { padding: 0; }
    .teacher-topbar-avatar { width: 40px; height: 40px; flex-basis: 40px; }
    .teacher-sidebar { width: min(292px, 86vw); }
    .role-teacher.page-dashboard .teacher-app-main > .container { padding-top: 13px; }
    .role-teacher.page-dashboard .teacher-dashboard-welcome {
        min-height: 0;
        padding: 25px 21px 60px;
        border-radius: 20px;
    }
    .role-teacher.page-dashboard .teacher-dashboard-welcome .teacher-welcome-identity {
        width: 100%;
    }
    .role-teacher.page-dashboard .teacher-dashboard-welcome .actions {
        width: 100%;
    }
    .role-teacher.page-dashboard .teacher-dashboard-welcome .actions .btn {
        flex: 1 1 auto;
    }
    .role-teacher.page-dashboard .dashboard-stats {
        margin: -38px 10px 20px;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 10px;
    }
    .role-teacher.page-dashboard .dashboard-stats .stat {
        min-height: 124px;
        padding: 14px;
        border-radius: 15px;
    }
    .role-teacher.page-dashboard .dashboard-stats .stat-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        margin-bottom: 10px;
    }
    .role-teacher.page-dashboard .dashboard-stats .stat strong { font-size: 1.45rem; }
    .teacher-app-footer {
        padding-inline: 14px;
        font-size: .7rem;
    }
}

@media (max-width: 390px) {
    .role-teacher.page-dashboard .dashboard-stats {
        grid-template-columns: 1fr !important;
    }
    .role-teacher.page-dashboard .dashboard-stats .stat {
        min-height: 112px;
    }
}

/* =============================================================
   Digitera V4.6.6 — Student Mobile App Experience
   Bottom navigation, app header, bottom sheet, and loading spinner.
   ============================================================= */

body.role-student {
    --student-nav-height: 76px;
    --student-app-bg: #f7f5fc;
    --student-app-surface: #ffffff;
    --student-app-text: #30264a;
    --student-app-muted: #7d758b;
    --student-app-border: rgba(112,71,235,.11);
    background: var(--student-app-bg);
}

.role-student .student-app-main {
    min-height: calc(100vh - 74px);
    overflow: clip;
}

.student-app-topbar {
    position: sticky;
    top: 0;
    z-index: 115;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid rgba(112,71,235,.09);
    box-shadow: 0 8px 28px rgba(54,37,103,.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.student-app-topbar-inner {
    width: min(1180px, calc(100% - 32px));
    min-height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
}
.student-app-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #2e2446;
}
.student-app-brand:hover { color: #2e2446; }
.student-app-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(92,55,187,.16);
}
.student-app-logo img { width: 100%; height: 100%; object-fit: cover; }
.student-app-brand > span:last-child { min-width: 0; display: flex; flex-direction: column; line-height: 1.08; }
.student-app-brand strong { font-size: 1rem; font-weight: 950; }
.student-app-brand small {
    max-width: 220px;
    margin-top: 4px;
    overflow: hidden;
    color: #81798e;
    font-size: .68rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.student-desktop-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}
.student-desktop-nav a {
    padding: 9px 12px;
    border-radius: 12px;
    color: #655d73;
    font-size: .84rem;
    font-weight: 800;
}
.student-desktop-nav a:hover,
.student-desktop-nav a.active {
    color: #7047eb;
    background: #f0ebff;
}
.student-app-actions { display: flex; align-items: center; gap: 8px; }
.student-top-code {
    min-width: 86px;
    display: flex;
    flex-direction: column;
    padding: 7px 11px;
    border: 1px solid #e9e2fa;
    border-radius: 13px;
    background: #faf8ff;
    line-height: 1.05;
}
.student-top-code small { color: #91899d; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.student-top-code strong { margin-top: 4px; color: #5e3fc1; font-size: .75rem; letter-spacing: .05em; }
.student-top-exit {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #e8e2f4;
    border-radius: 13px;
    color: #766d83;
    background: #fff;
}
.student-top-exit:hover { color: #7047eb; background: #f3efff; }
.student-top-exit svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.student-desktop-footer {
    margin-top: 20px;
    padding: 18px 20px 24px;
    color: #91899d;
    background: transparent;
    font-size: .78rem;
}
.student-desktop-footer > div {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

/* Student loading screen. Initial animation fades itself even if JS is unavailable. */
.student-app-loader { display: none; }
html.js body.role-student .student-app-loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(247,245,252,.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: studentLoaderInitial 1.05s ease forwards;
}
html.js body.role-student .student-app-loader.is-hidden { display: none !important; }
html.js body.role-student .student-app-loader.is-active {
    display: grid !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: none;
}
.student-loader-card {
    min-width: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 26px;
    border: 1px solid rgba(112,71,235,.10);
    border-radius: 30px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 24px 70px rgba(51,30,105,.16);
}
.student-loader-logo {
    width: 66px;
    height: 66px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 13px 30px rgba(112,71,235,.18);
    animation: studentLogoFloat 1.35s ease-in-out infinite;
}
.student-loader-logo img { width: 100%; height: 100%; object-fit: cover; }
.student-loader-spinner {
    width: 54px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 13px 0 7px;
}
.student-loader-spinner i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(135deg,#7047eb,#b15ae9);
    animation: studentLoaderDot .8s ease-in-out infinite;
}
.student-loader-spinner i:nth-child(2) { animation-delay: .12s; }
.student-loader-spinner i:nth-child(3) { animation-delay: .24s; }
.student-loader-card strong { color: #39285f; font-size: 1rem; }
.student-loader-card small { margin-top: 3px; color: #8a8198; font-size: .72rem; }

@keyframes studentLogoFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.03); }
}
@keyframes studentLoaderDot {
    0%,100% { transform: translateY(0) scale(.72); opacity: .38; }
    50% { transform: translateY(-5px) scale(1); opacity: 1; }
}
@keyframes studentLoaderInitial {
    0%,65% { opacity: 1; visibility: visible; pointer-events: auto; }
    100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Mobile-only fixed bottom navigation. */
.student-bottom-nav,
.student-more-sheet,
.student-more-backdrop { display: none; }

@media (max-width: 850px) {
    html { scroll-padding-top: 78px; scroll-padding-bottom: 108px; }
    body.role-student {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
        background:
            radial-gradient(circle at 100% 0, rgba(112,71,235,.055), transparent 16rem),
            var(--student-app-bg);
    }
    body.role-student.student-sheet-open { overflow: hidden; }

    .student-app-topbar-inner {
        width: min(100% - 22px, 760px);
        min-height: 66px;
        gap: 10px;
    }
    .student-app-logo { width: 39px; height: 39px; flex-basis: 39px; border-radius: 13px; }
    .student-app-brand { gap: 9px; }
    .student-app-brand strong { font-size: .92rem; }
    .student-app-brand small { max-width: 46vw; font-size: .62rem; }
    .student-desktop-nav { display: none; }
    .student-app-actions { margin-left: auto; }
    .student-top-code {
        min-width: 66px;
        padding: 6px 9px;
        border-radius: 12px;
        text-align: center;
    }
    .student-top-code small { font-size: .52rem; }
    .student-top-code strong { font-size: .68rem; }
    .student-top-exit { display: none; }
    .student-desktop-footer { display: none; }

    .student-bottom-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 160;
        min-height: var(--student-nav-height);
        display: grid;
        grid-template-columns: repeat(5, minmax(0,1fr));
        gap: 3px;
        padding: 6px;
        border: 1px solid rgba(112,71,235,.12);
        border-radius: 25px;
        background: rgba(255,255,255,.965);
        box-shadow: 0 18px 48px rgba(42,25,88,.20);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    .student-bottom-nav a,
    .student-bottom-nav button {
        position: relative;
        min-width: 0;
        min-height: 62px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 5px 2px;
        border: 0;
        border-radius: 19px;
        color: #847c90;
        background: transparent;
        font: inherit;
        cursor: pointer;
        transition: .18s ease;
    }
    .student-bottom-nav a::after,
    .student-bottom-nav button::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 3px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #7047eb;
        transform: translateX(-50%) scale(0);
        transition: .18s ease;
    }
    .student-nav-icon {
        width: 31px;
        height: 31px;
        display: grid;
        place-items: center;
        border-radius: 11px;
        transition: .18s ease;
    }
    .student-nav-icon svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .student-bottom-nav small {
        max-width: 100%;
        overflow: hidden;
        color: inherit;
        font-size: .62rem;
        font-weight: 850;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .student-bottom-nav a.active,
    .student-bottom-nav button.active {
        color: #6842dc;
    }
    .student-bottom-nav a.active .student-nav-icon,
    .student-bottom-nav button.active .student-nav-icon,
    .student-bottom-nav a:active .student-nav-icon,
    .student-bottom-nav button:active .student-nav-icon {
        color: #fff;
        background: linear-gradient(135deg,#7047eb,#a358e9);
        box-shadow: 0 8px 18px rgba(112,71,235,.25);
        transform: translateY(-2px);
    }
    .student-bottom-nav a.active::after,
    .student-bottom-nav button.active::after { transform: translateX(-50%) scale(1); }

    .student-more-backdrop {
        position: fixed;
        inset: 0;
        z-index: 170;
        display: block;
        background: rgba(28,18,52,.44);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        animation: studentBackdropIn .18s ease;
    }
    .student-more-sheet {
        position: fixed;
        left: 9px;
        right: 9px;
        bottom: calc(94px + env(safe-area-inset-bottom));
        z-index: 180;
        display: block;
        max-height: min(70vh, 520px);
        overflow: auto;
        padding: 10px 16px 18px;
        border: 1px solid rgba(112,71,235,.12);
        border-radius: 30px;
        background: rgba(255,255,255,.985);
        box-shadow: 0 30px 80px rgba(32,18,70,.30);
        animation: studentSheetIn .22s cubic-bezier(.2,.82,.2,1);
    }
    .student-more-sheet[hidden],
    .student-more-backdrop[hidden] { display: none !important; }
    .student-sheet-handle { width: 42px; height: 5px; margin: 0 auto 10px; border-radius: 999px; background: #ddd6e9; }
    .student-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
    .student-sheet-head > div { min-width: 0; display: flex; flex-direction: column; }
    .student-sheet-head small { color: #958c9f; font-size: .67rem; font-weight: 800; }
    .student-sheet-head strong { margin-top: 2px; overflow: hidden; color: #35284e; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
    .student-sheet-head button {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border: 0;
        border-radius: 13px;
        color: #6f657d;
        background: #f4f1f9;
        font-size: 1.45rem;
        cursor: pointer;
    }
    .student-sheet-code {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin: 14px 0;
        padding: 13px 15px;
        border-radius: 17px;
        color: #fff;
        background: linear-gradient(135deg,#6540dc,#9c54e7);
        box-shadow: 0 11px 26px rgba(112,71,235,.20);
    }
    .student-sheet-code span { font-size: .72rem; font-weight: 750; opacity: .84; }
    .student-sheet-code strong { font-size: 1rem; letter-spacing: .08em; }
    .student-sheet-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    .student-sheet-grid a {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px;
        border: 1px solid #eee9f7;
        border-radius: 18px;
        color: #50465f;
        background: #faf8fd;
    }
    .student-sheet-grid a > span {
        width: 39px;
        height: 39px;
        flex: 0 0 39px;
        display: grid;
        place-items: center;
        border-radius: 13px;
        color: #7047eb;
        background: #eee9ff;
    }
    .student-sheet-grid svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .student-sheet-grid a > div { min-width: 0; display: flex; flex-direction: column; }
    .student-sheet-grid strong { color: inherit; font-size: .82rem; }
    .student-sheet-grid small { margin-top: 2px; color: #92899d; font-size: .62rem; }
    .student-sheet-grid .student-sheet-logout { color: #a44555; background: #fff6f7; border-color: #f5dfe3; }
    .student-sheet-grid .student-sheet-logout > span { color: #b14d5d; background: #ffe8ec; }

    @keyframes studentSheetIn { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
    @keyframes studentBackdropIn { from { opacity: 0; } to { opacity: 1; } }

    /* App-like content rhythm */
    .role-student .container { width: min(100% - 24px, 760px); }
    .role-student .section { padding: 30px 0; }
    .role-student .section-muted {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .role-student .section-head {
        align-items: flex-end;
        margin-bottom: 15px;
    }
    .role-student .section-head h2 { margin: 4px 0 0; font-size: 1.35rem; line-height: 1.15; }
    .role-student .section-head p { font-size: .82rem; line-height: 1.5; }
    .role-student .section-head > a { flex: 0 0 auto; font-size: .76rem; font-weight: 850; }
    .role-student .eyebrow { padding: 6px 9px; font-size: .67rem; }
    .role-student .card,
    .role-student .empty,
    .role-student .student-subject-card,
    .role-student .student-home-quiz-card,
    .role-student .student-quiz-card,
    .role-student .public-video-card,
    .role-student .public-post-card,
    .role-student .resource-card,
    .role-student .document-row {
        border-radius: 22px;
        box-shadow: 0 10px 28px rgba(55,36,105,.07);
    }

    /* Mobile hero becomes a compact app dashboard header. */
    .role-student .student-hero {
        padding: 24px 0 28px !important;
        border-radius: 0 0 34px 34px;
        background:
            radial-gradient(circle at 92% 10%, rgba(255,255,255,.18), transparent 13rem),
            linear-gradient(138deg,#5d3cdb 0%,#7b4fe4 54%,#a35be9 100%);
        box-shadow: 0 18px 45px rgba(77,48,160,.16);
    }
    .role-student .student-hero-grid { grid-template-columns: 1fr; gap: 18px; }
    .role-student .student-hero h1 {
        max-width: 520px;
        margin: 12px 0 10px;
        color: #fff !important;
        font-size: clamp(2rem,9.5vw,2.85rem) !important;
        line-height: 1.02;
        letter-spacing: -.045em;
    }
    .role-student .student-hero .lead {
        margin: 0;
        color: rgba(255,255,255,.88) !important;
        font-size: .92rem;
        line-height: 1.55;
    }
    .role-student .student-hero .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
    .role-student .student-hero .actions .btn { min-height: 45px; padding: 9px 11px; border-radius: 15px; font-size: .8rem; }
    .role-student .teacher-public-card {
        display: grid;
        grid-template-columns: 68px minmax(0,1fr);
        gap: 3px 13px;
        align-items: center;
        padding: 15px;
        border-radius: 23px;
        text-align: left;
        background: rgba(44,22,101,.27);
        box-shadow: 0 14px 32px rgba(37,20,87,.17);
    }
    .role-student .teacher-public-photo {
        grid-column: 1;
        grid-row: 1 / span 4;
        width: 68px;
        height: 68px;
        margin: 0;
        border-width: 3px;
        border-radius: 21px;
        font-size: 1rem;
    }
    .role-student .teacher-public-label {
        grid-column: 2;
        justify-self: start;
        padding: 4px 7px;
        font-size: .56rem;
    }
    .role-student .teacher-public-card h2 {
        grid-column: 2;
        margin: 3px 0 0 !important;
        overflow: hidden;
        font-size: 1.05rem;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .role-student .teacher-public-card p {
        grid-column: 2;
        margin: 2px 0 0;
        font-size: .72rem;
    }
    .role-student .teacher-public-school {
        grid-column: 2;
        margin: 1px 0 0;
        overflow: hidden;
        font-size: .65rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .role-student .teacher-public-card .code-pill.large {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 9px;
        padding: 9px 12px;
        border-radius: 14px;
        text-align: center;
        font-size: .78rem;
        letter-spacing: .08em;
    }

    /* Common grids behave like mobile app cards. */
    .role-student .student-subject-grid,
    .role-student .quiz-subject-grid,
    .role-student .student-home-quiz-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
    }
    .role-student .student-subject-card {
        min-height: 205px;
        padding: 15px;
    }
    .role-student .student-subject-icon { width: 42px; height: 42px; border-radius: 14px; }
    .role-student .student-subject-card small { margin-top: 12px; font-size: .6rem; }
    .role-student .student-subject-card h3 { font-size: .98rem; }
    .role-student .student-subject-card p { font-size: .72rem; }
    .role-student .student-subject-counts { gap: 4px; padding-top: 12px; }
    .role-student .student-subject-counts span { padding: 5px 7px; font-size: .61rem; }
    .role-student .student-subject-counts strong { font-size: .82rem; }
    .role-student .student-subject-open { margin-top: 9px; padding-top: 9px; font-size: .7rem; }
    .role-student .student-home-quiz-card { min-height: 150px; padding: 14px; border-radius: 20px; }
    .role-student .student-home-quiz-card strong { font-size: .88rem; line-height: 1.25; }
    .role-student .student-home-quiz-card small { font-size: .68rem; line-height: 1.4; }
    .role-student .student-home-quiz-go { font-size: .7rem; }

    .role-student .assignment-public-grid,
    .role-student .public-video-grid,
    .role-student .video-admin-grid,
    .role-student .post-grid,
    .role-student .public-post-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .role-student .assignment-public-card { padding: 17px; }
    .role-student .assignment-public-card h2,
    .role-student .assignment-public-card h3 { font-size: 1rem; }
    .role-student .assignment-public-card p { font-size: .78rem; }
    .role-student .meta { font-size: .7rem; }
    .role-student .btn { border-radius: 14px; }
    .role-student .page-head {
        margin: 16px 0 12px;
        padding: 22px 18px !important;
        border-radius: 24px !important;
    }
    .role-student .page-head h1 { font-size: 1.65rem !important; }
    .role-student .filter-bar { gap: 12px; }
    .role-student .table-wrap { border-radius: 20px; }
    .role-student .page-spacer { height: 30px; }
}

@media (max-width: 430px) {
    .student-app-brand small { max-width: 37vw; }
    .student-top-code { min-width: 60px; padding-inline: 7px; }
    .student-bottom-nav { left: 7px; right: 7px; bottom: calc(6px + env(safe-area-inset-bottom)); border-radius: 22px; }
    .student-bottom-nav a,
    .student-bottom-nav button { min-height: 59px; border-radius: 17px; }
    .student-nav-icon { width: 29px; height: 29px; }
    .student-nav-icon svg { width: 19px; height: 19px; }
    .student-bottom-nav small { font-size: .58rem; }
    .student-more-sheet { left: 7px; right: 7px; bottom: calc(88px + env(safe-area-inset-bottom)); border-radius: 27px; }
    .role-student .student-hero { border-radius: 0 0 29px 29px; }
    .role-student .student-hero h1 { font-size: clamp(1.88rem,9vw,2.45rem) !important; }
}

@media (max-width: 360px) {
    .student-app-brand small { display: none; }
    .student-sheet-grid { grid-template-columns: 1fr; }
    .role-student .student-subject-grid,
    .role-student .quiz-subject-grid,
    .role-student .student-home-quiz-grid { grid-template-columns: 1fr; }
    .role-student .student-subject-card { min-height: auto; }
}
@media (max-width: 850px) {
    .student-bottom-nav button.is-open { color: #6842dc; }
    .student-bottom-nav button.is-open .student-nav-icon {
        color: #fff;
        background: linear-gradient(135deg,#7047eb,#a358e9);
        box-shadow: 0 8px 18px rgba(112,71,235,.25);
        transform: translateY(-2px);
    }
}

/* =========================================================
   Digitera 4.6.7 — Quiz template gallery
   ========================================================= */
.quiz-template-page { padding-top: 34px; }
.quiz-template-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 26px;
    margin-bottom: 24px;
}
.quiz-template-heading h1 {
    margin: 10px 0 8px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -.045em;
}
.quiz-template-heading p {
    max-width: 760px;
    margin: 0;
    color: #667085;
    font-size: 1rem;
}
.quiz-template-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    margin: 20px 0 22px;
    border: 1px solid #e7e4f4;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 30px rgba(46,35,90,.05);
}
.quiz-template-search {
    width: min(420px, 100%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #ddd8ef;
    border-radius: 13px;
    background: #fff;
}
.quiz-template-search > span { color: #7d72a3; font-size: 1.25rem; }
.quiz-template-search input {
    border: 0;
    box-shadow: none;
    padding-inline: 0;
    min-width: 0;
}
.quiz-template-search input:focus { box-shadow: none; }
.quiz-template-filter { display: flex; gap: 7px; flex-wrap: wrap; }
.quiz-template-filter button {
    appearance: none;
    border: 1px solid #ded9ef;
    background: #fff;
    color: #5e5871;
    padding: 8px 12px;
    border-radius: 999px;
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
}
.quiz-template-filter button.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg,#6842dc,#8e58ed);
    box-shadow: 0 8px 18px rgba(104,66,220,.22);
}
.quiz-template-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}
.quiz-template-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2def0;
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(34,28,61,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.quiz-template-card.is-ready:hover {
    transform: translateY(-4px);
    border-color: #cbbdf6;
    box-shadow: 0 18px 40px rgba(76,55,144,.13);
}
.quiz-template-card[hidden] { display: none !important; }
.quiz-template-visual {
    position: relative;
    min-height: 148px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg,#f7f5ff,#eef4ff);
}
.quiz-template-visual::before,
.quiz-template-visual::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    opacity: .55;
}
.quiz-template-visual::before { width: 115px; height: 115px; right: -28px; top: -34px; background: rgba(255,255,255,.9); }
.quiz-template-visual::after { width: 68px; height: 68px; left: -18px; bottom: -22px; background: rgba(255,255,255,.72); }
.quiz-template-art {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 25px;
    color: #6641d8;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 14px 28px rgba(69,53,128,.14);
    backdrop-filter: blur(5px);
}
.quiz-template-art svg {
    width: 62px;
    height: 62px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.quiz-template-status {
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .01em;
}
.quiz-template-status.ready { color: #17633d; background: #e9fbf0; border: 1px solid #bfe9ce; }
.quiz-template-status.soon { color: #665f75; background: rgba(255,255,255,.9); border: 1px solid #e2ddeb; }
.quiz-template-copy { padding: 18px; }
.quiz-template-copy h2 { margin: 0 0 6px; font-size: 1.08rem; letter-spacing: -.02em; }
.quiz-template-copy p { min-height: 66px; margin: 0; color: #6c667a; font-size: .84rem; line-height: 1.55; }
.quiz-template-choose {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding: 11px 13px;
    border-radius: 12px;
    color: #fff;
    font-size: .84rem;
    font-weight: 900;
    background: linear-gradient(135deg,#6842dc,#8f5cec);
    box-shadow: 0 10px 18px rgba(104,66,220,.18);
}
.quiz-template-choose:hover { color: #fff; transform: translateY(-1px); }
.quiz-template-coming {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f7f6fa;
    border: 1px dashed #ddd9e6;
}
.quiz-template-coming span,
.quiz-template-coming small { display: block; }
.quiz-template-coming span { color: #625d6d; font-size: .78rem; font-weight: 900; }
.quiz-template-coming small { margin-top: 2px; color: #918b9d; font-size: .69rem; line-height: 1.4; }
.quiz-template-card.is-soon { opacity: .86; }
.quiz-template-card.is-soon .quiz-template-art { filter: saturate(.55); }
.quiz-template-empty {
    margin-top: 20px;
    padding: 36px 20px;
    text-align: center;
    border: 1px dashed #cbc4df;
    border-radius: 18px;
    background: #fbfaff;
}
.quiz-template-empty strong,
.quiz-template-empty span { display: block; }
.quiz-template-empty span { margin-top: 4px; color: #7a7486; }

.quiz-template-card.tone-blue .quiz-template-visual { background: linear-gradient(145deg,#eaf5ff,#dceeff); }
.quiz-template-card.tone-blue .quiz-template-art { color: #2583d8; }
.quiz-template-card.tone-green .quiz-template-visual { background: linear-gradient(145deg,#ecfbf1,#d9f6e5); }
.quiz-template-card.tone-green .quiz-template-art { color: #22935c; }
.quiz-template-card.tone-cyan .quiz-template-visual { background: linear-gradient(145deg,#e8fbff,#d8f2f8); }
.quiz-template-card.tone-cyan .quiz-template-art { color: #1385a3; }
.quiz-template-card.tone-orange .quiz-template-visual { background: linear-gradient(145deg,#fff6e9,#ffead0); }
.quiz-template-card.tone-orange .quiz-template-art { color: #df7a1a; }
.quiz-template-card.tone-pink .quiz-template-visual { background: linear-gradient(145deg,#fff0f7,#ffe1ed); }
.quiz-template-card.tone-pink .quiz-template-art { color: #d54d87; }
.quiz-template-card.tone-yellow .quiz-template-visual { background: linear-gradient(145deg,#fffbea,#fff1bf); }
.quiz-template-card.tone-yellow .quiz-template-art { color: #b9850e; }
.quiz-template-card.tone-indigo .quiz-template-visual { background: linear-gradient(145deg,#f0efff,#e1e0ff); }
.quiz-template-card.tone-indigo .quiz-template-art { color: #514fd0; }
.quiz-template-card.tone-violet .quiz-template-visual { background: linear-gradient(145deg,#f6efff,#eadcff); }
.quiz-template-card.tone-violet .quiz-template-art { color: #8b48d8; }
.quiz-template-card.tone-teal .quiz-template-visual { background: linear-gradient(145deg,#eafbf8,#d8f4ef); }
.quiz-template-card.tone-teal .quiz-template-art { color: #188a78; }
.quiz-template-card.tone-red .quiz-template-visual { background: linear-gradient(145deg,#fff0f0,#ffe1e5); }
.quiz-template-card.tone-red .quiz-template-art { color: #d54b5c; }
.quiz-template-card.tone-sky .quiz-template-visual { background: linear-gradient(145deg,#edf8ff,#dff0ff); }
.quiz-template-card.tone-sky .quiz-template-art { color: #3a86c7; }

.quiz-form-template-summary {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border-radius: 18px;
    border: 1px solid #ddd4f5;
    background: linear-gradient(135deg,#f7f3ff,#f0ecff);
}
.quiz-form-template-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg,#6842dc,#9c5bea);
    box-shadow: 0 10px 20px rgba(104,66,220,.2);
    font-size: 1.3rem;
}
.quiz-form-template-summary small,
.quiz-form-template-summary strong { display: block; }
.quiz-form-template-summary small { color: #716a80; font-size: .69rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.quiz-form-template-summary strong { margin-top: 2px; font-size: 1rem; }
.quiz-form-template-summary p { margin: 3px 0 0; color: #746d80; font-size: .78rem; }
.quiz-form-template-summary > a { font-size: .78rem; font-weight: 900; }
.quiz-settings-card { margin-bottom: 18px; }

@media (max-width: 1100px) {
    .quiz-template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .quiz-template-page { padding-top: 20px; }
    .quiz-template-heading { flex-direction: column; }
    .quiz-template-heading .btn { width: 100%; }
    .quiz-template-toolbar { align-items: stretch; flex-direction: column; }
    .quiz-template-search { width: 100%; }
    .quiz-template-filter { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
    .quiz-template-filter button { flex: 0 0 auto; }
    .quiz-template-grid { grid-template-columns: 1fr; gap: 13px; }
    .quiz-template-card { display: grid; grid-template-columns: 118px minmax(0,1fr); border-radius: 18px; }
    .quiz-template-visual { min-height: 100%; }
    .quiz-template-art { width: 68px; height: 68px; border-radius: 20px; }
    .quiz-template-art svg { width: 48px; height: 48px; }
    .quiz-template-status { left: 7px; top: 7px; font-size: .57rem; padding: 3px 6px; }
    .quiz-template-copy { padding: 14px; }
    .quiz-template-copy h2 { font-size: .98rem; }
    .quiz-template-copy p { min-height: 0; font-size: .74rem; }
    .quiz-template-choose { margin-top: 11px; padding: 9px 11px; font-size: .75rem; }
    .quiz-template-coming { margin-top: 10px; }
    .quiz-form-template-summary { grid-template-columns: auto minmax(0,1fr); }
    .quiz-form-template-summary > a { grid-column: 1 / -1; }
}
@media (max-width: 430px) {
    .quiz-template-card { grid-template-columns: 102px minmax(0,1fr); }
    .quiz-template-art { width: 60px; height: 60px; }
    .quiz-template-art svg { width: 43px; height: 43px; }
}
.quiz-type-mini {
    display: inline-flex;
    margin-bottom: 7px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #6240c8;
    background: #f1ecff;
    border: 1px solid #ddd2ff;
    font-size: .66rem;
    font-weight: 900;
}

/* =========================================================
   Digitera 4.6.8 — Interactive Quiz Games (all templates)
   ========================================================= */
.quiz-game-shell {
    min-height: calc(100vh - 78px);
    padding: 26px 0 70px;
    background:
        radial-gradient(circle at 12% 5%, rgba(132,94,247,.18), transparent 28%),
        radial-gradient(circle at 90% 22%, rgba(54,186,255,.13), transparent 24%),
        linear-gradient(180deg,#f7f5ff 0%,#f3f6fc 58%,#eef2f8 100%);
}
.quiz-game-container { width: min(1040px,calc(100% - 30px)); }
.quiz-game-header {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 16px 18px; margin-bottom: 12px; border-radius: 22px;
    color: #fff; background: linear-gradient(135deg,#3f25a8,#7145e8 58%,#9a5ae8);
    box-shadow: 0 18px 45px rgba(73,43,165,.22);
}
.quiz-game-title { min-width: 0; display: grid; gap: 2px; }
.quiz-game-title strong { overflow: hidden; font-size: 1.08rem; text-overflow: ellipsis; white-space: nowrap; }
.quiz-game-title small { color: rgba(255,255,255,.76); font-size: .72rem; }
.quiz-game-type { width: max-content; padding: 4px 8px; border-radius: 999px; font-size: .64rem; font-weight: 900; background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.22); }
.game-timer-pill { flex: 0 0 auto; min-width: 104px; padding: 8px 12px; text-align: center; border-radius: 16px; background: rgba(24,12,73,.23); border: 1px solid rgba(255,255,255,.18); }
.game-timer-pill span,.game-timer-pill strong { display: block; }
.game-timer-pill span { font-size: .59rem; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .08em; }
.game-timer-pill strong { margin-top: 1px; font-size: 1.06rem; font-variant-numeric: tabular-nums; }
.game-timer-pill.is-warning { background: rgba(149,25,60,.52); animation: gameTimerPulse 1s ease-in-out infinite alternate; }
@keyframes gameTimerPulse { to { transform: scale(1.035); } }
.game-progress-shell { margin-bottom: 18px; }
.game-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #e2def0; }
.game-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6b43df,#ac60ed); transition: width .28s ease; }
.game-progress-meta { display: flex; justify-content: space-between; gap: 12px; padding: 6px 3px 0; color: #777083; font-size: .69rem; font-weight: 700; }
.digitera-game-root { min-height: 460px; }
.game-question-panel,.wheel-stage,.card-picker-stage,.gameshow-stage,.unjumble-stage,.group-sort-stage,.find-match-stage,.matching-stage,.game-finish-card {
    border: 1px solid #e3dff0; border-radius: 28px; background: rgba(255,255,255,.97); box-shadow: 0 22px 55px rgba(47,36,85,.09);
}
.game-question-panel { padding: clamp(22px,4vw,40px); }
.game-question-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.game-question-meta span { padding: 5px 9px; border-radius: 999px; color: #6547c6; background: #f1edff; font-size: .65rem; font-weight: 900; }
.game-question-panel h2 { max-width: 830px; margin: 0 auto 22px; text-align: center; font-size: clamp(1.35rem,3.2vw,2.15rem); line-height: 1.22; }
.game-question-image { display: block; width: min(560px,100%); max-height: 300px; margin: 0 auto 22px; object-fit: contain; border-radius: 18px; background: #f7f7fa; }
.game-choice-grid,.gameshow-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.game-choice {
    position: relative; min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 15px 16px;
    text-align: left; color: #282334; border: 1px solid #e2ddeb; border-radius: 17px; background: #fff;
    font: inherit; font-weight: 750; cursor: pointer; box-shadow: 0 7px 18px rgba(43,34,76,.04); transition: .15s ease;
}
.game-choice:hover { transform: translateY(-2px); border-color: #bcb0e8; box-shadow: 0 12px 25px rgba(67,49,129,.09); }
.game-choice.is-selected { color: #5130b7; border-color: #8f72e8; background: #f4f0ff; box-shadow: 0 0 0 3px rgba(112,71,235,.11); }
.game-choice.is-correct { color: #14603d; border-color: #73cca1; background: #eafaf1; }
.game-choice.is-wrong { color: #9f2d3b; border-color: #ef9aa4; background: #fff0f2; }
.game-choice-letter { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: linear-gradient(135deg,#6842dc,#9b5be9); font-size: .78rem; font-weight: 900; }
.game-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #eeeaf4; color: #80798c; font-size: .75rem; font-weight: 800; }
.game-nav-center { justify-content: center; }
.game-true-false { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.game-tf-choice { min-height: 145px; justify-content: center; flex-direction: column; text-align: center; font-size: 1.12rem; }
.game-tf-choice > span { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg,#7047eb,#a25be7); font-size: 1.7rem; }
.game-missing-sentence { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; padding: 19px; margin: 0 0 17px; border-radius: 18px; color: #4f4760; background: #faf9fd; border: 1px dashed #d9d2e8; font-size: 1rem; }
.game-missing-sentence strong { min-width: 100px; color: #6941d6; letter-spacing: .12em; }
.game-word-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.game-word-chip { padding: 11px 15px; border: 1px solid #dcd6e9; border-radius: 999px; color: #514a5f; background: #fff; font: inherit; font-weight: 850; cursor: pointer; }
.game-word-chip.is-selected { color: #fff; border-color: transparent; background: linear-gradient(135deg,#6842dc,#9257e8); box-shadow: 0 8px 18px rgba(104,66,220,.2); }
.game-section-heading,.wheel-copy { text-align: center; }
.game-section-heading h2,.wheel-copy h2 { margin: 7px 0 5px; font-size: clamp(1.35rem,3vw,2rem); }
.game-section-heading p,.wheel-copy p { margin: 0; color: #777080; }
.game-kicker { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #6842dc; background: #f1ecff; font-size: .64rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.game-big-action { min-width: 170px; min-height: 48px; }

/* Random wheel */
.wheel-stage { display: grid; place-items: center; gap: 22px; padding: clamp(28px,5vw,48px); text-align: center; }
.game-wheel-wrap { position: relative; width: min(300px,78vw); aspect-ratio: 1; display: grid; place-items: center; }
.game-wheel-pointer { position: absolute; z-index: 4; top: -11px; color: #ff5e6c; font-size: 2rem; filter: drop-shadow(0 4px 3px rgba(0,0,0,.12)); }
.game-wheel { --spin: 0deg; width: 100%; height: 100%; display: grid; place-items: center; border: 11px solid #fff; border-radius: 50%; color: #fff; background: conic-gradient(#7148e7 0 12.5%,#3f90ef 12.5% 25%,#32bca5 25% 37.5%,#f3a52d 37.5% 50%,#ee617b 50% 62.5%,#a75de6 62.5% 75%,#4db4de 75% 87.5%,#7351cf 87.5% 100%); box-shadow: 0 20px 40px rgba(61,42,124,.2),inset 0 0 0 2px rgba(255,255,255,.45); transition: transform 1.15s cubic-bezier(.12,.65,.2,1); }
.game-wheel::after { content: ''; width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 7px 18px rgba(44,31,93,.2); }
.game-wheel > span { position: absolute; z-index: 2; color: #6842dc; font-size: 1.5rem; font-weight: 950; }
.game-wheel.is-spinning { transform: rotate(var(--spin)); }

/* Random cards and open box */
.card-picker-stage { padding: clamp(22px,4vw,38px); }
.game-card-grid,.game-box-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-top: 23px; }
.game-card-tile,.game-box-tile { min-height: 130px; display: grid; place-items: center; align-content: center; gap: 7px; border: 0; border-radius: 20px; font: inherit; cursor: pointer; transition: .17s ease; }
.game-card-tile { color: #fff; background: linear-gradient(145deg,#4b2bb9,#8051ed); box-shadow: 0 12px 22px rgba(70,43,164,.18); }
.game-card-tile::before { content:'D'; width: 42px; height: 42px; display:grid; place-items:center; border-radius:13px; background:rgba(255,255,255,.16); font-weight:950; }
.game-card-tile > span { font-size: 1.1rem; font-weight: 950; }
.game-card-tile small,.game-box-tile small { font-size: .65rem; opacity: .8; }
.game-card-tile:hover,.game-box-tile:hover { transform: translateY(-4px) rotate(-1deg); }
.game-card-tile.is-done { color: #4f745e; background: #e9f5ee; box-shadow: none; }
.game-box-tile { position: relative; overflow: hidden; color: #40325f; border: 1px solid #dfd5f2; background: linear-gradient(145deg,#f7f2ff,#e9e1ff); box-shadow: inset 0 -9px 0 rgba(94,64,173,.07),0 10px 20px rgba(55,42,91,.06); }
.game-box-tile::before { content:'🎁'; font-size: 2rem; }
.game-box-tile > span { width: 35px; height: 35px; display:grid; place-items:center; border-radius:999px; color:#fff; background:#6f47df; font-weight:900; }
.game-box-tile.is-done { opacity:.48; }

/* Gameshow */
.gameshow-stage { overflow: hidden; border: 0; color: #fff; background: radial-gradient(circle at 50% -20%,#925df1,#4720ae 55%,#24106b); box-shadow: 0 25px 65px rgba(46,23,116,.27); }
.gameshow-hud { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.12); }
.gameshow-hud > div { padding: 13px; text-align:center; background:rgba(26,8,80,.23); }
.gameshow-hud small,.gameshow-hud strong { display:block; }
.gameshow-hud small { color:rgba(255,255,255,.66); font-size:.58rem; letter-spacing:.08em; }
.gameshow-hud strong { margin-top:2px; font-size:1rem; }
.gameshow-stage .game-question-panel { border:0; border-radius:0; background:transparent; box-shadow:none; }
.gameshow-stage .game-question-panel h2 { color:#fff; }
.gameshow-stage .game-question-meta span { color:#fff; background:rgba(255,255,255,.13); }
.gameshow-choice { color:#211c2c; background:#fff; }
.gameshow-finish strong { color:#6842dc; }

/* Unjumble */
.unjumble-stage { padding: clamp(24px,4vw,40px); }
.unjumble-answer,.unjumble-pool { min-height: 88px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; padding:15px; border-radius:20px; }
.unjumble-answer { margin: 22px 0 13px; border: 2px dashed #cfc3ec; background:#faf8ff; }
.unjumble-answer > span { color:#91899f; }
.unjumble-answer button,.unjumble-pool button { min-width:42px; padding:10px 13px; border:1px solid #d9d1eb; border-radius:12px; color:#493b6f; background:#fff; font:inherit; font-weight:900; cursor:pointer; box-shadow:0 5px 12px rgba(47,35,82,.06); }
.unjumble-pool { background:#f4f1fb; }
.unjumble-pool button { color:#fff; border:0; background:linear-gradient(135deg,#7047e8,#9c5be8); }
.unjumble-answer.is-correct { border-color:#69c794; background:#eafaf0; }
.unjumble-answer.is-wrong { border-color:#e68794; background:#fff0f2; animation: gameShake .3s ease; }
@keyframes gameShake { 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }

/* Group sort */
.group-sort-stage { padding: clamp(24px,4vw,40px); }
.group-sort-item { width:min(520px,100%); min-height:100px; display:grid; place-items:center; gap:4px; margin:24px auto 18px; padding:17px; text-align:center; border-radius:20px; color:#fff; background:linear-gradient(135deg,#6741d9,#8c55e9); box-shadow:0 15px 30px rgba(97,61,202,.2); cursor:grab; }
.group-sort-item span { font-size:.58rem; opacity:.72; letter-spacing:.1em; }
.group-sort-zones { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.group-sort-zone { min-height:105px; padding:15px; border:2px dashed #cdc3e2; border-radius:18px; color:#51475f; background:#faf9fd; font:inherit; cursor:pointer; transition:.15s ease; }
.group-sort-zone span,.group-sort-zone strong { display:block; }
.group-sort-zone span { margin-bottom:3px; color:#8c8498; font-size:.6rem; text-transform:uppercase; }
.group-sort-zone.is-dragover,.group-sort-zone:hover { border-color:#8d72df; background:#f1edff; transform:translateY(-2px); }
.group-sort-zone.is-dropped { border-style:solid; border-color:#6bc697; background:#ebfaf1; }

/* Find the match */
.find-match-stage { padding: clamp(24px,4vw,40px); }
.find-match-target { padding:20px; margin-bottom:18px; text-align:center; border-radius:21px; color:#fff; background:linear-gradient(135deg,#087e70,#20aa93); box-shadow:0 15px 30px rgba(17,128,111,.17); }
.find-match-target span { font-size:.63rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; opacity:.75; }
.find-match-target h2 { margin:5px 0 0; font-size:clamp(1.3rem,3vw,2rem); }
.find-match-target .game-question-image { margin-top:14px; margin-bottom:0; }
.find-match-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.find-match-grid button { min-height:82px; padding:14px; border:1px solid #dce9e7; border-radius:17px; color:#354a47; background:#f8fffd; font:inherit; font-weight:850; cursor:pointer; transition:.15s ease; }
.find-match-grid button:hover { border-color:#6ec3b5; transform:translateY(-2px); }
.find-match-grid button.is-correct { color:#145e3c; border-color:#67c491; background:#eaf9ef; }
.find-match-grid button.is-wrong { color:#9c2d3c; border-color:#ed919d; background:#fff0f2; }

/* Matching pairs */
.matching-stage { padding: clamp(22px,4vw,38px); }
.matching-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-top:22px; }
.matching-card { position:relative; min-height:120px; padding:0; overflow:hidden; border:0; border-radius:18px; background:#6843da; font:inherit; cursor:pointer; perspective:800px; box-shadow:0 10px 20px rgba(71,48,152,.13); }
.matching-card-front,.matching-card-back { position:absolute; inset:0; display:grid; place-items:center; padding:12px; transition:transform .3s ease,opacity .25s ease; }
.matching-card-front { color:#fff; font-size:1.7rem; font-weight:950; background:linear-gradient(145deg,#5832c5,#8051e9); }
.matching-card-back { opacity:0; transform:rotateY(180deg); color:#40384d; background:#fff; font-size:.76rem; font-weight:800; line-height:1.35; }
.matching-card.is-open .matching-card-front { opacity:0; transform:rotateY(180deg); }
.matching-card.is-open .matching-card-back { opacity:1; transform:rotateY(0); }
.matching-card.is-match { box-shadow:0 0 0 3px #62c58c,0 10px 20px rgba(34,139,81,.15); }
.matching-card.is-miss { animation:gameShake .3s ease; box-shadow:0 0 0 3px #e77c89; }

.game-finish-card { display:grid; place-items:center; padding:50px 24px; text-align:center; }
.game-finish-card h2 { margin:12px 0 6px; }
.game-finish-card p { max-width:570px; margin:0 0 20px; color:#777080; }
.game-finish-icon { width:76px; height:76px; display:grid; place-items:center; border-radius:24px; color:#fff; background:linear-gradient(135deg,#6842dc,#a25bea); box-shadow:0 15px 28px rgba(104,66,220,.22); font-size:2rem; font-weight:950; }
.game-submit-form { display:none; }

/* Give every game its own subtle theme while preserving contrast. */
.game-type-random_wheel .quiz-game-header { background:linear-gradient(135deg,#a45314,#ed8d20 58%,#f3ad42); }
.game-type-matching_pairs .quiz-game-header { background:linear-gradient(135deg,#087d9a,#18a2bf 58%,#39b9cf); }
.game-type-unjumble .quiz-game-header { background:linear-gradient(135deg,#a7336e,#d54f8a 58%,#e96ba2); }
.game-type-missing_word .quiz-game-header { background:linear-gradient(135deg,#88630a,#c28e12 58%,#dcaa32); }
.game-type-group_sort .quiz-game-header { background:linear-gradient(135deg,#3837a6,#5756d4 58%,#7472e5); }
.game-type-random_cards .quiz-game-header { background:linear-gradient(135deg,#6530a3,#904fd3 58%,#aa69e8); }
.game-type-find_match .quiz-game-header { background:linear-gradient(135deg,#096c62,#168e80 58%,#36aa99); }
.game-type-gameshow .quiz-game-header { background:linear-gradient(135deg,#a72f45,#dc4e65 58%,#e96e80); }
.game-type-open_box .quiz-game-header { background:linear-gradient(135deg,#28699d,#3b8dca 58%,#62a9dc); }

@media (max-width: 760px) {
    .quiz-game-shell { padding-top:12px; padding-bottom:calc(112px + env(safe-area-inset-bottom)); }
    .quiz-game-container { width:min(100% - 18px,1040px); }
    .quiz-game-header { padding:12px 13px; border-radius:20px; }
    .quiz-game-title strong { max-width:58vw; font-size:.93rem; }
    .game-timer-pill { min-width:88px; padding:7px 8px; }
    .digitera-game-root { min-height:390px; }
    .game-question-panel,.wheel-stage,.card-picker-stage,.gameshow-stage,.unjumble-stage,.group-sort-stage,.find-match-stage,.matching-stage,.game-finish-card { border-radius:23px; }
    .game-question-panel { padding:20px 15px; }
    .game-question-panel h2 { margin-bottom:17px; font-size:1.32rem; }
    .game-choice-grid,.gameshow-options,.game-true-false,.group-sort-zones,.find-match-grid { grid-template-columns:1fr; }
    .game-choice { min-height:64px; padding:12px; border-radius:15px; }
    .game-tf-choice { min-height:100px; flex-direction:row; }
    .game-tf-choice > span { width:46px; height:46px; border-radius:14px; }
    .game-nav-row { gap:8px; }
    .game-nav-row .btn { padding:9px 11px; font-size:.74rem; }
    .game-card-grid,.game-box-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
    .game-card-tile,.game-box-tile { min-height:105px; border-radius:17px; }
    .matching-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
    .matching-card { min-height:104px; border-radius:15px; }
    .matching-card-back { padding:8px; font-size:.65rem; }
    .gameshow-hud > div { padding:10px 5px; }
    .unjumble-answer,.unjumble-pool { min-height:74px; padding:10px; }
    .group-sort-item { min-height:86px; }
}
@media (max-width: 430px) {
    .game-progress-meta { font-size:.61rem; }
    .game-card-grid,.game-box-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .matching-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .matching-card { min-height:96px; }
    .game-wheel-wrap { width:min(255px,76vw); }
}
.game-authoring-guide { display:flex; align-items:flex-start; gap:13px; margin-bottom:18px; padding:16px 18px; border-color:#d9cff5; background:linear-gradient(135deg,#f7f3ff,#f1edff); }
.game-authoring-guide strong,.game-authoring-guide p { display:block; }
.game-authoring-guide p { margin:3px 0 0; color:#6f687d; font-size:.82rem; }
.game-authoring-icon { flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#fff; box-shadow:0 7px 16px rgba(82,59,151,.1); }
.student-game-type-badge { display:inline-flex; width:max-content; margin:7px 0 2px; padding:4px 8px; border-radius:999px; color:#6341c8; background:#f1edff; border:1px solid #ddd3fa; font-size:.62rem; font-weight:900; }

/* =========================================================
   Digitera 4.6.9 — template-aware quiz authoring
   ========================================================= */
.template-specific-tip { border:1px solid #d9d0f4; background:linear-gradient(135deg,#faf8ff,#f3efff); }
.template-format-lock { min-width:150px; display:flex; flex-direction:column; gap:2px; padding:8px 11px; border:1px solid #ddd6ee; border-radius:11px; background:#faf9fd; }
.template-format-lock span { color:#7c7489; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.template-format-lock strong { color:#493a72; font-size:.84rem; }

.pair-authoring-grid { display:grid; grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr); gap:14px; align-items:stretch; }
.pair-authoring-card { position:relative; padding:20px; border:2px solid #ddd4f3; border-radius:22px; background:#fff; box-shadow:0 12px 28px rgba(72,51,128,.07); }
.pair-authoring-card label { display:block; margin:15px 0 7px; color:#423957; font-weight:900; }
.pair-authoring-card textarea { min-height:145px; }
.pair-authoring-card small { display:block; margin-top:8px; color:#756d82; }
.pair-left-card { background:linear-gradient(145deg,#f8f5ff,#fff); border-color:#cfc2f0; }
.pair-right-card { background:linear-gradient(145deg,#eefcff,#fff); border-color:#b9e3ec; }
.pair-card-label { display:inline-flex; padding:5px 9px; border-radius:999px; color:#fff; background:#6842d9; font-size:.63rem; font-weight:950; letter-spacing:.08em; }
.pair-right-card .pair-card-label { background:#138ca1; }
.pair-authoring-link { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#6f54c8; }
.pair-authoring-link span { width:52px; height:52px; display:grid; place-items:center; border-radius:18px; background:#eee8ff; font-size:1.55rem; font-weight:950; box-shadow:0 8px 20px rgba(91,62,176,.12); }
.pair-authoring-link small { font-size:.62rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.pair-authoring-grid-bulk { margin:4px 0 14px; grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr); }
.pair-authoring-grid-bulk .pair-authoring-card { padding:15px; border-radius:17px; }
.pair-authoring-grid-bulk .pair-authoring-card textarea { width:100%; min-height:90px; padding:11px; border:1px solid #d8d0e8; border-radius:12px; resize:vertical; font:inherit; color:#352f40; background:#fff; }

.template-preview-note { display:flex; align-items:flex-start; gap:12px; padding:15px 17px; margin-top:18px; border:1px solid #d9d0ef; border-radius:16px; background:#faf8ff; }
.template-preview-note > span { font-size:1.45rem; }
.template-preview-note strong,.template-preview-note p { display:block; }
.template-preview-note p { margin:3px 0 0; color:#746c80; font-size:.82rem; }

.unjumble-authoring-section { margin-top:18px; }
.unjumble-authoring-answer { display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:center; padding:18px; border:1px solid #e2c9db; border-radius:18px; background:linear-gradient(145deg,#fff6fb,#fff); }
.unjumble-authoring-answer > span { grid-row:1 / span 2; width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:#f8ddea; font-size:1.3rem; }
.unjumble-authoring-answer input { width:100%; min-width:0; padding:12px 13px; border:1px solid #dcbfd2; border-radius:12px; font:inherit; font-weight:800; color:#58324a; background:#fff; }
.unjumble-authoring-answer small { color:#806d79; }
.bulk-unjumble-answer { margin:12px 0; }

.builder-pair-preview { display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); gap:10px; align-items:stretch; margin-top:13px; }
.builder-pair-preview > div { padding:13px 14px; border:1px solid #ddd5ef; border-radius:15px; background:#faf8ff; }
.builder-pair-preview > div:last-child { border-color:#cce7ec; background:#f4fcfd; }
.builder-pair-preview > span { display:grid; place-items:center; color:#7253d5; font-size:1.25rem; font-weight:950; }
.builder-pair-preview small,.builder-pair-preview strong { display:block; }
.builder-pair-preview small { margin-bottom:4px; color:#80788c; font-size:.61rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.builder-pair-preview strong { color:#3f3750; }
.builder-unjumble-preview { display:inline-flex; flex-direction:column; gap:2px; margin-top:9px; padding:9px 12px; border:1px solid #ead0df; border-radius:12px; background:#fff7fb; }
.builder-unjumble-preview small { color:#8b7180; font-size:.62rem; font-weight:850; text-transform:uppercase; }
.builder-unjumble-preview strong { color:#6e3457; }
.bulk-option-title { margin:12px 0 8px; }

.template-authoring-matching_pairs .studio-media-zone { margin-top:18px; }
.template-authoring-group_sort .studio-answer-tile .answer-text-input { font-weight:850; }
.template-authoring-find_match .studio-answer-tile { border-radius:20px; }

@media (max-width: 760px) {
    .pair-authoring-grid,.pair-authoring-grid-bulk { grid-template-columns:1fr; gap:10px; }
    .pair-authoring-link { min-height:40px; flex-direction:row; }
    .pair-authoring-link span { width:42px; height:42px; border-radius:14px; transform:rotate(90deg); }
    .pair-authoring-card { padding:16px; border-radius:18px; }
    .pair-authoring-card textarea { min-height:105px; }
    .builder-pair-preview { grid-template-columns:1fr; }
    .builder-pair-preview > span { min-height:24px; transform:rotate(90deg); }
    .template-format-lock { min-width:0; }
}

/* Digitera V4.7.0 - editor soal khusus per template */
.template-correct-answer-card {
    position: relative;
    padding: 18px;
    border: 2px solid #b9e7c8;
    border-radius: 18px;
    background: linear-gradient(145deg,#f2fff7,#fff);
    box-shadow: 0 10px 24px rgba(25,135,84,.07);
}
.template-correct-answer-card label,
.template-distractor-grid label,
.missing-sentence-builder label { display:grid; gap:7px; font-weight:850; color:#443c50; }
.template-correct-answer-card input,
.template-distractor-grid input,
.missing-sentence-builder textarea {
    width:100%;
    border:1px solid #d9d2e4;
    border-radius:12px;
    padding:12px 13px;
    background:#fff;
    color:#352f40;
    font:inherit;
}
.template-answer-status {
    display:inline-flex;
    margin-bottom:10px;
    padding:5px 9px;
    border-radius:999px;
    background:#daf7e4;
    color:#167441;
    font-size:.7rem;
    font-weight:950;
    letter-spacing:.04em;
}
.template-distractor-block { margin-top:14px; padding:17px; border:1px solid #e2dceb; border-radius:18px; background:#fbfaff; }
.template-distractor-block > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.template-distractor-block small { color:#786f85; }
.template-distractor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.template-distractor-grid label span { font-size:.78rem; color:#71687d; }
.missing-authoring-shell { padding:20px; border:1px solid #eadfbf; border-radius:22px; background:linear-gradient(145deg,#fffdf4,#fff); }
.missing-sentence-builder { display:grid; grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr); gap:14px; align-items:center; }
.missing-sentence-builder textarea { min-height:105px; resize:vertical; }
.missing-blank-preview { display:grid; place-items:center; gap:5px; min-height:105px; padding:14px; border:2px dashed #e2bd56; border-radius:16px; background:#fff8da; color:#855f00; text-align:center; }
.missing-blank-preview span { font-size:1.35rem; font-weight:950; letter-spacing:.08em; }
.missing-blank-preview small { font-size:.68rem; text-transform:uppercase; font-weight:850; letter-spacing:.05em; }
.bulk-template-keyed { margin-top:12px; }
.bulk-missing-authoring { padding:14px; border-radius:17px; }
.bulk-missing-authoring .missing-sentence-builder { grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr); }
.bulk-missing-authoring .missing-sentence-builder textarea { min-height:78px; }
.bulk-missing-authoring .missing-blank-preview { min-height:78px; padding:8px; }
.game-missing-sentence-full { display:grid; gap:10px; margin:16px 0 22px; }
.game-missing-sentence-full > span { color:#786f85; font-size:.84rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.game-missing-sentence-full > strong { display:block; font-size:clamp(1.25rem,3vw,2rem); line-height:1.45; color:#30283c; }
.game-inline-blank { display:inline-block; min-width:110px; padding:0 10px 4px; border-bottom:4px solid #7652dd; color:#7652dd; text-align:center; letter-spacing:.06em; }
@media (max-width: 760px) {
    .template-distractor-grid { grid-template-columns:1fr; }
    .template-distractor-block > div:first-child { align-items:flex-start; flex-direction:column; gap:3px; }
    .missing-sentence-builder,.bulk-missing-authoring .missing-sentence-builder { grid-template-columns:1fr; }
    .missing-blank-preview,.bulk-missing-authoring .missing-blank-preview { min-height:68px; }
}
.builder-template-options { margin-top:14px; padding:14px; border:1px solid #e5deee; border-radius:15px; background:#fbfaff; }
.builder-template-options > small { display:block; margin-bottom:9px; color:#776e83; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.builder-template-options > div { display:flex; flex-wrap:wrap; gap:8px; }
.builder-template-options span { display:inline-flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid #e1d9eb; border-radius:11px; background:#fff; color:#4c4458; }
.builder-template-options span b { color:#7c7188; font-size:.68rem; text-transform:uppercase; }
.builder-template-options span.is-correct { border-color:#b7e6c7; background:#f0fff5; color:#176b3c; }
.builder-template-options span.is-correct b { color:#168047; }

/* Digitera V4.7.1 - Quiz Tim + countdown ala game show */
.teacher-team-link { position:relative; }
.teacher-new-badge { margin-left:auto; padding:3px 6px; border-radius:999px; background:#f7c948; color:#342400; font-size:.56rem; font-weight:950; letter-spacing:.05em; }
.btn-team { border-color:#d7cdf7; background:#f5f0ff; color:#6542cf; }
.btn-team:hover { background:#ece4ff; color:#5836c6; }
.quiz-mode-pill { display:inline-flex; align-items:center; justify-content:center; align-self:center; padding:7px 10px; border-radius:999px; font-size:.74rem; font-weight:900; white-space:nowrap; }
.quiz-mode-pill.is-team { background:#e7dcff; color:#5d35c8; }
.quiz-mode-pill.is-individual { background:#eef2f6; color:#505968; }
.team-template-banner { display:flex; align-items:center; gap:14px; margin:0 0 22px; padding:17px 19px; border:1px solid #d8ccff; border-radius:19px; background:linear-gradient(135deg,#f2edff,#fff); box-shadow:0 12px 30px rgba(101,66,207,.08); }
.team-template-banner > span { display:grid; place-items:center; width:50px; height:50px; flex:0 0 auto; border-radius:16px; background:#6f4ad8; font-size:1.45rem; }
.team-template-banner strong,.team-template-banner p { display:block; margin:0; }
.team-template-banner p { margin-top:3px; color:#6e667a; }
.team-quiz-settings { display:grid; grid-template-columns:1fr minmax(220px,310px); gap:18px; align-items:end; margin:4px 0 18px; padding:18px; border:1px solid #dcd2f7; border-radius:18px; background:linear-gradient(135deg,#f9f6ff,#fff); }
.team-quiz-settings > div { display:flex; align-items:flex-start; gap:12px; }
.team-quiz-settings p { margin:3px 0 0; color:#746b80; }
.team-quiz-settings label { display:grid; gap:7px; font-weight:850; }
.team-setting-icon { display:grid; place-items:center; width:44px; height:44px; flex:0 0 auto; border-radius:14px; background:#6f4ad8; font-size:1.25rem; }
.quiz-card-mini-badges,.student-game-badges { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.quiz-mode-mini,.student-team-mode-badge { display:inline-flex; align-items:center; padding:5px 8px; border-radius:999px; background:#ece5ff; color:#5a39be; font-size:.7rem; font-weight:900; }
.student-team-mode-badge { background:#3f287f; color:#fff; }

.team-join-badge { display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:13px 14px; border:1px solid #d8cdf7; border-radius:15px; background:#f7f3ff; }
.team-join-badge > span { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:#6d47d5; font-size:1.15rem; }
.team-join-badge strong,.team-join-badge small { display:block; }
.team-join-badge small { margin-top:2px; color:#766d82; }
.quiz-start-card textarea#team_members { min-height:120px; }
.quiz-game-header-actions { display:flex; align-items:center; gap:10px; }
.team-live-pill { min-width:105px; padding:8px 13px; border:1px solid #e1d9ff; border-radius:14px; background:#f5f0ff; text-align:center; transition:.22s ease; }
.team-live-pill span,.team-live-pill strong { display:block; }
.team-live-pill span { color:#72668c; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.team-live-pill strong { margin-top:1px; color:#603bc5; font-size:1.12rem; }
.team-live-pill.is-pulse { transform:scale(1.08); box-shadow:0 0 0 6px rgba(111,74,216,.12); }

body.game-countdown-open { overflow:hidden; }
.game-countdown-overlay { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:24px; overflow:hidden; background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.22),transparent 22%),radial-gradient(circle at 82% 72%,rgba(255,201,72,.22),transparent 24%),linear-gradient(145deg,#452596,#7953e7 55%,#5a36c8); opacity:1; transition:opacity .32s ease,transform .32s ease; }
.game-countdown-overlay::before,.game-countdown-overlay::after { content:""; position:absolute; width:36vw; height:36vw; min-width:280px; min-height:280px; border:1px solid rgba(255,255,255,.16); border-radius:50%; animation:digiteraCountdownOrbit 8s linear infinite; }
.game-countdown-overlay::before { top:-16vw; right:-8vw; }
.game-countdown-overlay::after { bottom:-18vw; left:-10vw; animation-direction:reverse; animation-duration:11s; }
.game-countdown-overlay.is-leaving { opacity:0; transform:scale(1.04); }
.game-countdown-card { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; width:min(560px,100%); text-align:center; color:#fff; }
.game-countdown-card.is-pop { animation:digiteraCountdownPop .55s cubic-bezier(.2,.85,.25,1.2); }
.game-countdown-kicker { display:inline-flex; min-height:28px; align-items:center; justify-content:center; padding:6px 12px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(255,255,255,.12); font-size:.76rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(8px); }
.game-countdown-value { margin-top:18px; font-size:clamp(3.2rem,13vw,8.5rem); line-height:.95; letter-spacing:-.06em; text-shadow:0 18px 45px rgba(36,18,87,.34); }
.game-countdown-sub { margin-top:18px; color:#eee8ff; font-size:clamp(.95rem,2.5vw,1.25rem); font-weight:750; }
.game-countdown-overlay[data-stage="ready"] .game-countdown-value,.game-countdown-overlay[data-stage="ready2"] .game-countdown-value { font-size:clamp(2.7rem,8vw,5.8rem); }
.game-countdown-overlay[data-stage="count"] .game-countdown-value { width:clamp(130px,28vw,220px); aspect-ratio:1; display:grid; place-items:center; border:8px solid rgba(255,255,255,.24); border-radius:50%; background:rgba(255,255,255,.13); box-shadow:0 24px 60px rgba(27,13,74,.28),inset 0 0 0 10px rgba(255,255,255,.06); }
.game-countdown-overlay[data-stage="go"] { background:radial-gradient(circle at center,rgba(255,255,255,.2),transparent 28%),linear-gradient(145deg,#1f9d68,#39c882); }
.game-countdown-overlay[data-stage="go"] .game-countdown-value { font-size:clamp(3.7rem,13vw,8rem); letter-spacing:.02em; }
.game-countdown-confetti i { position:absolute; width:12px; height:28px; border-radius:4px; background:#ffd457; opacity:.85; animation:digiteraConfetti 2.4s ease-in-out infinite; }
.game-countdown-confetti i:nth-child(1){left:12%;top:20%;transform:rotate(18deg)}
.game-countdown-confetti i:nth-child(2){left:24%;bottom:16%;background:#70e4ff;animation-delay:.3s}
.game-countdown-confetti i:nth-child(3){right:16%;top:18%;background:#ff8fb6;animation-delay:.6s}
.game-countdown-confetti i:nth-child(4){right:27%;bottom:20%;background:#9cf08f;animation-delay:.9s}
.game-countdown-confetti i:nth-child(5){left:48%;top:8%;background:#fff;animation-delay:.45s}
.game-countdown-confetti i:nth-child(6){right:7%;top:52%;background:#ffb05f;animation-delay:1.1s}
@keyframes digiteraCountdownPop { 0%{opacity:0;transform:scale(.72) translateY(18px)} 70%{opacity:1;transform:scale(1.06) translateY(0)} 100%{transform:scale(1)} }
@keyframes digiteraCountdownOrbit { to{transform:rotate(360deg)} }
@keyframes digiteraConfetti { 0%,100%{transform:translateY(-8px) rotate(0);opacity:.45} 50%{transform:translateY(18px) rotate(130deg);opacity:1} }

.result-team-members { display:grid; gap:4px; margin:14px auto 4px; padding:13px 16px; max-width:560px; border:1px solid #ddd3f8; border-radius:15px; background:#f8f5ff; }
.result-team-members strong { color:#5637b3; }
.result-team-members span { color:#6e6678; font-size:.9rem; }
.result-team-members b { margin-top:4px; color:#3d2a75; }
.team-result-leaderboard { margin:22px 0 8px; padding:17px; border:1px solid #ded5f8; border-radius:20px; background:linear-gradient(145deg,#f7f3ff,#fff); text-align:left; }
.team-leaderboard-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.team-leaderboard-head > span { display:grid; place-items:center; width:44px; height:44px; flex:0 0 auto; border-radius:14px; background:#f5ca4b; font-size:1.25rem; }
.team-leaderboard-head strong,.team-leaderboard-head small { display:block; }
.team-leaderboard-head small { color:#746c7e; }
.team-leaderboard-list { display:grid; gap:8px; }
.team-leaderboard-row { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid #ebe5f5; border-radius:13px; background:#fff; }
.team-leaderboard-row.is-current { border-color:#9f87e8; background:#f3efff; box-shadow:0 8px 22px rgba(94,59,197,.1); }
.team-leaderboard-row > div strong,.team-leaderboard-row > div small { display:block; }
.team-leaderboard-row > div small { overflow:hidden; color:#7c7485; font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }
.team-rank { font-weight:950; color:#6b46d4; }
.teacher-team-leaderboard { margin-bottom:18px; }
.teacher-team-leaderboard .team-leaderboard-head h2,.teacher-team-leaderboard .team-leaderboard-head p { margin:0; }
.teacher-team-leaderboard .team-leaderboard-head p { color:#736b7c; }
.teacher-podium { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.teacher-podium-item { display:grid; gap:4px; padding:16px; border:1px solid #e3dcee; border-radius:17px; background:#fff; text-align:center; }
.teacher-podium-item > span { font-size:.75rem; font-weight:950; color:#6c48cd; }
.teacher-podium-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.teacher-podium-item b { font-size:1.45rem; color:#4b347e; }
.teacher-podium-item.rank-1 { background:linear-gradient(145deg,#fff9db,#fff); border-color:#f2d66d; transform:translateY(-5px); }

@media (max-width:760px){
    .team-quiz-settings { grid-template-columns:1fr; }
    .team-template-banner { align-items:flex-start; }
    .quiz-game-header-actions { align-items:stretch; gap:7px; }
    .team-live-pill,.game-timer-pill { min-width:0; }
    .game-countdown-overlay { padding:18px; }
    .game-countdown-sub { max-width:300px; }
    .teacher-podium { grid-template-columns:1fr; }
    .teacher-podium-item.rank-1 { transform:none; }
    .team-leaderboard-row { grid-template-columns:38px minmax(0,1fr) auto; padding:9px 10px; }
}

/* =========================================================
   Digitera V4.7.2 — Modern menu icons + PPT-style Home Motion
   ========================================================= */

/* Duotone icon language used by every navigation surface. */
.icon-fill { fill: currentColor !important; stroke: none !important; opacity: .15; }
.icon-line { fill: none !important; stroke: currentColor !important; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-spark { stroke-width: 1.55 !important; }

.nav-menu-icon,
.student-desktop-nav-icon,
.btn-svg-icon,
.home-mini-icon,
.student-card-type-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    line-height: 0;
}
.nav-menu-icon { width: 18px; height: 18px; }
.nav-menu-icon svg { width: 17px; height: 17px; }
.nav > a:not(.btn),
.nav .nav-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.nav > a:not(.btn) .nav-menu-icon {
    color: #7b6fa3;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), color .2s ease;
}
.nav > a:not(.btn):hover .nav-menu-icon,
.nav > a:not(.btn).active .nav-menu-icon {
    color: var(--primary);
    transform: translateY(-1px) scale(1.08);
}
.nav-home-link .nav-menu-icon {
    width: 25px;
    height: 25px;
    margin-right: -2px;
    border-radius: 9px;
    color: #7047eb !important;
    background: #f0ebff;
}
.nav-home-link.active .nav-menu-icon {
    color: #fff !important;
    background: linear-gradient(135deg,#7047eb,#a75ce8);
    box-shadow: 0 7px 16px rgba(112,71,235,.25);
}
.nav-icon-btn .nav-menu-icon { width: 16px; height: 16px; }
.nav-icon-btn .nav-menu-icon svg { width: 15px; height: 15px; }

/* Teacher sidebar icons become compact app tiles instead of plain line glyphs. */
.teacher-side-icon {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    border-radius: 9px;
    color: #b9c3d0;
    background: rgba(255,255,255,.055);
    transition: transform .2s cubic-bezier(.2,.82,.2,1), background .2s ease, color .2s ease, box-shadow .2s ease;
}
.teacher-side-icon svg { width: 18px; height: 18px; }
.teacher-side-link:hover .teacher-side-icon,
.teacher-side-group:hover .teacher-side-icon,
.teacher-side-submenu a:hover .teacher-side-icon {
    color: #fff;
    background: rgba(255,255,255,.11);
    transform: translateY(-1px) scale(1.06);
}
.teacher-side-link.active .teacher-side-icon,
.teacher-side-submenu a.active .teacher-side-icon {
    color: #fff;
    background: rgba(255,255,255,.17);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.teacher-side-submenu a .teacher-side-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 8px;
}
.teacher-side-submenu a .teacher-side-icon svg { width: 16px; height: 16px; }
.teacher-side-logout {
    display: grid;
    place-items: center;
}
.teacher-side-logout svg { width: 18px; height: 18px; }
.teacher-side-logout .icon-fill { opacity: .10; }

/* Student desktop navigation also uses the same icon family. */
.student-desktop-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform .18s ease, color .18s ease, background .18s ease;
}
.student-desktop-nav-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    color: #8579a0;
    background: #f7f4fc;
    transition: .18s ease;
}
.student-desktop-nav-icon svg { width: 16px; height: 16px; }
.student-desktop-nav a:hover .student-desktop-nav-icon,
.student-desktop-nav a.active .student-desktop-nav-icon {
    color: #fff;
    background: linear-gradient(135deg,#7047eb,#a75ce8);
    box-shadow: 0 6px 14px rgba(112,71,235,.20);
    transform: translateY(-1px) scale(1.06);
}
.student-desktop-nav .student-nav-home .student-desktop-nav-icon {
    width: 29px;
    height: 29px;
    border-radius: 10px;
}
.student-top-exit svg,
.student-sheet-grid svg { overflow: visible; }

/* Student bottom bar: stronger, friendlier icon tiles with a special Home treatment. */
@media (max-width: 850px) {
    .student-nav-icon {
        width: 34px;
        height: 34px;
        border: 1px solid rgba(112,71,235,.07);
        border-radius: 12px;
        color: #81798f;
        background: #faf8ff;
        box-shadow: 0 3px 10px rgba(74,50,130,.04);
    }
    .student-nav-icon svg { width: 21px; height: 21px; }
    .student-bottom-nav a:hover .student-nav-icon,
    .student-bottom-nav button:hover .student-nav-icon {
        transform: translateY(-2px) scale(1.04);
    }
    .student-bottom-nav a.active .student-nav-icon,
    .student-bottom-nav button.active .student-nav-icon,
    .student-bottom-nav a:active .student-nav-icon,
    .student-bottom-nav button:active .student-nav-icon {
        border-color: transparent;
    }
    .student-bottom-nav .student-nav-home .student-nav-icon {
        width: 39px;
        height: 39px;
        margin-top: -6px;
        border-radius: 14px;
        color: #7047eb;
        background: linear-gradient(145deg,#f5f0ff,#fff);
        box-shadow: 0 7px 18px rgba(84,55,159,.12);
    }
    .student-bottom-nav .student-nav-home.active .student-nav-icon {
        color: #fff;
        background: linear-gradient(145deg,#7047eb,#a65ce8);
        box-shadow: 0 12px 24px rgba(112,71,235,.32), 0 0 0 5px rgba(112,71,235,.08);
        animation: digiteraHomeNavPop .52s cubic-bezier(.18,.89,.32,1.28);
    }
    .student-bottom-nav .student-nav-home.active .icon-spark {
        animation: digiteraIconSpark 1.6s ease-in-out infinite;
        transform-origin: center;
    }
}
@keyframes digiteraHomeNavPop {
    0% { transform: translateY(8px) scale(.76); }
    65% { transform: translateY(-4px) scale(1.10); }
    100% { transform: translateY(-2px) scale(1); }
}
@keyframes digiteraIconSpark {
    0%,100% { opacity: .45; transform: scale(.8) rotate(0); }
    50% { opacity: 1; transform: scale(1.18) rotate(18deg); }
}

/* Homepage icon redesign. */
.home-svg-feature-icon {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    color: #fff;
}
.home-svg-feature-icon svg { width: 28px; height: 28px; overflow: visible; }
.home-svg-feature-icon .icon-fill { opacity: .22; }
.home-mini-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: #fff;
    background: rgba(65,30,148,.34);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.home-mini-icon svg { width: 19px; height: 19px; }
.home-preview-access {
    display: flex;
    align-items: center;
    gap: 11px;
}
.home-preview-access > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.home-preview-access small { color: rgba(255,255,255,.84); font-size: .78rem; }
.home-preview-list span { display: flex; align-items: center; gap: 9px; }
.home-preview-list .home-mini-icon { width: 29px; height: 29px; border-radius: 9px; }
.home-preview-list .home-mini-icon svg { width: 16px; height: 16px; }

/* V4.9.8 — darker homepage hero preview for stronger text contrast */
.home-preview-card {
    border-color: rgba(255,255,255,.20);
}
.home-preview-card .preview-head strong,
.home-preview-card .preview-stats strong,
.home-preview-card .home-preview-access strong,
.home-preview-card .preview-list span {
    color: #ffffff;
}
.home-preview-card .preview-head small {
    color: rgba(255,255,255,.88);
}
.home-preview-card .preview-stats div,
.home-preview-card .home-preview-access,
.home-preview-card .preview-list span {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.home-feature-card { overflow: hidden; }
.home-feature-card .home-svg-feature-icon { transform-origin: center bottom; }
.home-feature-card:hover .home-svg-feature-icon {
    transform: translateY(-3px) rotate(-3deg) scale(1.06);
}

/* Student home uses the upgraded SVG language too. */
.btn-svg-icon { width: 19px; height: 19px; }
.btn-svg-icon svg { width: 18px; height: 18px; }
.student-subject-icon .icon-fill { opacity: .20; }
.student-quiz-card-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.student-card-type-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: #7047eb;
    background: #f0ebff;
}
.student-card-type-icon svg { width: 19px; height: 19px; }
.student-task-svg { color: #fff; font-size: 0 !important; }
.student-task-svg svg { width: 22px; height: 22px; }
.student-task-svg .icon-fill { opacity: .20; }

/* PowerPoint-like reveal: text rises, icons pop, cards float in.
   Classes are added by JS only, so content stays visible if JS fails. */
.digitera-reveal {
    opacity: 0;
    will-change: transform, opacity, filter;
}
.digitera-reveal[data-motion-kind="text"] {
    transform: translate3d(0,24px,0) scale(.985);
    filter: blur(3px);
}
.digitera-reveal[data-motion-kind="icon"] {
    transform: translate3d(0,20px,0) scale(.62) rotate(-6deg);
    filter: blur(2px);
}
.digitera-reveal[data-motion-kind="card"] {
    transform: translate3d(0,30px,0) scale(.94);
    filter: blur(3px);
}
.digitera-reveal[data-motion-kind="action"] {
    transform: translate3d(-18px,12px,0) scale(.96);
}
.digitera-reveal.is-visible[data-motion-kind="text"] {
    animation: digiteraPptText .72s cubic-bezier(.16,.84,.26,1.06) both;
    animation-delay: var(--motion-delay,0ms);
}
.digitera-reveal.is-visible[data-motion-kind="icon"] {
    animation: digiteraPptIcon .72s cubic-bezier(.18,.89,.32,1.28) both;
    animation-delay: var(--motion-delay,0ms);
}
.digitera-reveal.is-visible[data-motion-kind="card"] {
    animation: digiteraPptCard .78s cubic-bezier(.16,.84,.26,1.04) both;
    animation-delay: var(--motion-delay,0ms);
}
.digitera-reveal.is-visible[data-motion-kind="action"] {
    animation: digiteraPptAction .68s cubic-bezier(.16,.84,.26,1.04) both;
    animation-delay: var(--motion-delay,0ms);
}
@keyframes digiteraPptText {
    0% { opacity:0; transform:translate3d(0,24px,0) scale(.985); filter:blur(3px); }
    72% { opacity:1; transform:translate3d(0,-3px,0) scale(1.006); filter:blur(0); }
    100% { opacity:1; transform:none; filter:blur(0); }
}
@keyframes digiteraPptIcon {
    0% { opacity:0; transform:translate3d(0,20px,0) scale(.62) rotate(-6deg); filter:blur(2px); }
    65% { opacity:1; transform:translate3d(0,-5px,0) scale(1.10) rotate(2deg); filter:blur(0); }
    100% { opacity:1; transform:none; filter:blur(0); }
}
@keyframes digiteraPptCard {
    0% { opacity:0; transform:translate3d(0,30px,0) scale(.94); filter:blur(3px); }
    68% { opacity:1; transform:translate3d(0,-5px,0) scale(1.012); filter:blur(0); }
    100% { opacity:1; transform:none; filter:blur(0); }
}
@keyframes digiteraPptAction {
    0% { opacity:0; transform:translate3d(-18px,12px,0) scale(.96); }
    70% { opacity:1; transform:translate3d(3px,-1px,0) scale(1.01); }
    100% { opacity:1; transform:none; }
}

/* Subtle floating motion after the intro, similar to animated PPT objects. */
.page-home .home-preview-card.is-visible,
.page-learn .teacher-public-card.is-visible {
    animation-name: digiteraPptCard, digiteraGentleFloat;
    animation-duration: .78s, 5.8s;
    animation-delay: var(--motion-delay,0ms), calc(var(--motion-delay,0ms) + 1s);
    animation-timing-function: cubic-bezier(.16,.84,.26,1.04), ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
}
@keyframes digiteraGentleFloat {
    0%,100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

@media (max-width: 620px) {
    .nav > a:not(.btn), .nav .btn { gap: 10px; }
    .nav-menu-icon { width: 27px; height: 27px; border-radius: 9px; background: #f5f1ff; color: #7047eb; }
    .nav-menu-icon svg { width: 17px; height: 17px; }
    .home-svg-feature-icon { width: 50px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
    .digitera-reveal,
    .digitera-reveal.is-visible,
    .student-bottom-nav .student-nav-home.active .student-nav-icon,
    .student-bottom-nav .student-nav-home.active .icon-spark,
    .page-home .home-preview-card.is-visible,
    .page-learn .teacher-public-card.is-visible {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        translate: none !important;
    }
}


/* =========================================================
   Digitera V4.7.3 — Modern login role icons
   ========================================================= */
.login-role-card {
    position: relative;
    overflow: hidden;
    padding-top: 30px;
}
.login-role-card::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    top: -78px;
    right: -68px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(112,71,235,.12), transparent 68%);
    pointer-events: none;
}
.login-role-icon,
.login-auth-icon {
    display: grid !important;
    place-items: center;
    line-height: 0;
    color: #fff;
    background: linear-gradient(145deg, #7047eb, #9f63e9);
    box-shadow: 0 16px 34px rgba(112,71,235,.24);
}
.login-role-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 16px !important;
    border-radius: 24px;
    font-size: 0 !important;
    transition: transform .25s cubic-bezier(.2,.9,.25,1.25), box-shadow .25s ease;
}
.login-role-icon svg {
    width: 42px;
    height: 42px;
}
.login-role-teacher .login-role-icon {
    background: linear-gradient(145deg, #7047eb, #a75ce8);
}
.login-role-student .login-role-icon {
    background: linear-gradient(145deg, #3388ff, #55b8ff);
    box-shadow: 0 16px 34px rgba(51,136,255,.22);
}
.login-role-card:hover .login-role-icon {
    transform: translateY(-5px) scale(1.07) rotate(-2deg);
    box-shadow: 0 22px 40px rgba(112,71,235,.30);
}
.login-role-student:hover .login-role-icon {
    transform: translateY(-5px) scale(1.07) rotate(2deg);
    box-shadow: 0 22px 40px rgba(51,136,255,.29);
}
.login-role-card .login-role-icon .icon-fill,
.login-auth-icon .icon-fill {
    opacity: .22;
}
.login-role-card .login-role-icon .icon-line,
.login-auth-icon .icon-line {
    stroke-width: 1.7;
}
.login-auth-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 14px;
    border-radius: 25px;
}
.login-auth-icon svg {
    width: 44px;
    height: 44px;
}
.teacher-login-card {
    text-align: center;
}
.login-auth-icon-teacher {
    background: linear-gradient(145deg, #7047eb, #a75ce8);
}
.login-auth-icon-student,
.student-login-card .student-login-icon.login-auth-icon-student {
    background: linear-gradient(145deg, #3388ff, #55b8ff);
    box-shadow: 0 16px 35px rgba(51,136,255,.26);
    font-size: 0;
}
.student-login-card .student-login-icon.login-auth-icon-student svg {
    width: 44px;
    height: 44px;
}
.teacher-login-card .eyebrow,
.student-login-card .eyebrow {
    margin-bottom: 10px;
}
@media (max-width: 620px) {
    .login-role-icon {
        width: 70px;
        height: 70px;
        border-radius: 22px;
    }
    .login-role-icon svg { width: 38px; height: 38px; }
    .login-auth-icon,
    .student-login-card .student-login-icon.login-auth-icon-student {
        width: 72px;
        height: 72px;
        border-radius: 22px;
    }
    .login-auth-icon svg,
    .student-login-card .student-login-icon.login-auth-icon-student svg {
        width: 40px;
        height: 40px;
    }
}


/* =============================================================
   Digitera V4.7.4 — Compact mobile teacher dashboard stats grid
   Keep summary cards in a clean two-column app-style grid even
   on narrow phones instead of falling back to one long column.
   ============================================================= */
@media (max-width: 620px) {
    .role-teacher.page-dashboard .dashboard-stats,
    .role-teacher.page-dashboard .stats-8.dashboard-stats,
    .page-dashboard .dashboard-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 1fr;
        gap: 10px !important;
        margin: -34px 4px 20px !important;
    }

    .role-teacher.page-dashboard .dashboard-stats .stat {
        min-width: 0;
        min-height: 112px !important;
        height: 100%;
        padding: 12px !important;
        border-radius: 17px !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .role-teacher.page-dashboard .dashboard-stats .stat-icon {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
        margin: 0 0 9px !important;
        border-radius: 11px !important;
    }

    .role-teacher.page-dashboard .dashboard-stats .stat-icon svg {
        width: 19px !important;
        height: 19px !important;
    }

    .role-teacher.page-dashboard .dashboard-stats .stat-label {
        margin: 0 !important;
        min-height: 2.1em;
        font-size: .73rem !important;
        font-weight: 750;
        line-height: 1.18;
        overflow-wrap: anywhere;
    }

    .role-teacher.page-dashboard .dashboard-stats .stat strong {
        margin-top: 4px !important;
        font-size: 1.36rem !important;
        line-height: 1;
    }
}

@media (max-width: 390px) {
    .role-teacher.page-dashboard .dashboard-stats,
    .role-teacher.page-dashboard .stats-8.dashboard-stats,
    .page-dashboard .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-inline: 0 !important;
    }

    .role-teacher.page-dashboard .dashboard-stats .stat {
        min-height: 108px !important;
        padding: 11px !important;
        border-radius: 16px !important;
    }

    .role-teacher.page-dashboard .dashboard-stats .stat-icon {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
        margin-bottom: 8px !important;
    }

    .role-teacher.page-dashboard .dashboard-stats .stat-label {
        min-height: 2em;
        font-size: .69rem !important;
    }

    .role-teacher.page-dashboard .dashboard-stats .stat strong {
        font-size: 1.28rem !important;
    }
}

@media (max-width: 330px) {
    .role-teacher.page-dashboard .dashboard-stats {
        gap: 7px !important;
    }
    .role-teacher.page-dashboard .dashboard-stats .stat {
        padding: 10px !important;
    }
}

/* =========================================================
   Digitera V4.7.5 — PWA install experience
   ========================================================= */
.pwa-install-button {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 1250;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px 8px 9px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 18px;
    background: linear-gradient(135deg, #5f36e8 0%, #7c4df2 52%, #9c64ef 100%);
    color: #fff;
    box-shadow: 0 16px 38px rgba(91,55,221,.32), 0 5px 13px rgba(20,18,55,.14);
    cursor: pointer;
    font: inherit;
    text-align: left;
    opacity: 0;
    transform: translateY(14px) scale(.96);
    transition: opacity .22s ease, transform .22s ease, box-shadow .22s ease;
}
.pwa-install-button[hidden] { display: none !important; }
.pwa-install-button.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.pwa-install-button:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 20px 44px rgba(91,55,221,.38), 0 7px 16px rgba(20,18,55,.15); }
.pwa-install-button:active { transform: translateY(0) scale(.98); }
.pwa-install-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: rgba(255,255,255,.16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.pwa-install-icon svg { width: 22px; height: 22px; }
.pwa-install-icon .icon-fill { fill: rgba(255,255,255,.22); }
.pwa-install-icon .icon-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pwa-install-copy { display: flex; flex-direction: column; line-height: 1.08; }
.pwa-install-copy strong { color: #fff; font-size: .88rem; white-space: nowrap; }
.pwa-install-copy small { margin-top: 4px; color: rgba(255,255,255,.82); font-size: .68rem; white-space: nowrap; }
.pwa-install-toast {
    position: fixed;
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 1300;
    width: min(430px, calc(100% - 32px));
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(24,26,40,.95);
    color: #fff;
    text-align: center;
    font-size: .86rem;
    font-weight: 700;
    box-shadow: 0 18px 46px rgba(15,23,42,.28);
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity .2s ease, transform .2s ease;
}
.pwa-install-toast[hidden] { display: none !important; }
.pwa-install-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.role-student .pwa-install-button { bottom: calc(92px + env(safe-area-inset-bottom)); }
.role-student .pwa-install-toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
@media (max-width: 640px) {
    .pwa-install-button { right: 14px; min-height: 48px; border-radius: 16px; padding: 7px 11px 7px 8px; }
    .pwa-install-icon { width: 34px; height: 34px; border-radius: 11px; }
    .pwa-install-copy strong { font-size: .8rem; }
    .pwa-install-copy small { font-size: .62rem; }
}
@media (display-mode: standalone) {
    .pwa-install-button { display: none !important; }
}

/* =========================================================
   Digitera V4.7.8 — Pembayaran + bukti transfer
   ========================================================= */
.teacher-subscription-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 7px 11px;
    border: 1px solid #e4dcff;
    border-radius: 13px;
    background: #f8f6ff;
    color: #5c3ad7;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.teacher-subscription-chip:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(95,64,205,.12); }
.teacher-subscription-chip-icon { width: 27px; height: 27px; display: grid; place-items: center; }
.teacher-subscription-chip-icon svg { width: 23px; height: 23px; }
.teacher-subscription-chip small,.teacher-subscription-chip strong { display: block; line-height: 1.15; }
.teacher-subscription-chip small { font-size: .69rem; color: #7f7399; font-weight: 700; }
.teacher-subscription-chip strong { margin-top: 2px; font-size: .78rem; color: #4f33bd; }
.teacher-subscription-chip.subscribed { border-color: #bce8d7; background: #effcf7; color: #11815d; }
.teacher-subscription-chip.subscribed strong { color: #0b684b; }
.teacher-subscription-chip.expired { border-color: #ffd0b5; background: #fff4eb; color: #b45309; animation: subscriptionPulse 2.4s ease-in-out infinite; }
.teacher-subscription-chip.expired strong { color: #9a3d05; }

.dashboard-subscription-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    margin: 24px 0 8px;
    padding: 18px 20px;
    border: 1px solid #ddd4ff;
    border-radius: 18px;
    background: linear-gradient(135deg,#fbfaff,#f4f0ff);
    box-shadow: 0 12px 30px rgba(71,51,139,.08);
}
.dashboard-subscription-banner.trial { border-color: #d9ceff; }
.dashboard-subscription-banner.subscribed { border-color: #c4eadc; background: linear-gradient(135deg,#f5fffb,#effbf6); }
.dashboard-subscription-banner.expired { border-color: #ffd5bb; background: linear-gradient(135deg,#fff9f4,#fff1e7); }
.dashboard-subscription-icon {
    width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
    background: #ece6ff; color: #7047eb;
}
.dashboard-subscription-banner.subscribed .dashboard-subscription-icon { background:#dff7ed; color:#0f8a65; }
.dashboard-subscription-banner.expired .dashboard-subscription-icon { background:#ffe6d2; color:#c15a0e; }
.dashboard-subscription-icon svg { width: 28px; height: 28px; }
.dashboard-subscription-banner small { display:block; font-weight:800; color:#83769e; }
.dashboard-subscription-banner strong { display:block; margin-top:2px; font-size:1.05rem; color:#322a43; }
.dashboard-subscription-banner p { margin:3px 0 0; color:#6f6680; font-size:.9rem; }

.subscription-modal-backdrop {
    position: fixed; inset: 0; z-index: 180; background: rgba(18,14,35,.56); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .18s ease;
}
.subscription-modal-backdrop.is-open { opacity: 1; }
.subscription-modal {
    position: fixed; z-index: 181; left: 50%; top: 50%; width: min(1000px, calc(100% - 32px)); max-height: min(88vh, 820px);
    overflow: auto; transform: translate(-50%,-46%) scale(.97); opacity: 0;
    border-radius: 24px; padding: 26px; background:#fff; border:1px solid #e8e3f3;
    box-shadow: 0 32px 100px rgba(18,14,35,.35); transition: .18s ease;
}
.subscription-modal.is-open { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.subscription-modal-open { overflow: hidden; }
.subscription-modal-close {
    position:absolute; top:15px; right:16px; width:38px; height:38px; border-radius:50%; border:1px solid #ebe7f2;
    background:#faf9fc; color:#51495f; font-size:1.45rem; cursor:pointer;
}
.subscription-modal-head { display:flex; align-items:flex-start; gap:15px; padding-right:38px; }
.subscription-modal-head h2 { margin:5px 0 5px; }
.subscription-modal-head p { margin:0; color:#746c82; max-width:760px; }
.subscription-modal-icon { width:54px; height:54px; flex:0 0 auto; border-radius:16px; display:grid; place-items:center; background:linear-gradient(145deg,#ece7ff,#f8f5ff); color:#7047eb; }
.subscription-modal-icon svg { width:30px; height:30px; }
.subscription-plan-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px; }
.subscription-plan-card {
    position:relative; min-width:0; padding:18px; border:1px solid #e8e3f1; border-radius:18px; background:#fff;
    box-shadow:0 8px 24px rgba(44,35,70,.05);
}
.subscription-plan-card.featured { border-color:#8f72f5; background:linear-gradient(180deg,#faf8ff,#f5f1ff); box-shadow:0 14px 38px rgba(112,71,235,.14); }
.subscription-plan-badge { display:inline-flex; min-height:25px; align-items:center; padding:4px 8px; border-radius:999px; background:#f1edff; color:#6945d8; font-size:.72rem; font-weight:800; }
.subscription-plan-card h3 { margin:14px 0 4px; font-size:1.08rem; }
.subscription-plan-price { display:block; margin-top:2px; font-size:1.6rem; line-height:1.15; color:#2e2740; }
.subscription-plan-card > small { color:#7b7388; }
.subscription-plan-card > p { min-height:42px; margin:12px 0 16px; color:#81788e; font-size:.82rem; }

.subscription-modal-payment { margin-top:18px; padding:15px; border:1px solid #ece7f4; border-radius:16px; background:#fcfbfe; }
.subscription-modal-payment-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
.subscription-modal-payment-head strong { color:#3d3450; }
.subscription-modal-payment-head span { max-width:620px; color:#7b7388; font-size:.82rem; text-align:right; }
.subscription-payment-method-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.subscription-payment-method { min-width:0; padding:12px; border:1px solid #e8e2f2; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(55,43,90,.04); }
.subscription-payment-method > div:first-child { display:flex; flex-direction:column; gap:1px; }
.subscription-payment-method > div:first-child strong { color:#352c45; font-size:.9rem; }
.subscription-payment-method > div:first-child small { color:#8b8297; font-size:.7rem; }
.subscription-payment-account { display:block; margin:9px 0 2px; color:#5e3ed0; font-weight:900; font-size:.96rem; letter-spacing:.01em; overflow-wrap:anywhere; }
.subscription-payment-holder { display:block; min-height:18px; color:#756c82; font-size:.72rem; }
.subscription-payment-method .btn { width:100%; margin-top:8px; padding:7px 8px; font-size:.75rem; }
.subscription-payment-method-grid-page { grid-template-columns:repeat(5,minmax(0,1fr)); margin:12px 0 14px; }
.subscription-payment-help > p { margin:7px 0 0; }
.subscription-modal-note { display:flex; gap:10px; margin-top:18px; padding:13px 15px; border-radius:13px; background:#f7f5fb; color:#716a7d; font-size:.86rem; }
.subscription-modal-note strong { white-space:nowrap; color:#453c57; }

.subscription-expired .teacher-app-main > .container:not(.flash) .stats,
.subscription-expired .teacher-app-main > .container:not(.flash) .dashboard-grid,
.subscription-expired .teacher-app-main > .container:not(.flash) .dashboard-subject-banner,
.subscription-expired .teacher-app-main > .container:not(.flash) .teacher-access-banner,
.subscription-expired .teacher-app-main > .container:not(.flash) .teacher-dashboard-welcome {
    filter: saturate(.55);
}
.subscription-expired .teacher-app-main a:not([href*="dashboard.php"]):not([href*="subscription.php"]):not([href*="logout.php"]) { cursor: not-allowed; }

.subscription-page { padding-bottom:20px; }
.subscription-page-head { align-items:center; }
.subscription-current-card { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px; margin-bottom:20px; border-radius:20px; border:1px solid #ded5ff; background:linear-gradient(135deg,#fbfaff,#f2edff); }
.subscription-current-card > div:first-child { display:flex; align-items:center; gap:15px; }
.subscription-current-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:17px; background:#e9e2ff; color:#7047eb; }
.subscription-current-icon svg { width:31px; height:31px; }
.subscription-current-card h2 { margin:2px 0 4px; }
.subscription-current-card p { margin:0; color:#726a80; }
.subscription-current-card.expired { border-color:#ffd1b4; background:linear-gradient(135deg,#fffaf6,#fff0e6); }
.subscription-current-card.expired .subscription-current-icon { background:#ffe2cc; color:#b84e08; }
.subscription-current-card.subscribed { border-color:#bee8d8; background:linear-gradient(135deg,#f7fffc,#eefaf6); }
.subscription-current-card.subscribed .subscription-current-icon { background:#dff6ed; color:#0f805f; }
.subscription-invoice-card { margin-bottom:20px; border-color:#d8cfff; }
.subscription-invoice-grid,.subscription-admin-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:14px 0; }
.subscription-invoice-grid > div,.subscription-admin-grid > div { padding:12px 13px; border-radius:12px; background:#f8f7fb; }
.subscription-invoice-grid span,.subscription-admin-grid span { display:block; color:#81798d; font-size:.78rem; }
.subscription-invoice-grid strong,.subscription-admin-grid strong { display:block; margin-top:3px; color:#342c43; }
.subscription-payment-help { margin-top:14px; padding:16px; border-radius:14px; background:#f6f3ff; color:#655a78; }
.subscription-payment-help ol { margin:8px 0 0 20px; padding:0; }
.subscription-payment-help li + li { margin-top:5px; }
.badge-pending { background:#fff4d8; color:#9a5a00; }
.badge-paid { background:#dcfce7; color:#166534; }
.badge-rejected { background:#fee2e2; color:#991b1b; }
.badge-cancelled { background:#f2f4f7; color:#475467; }

.subscription-admin-list { display:grid; gap:16px; margin-top:18px; }
.subscription-admin-card { padding:20px; }
.subscription-admin-main { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.subscription-admin-main h2 { margin:6px 0 2px; }
.subscription-admin-main p { margin:0; }
.subscription-admin-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; padding-top:15px; border-top:1px solid #ece8f2; }
.subscription-reject-form { display:flex; flex:1; min-width:280px; gap:8px; }
.subscription-reject-form input { min-width:180px; }
.subscription-order-note { margin:14px 0 0; padding:12px; background:#fff4f4; border-radius:10px; color:#8f3838; }

@keyframes subscriptionPulse { 0%,100%{box-shadow:0 0 0 rgba(220,106,32,0)} 50%{box-shadow:0 0 0 6px rgba(220,106,32,.08)} }

@media (max-width: 900px) {
    .teacher-subscription-chip span:last-child { display:none; }
    .teacher-subscription-chip { min-width:42px; padding:7px; justify-content:center; }
    .subscription-plan-grid { grid-template-columns:repeat(2,1fr); }
    .subscription-invoice-grid,.subscription-admin-grid { grid-template-columns:repeat(2,1fr); }
    .subscription-payment-method-grid,.subscription-payment-method-grid-page { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 620px) {
    .dashboard-subscription-banner { grid-template-columns:auto 1fr; padding:15px; gap:12px; }
    .dashboard-subscription-banner .btn { grid-column:1/-1; width:100%; }
    .dashboard-subscription-icon { width:46px; height:46px; }
    .subscription-modal { width:calc(100% - 18px); max-height:92vh; padding:20px 14px 18px; border-radius:21px; }
    .subscription-modal-head { gap:10px; padding-right:34px; }
    .subscription-modal-icon { width:46px; height:46px; border-radius:14px; }
    .subscription-modal-head h2 { font-size:1.25rem; }
    .subscription-plan-grid { grid-template-columns:1fr 1fr; gap:9px; }
    .subscription-plan-card { padding:13px; border-radius:15px; }
    .subscription-plan-price { font-size:1.25rem; }
    .subscription-plan-card > p { min-height:54px; font-size:.75rem; }
    .subscription-plan-card .btn { padding:9px 8px; font-size:.78rem; }
    .subscription-modal-note { flex-direction:column; gap:3px; }
    .subscription-modal-payment { padding:12px; }
    .subscription-modal-payment-head { flex-direction:column; gap:3px; }
    .subscription-modal-payment-head span { text-align:left; }
    .subscription-payment-method-grid,.subscription-payment-method-grid-page { grid-template-columns:1fr 1fr; gap:8px; }
    .subscription-payment-method { padding:10px; }
    .subscription-payment-account { font-size:.86rem; }
    .subscription-current-card { flex-direction:column; align-items:stretch; padding:16px; }
    .subscription-current-card > div:first-child { align-items:flex-start; }
    .subscription-invoice-grid,.subscription-admin-grid { grid-template-columns:1fr 1fr; }
    .subscription-admin-actions,.subscription-reject-form { flex-direction:column; }
    .subscription-reject-form { min-width:0; }
}

/* =========================================================
   Digitera V4.7.8 — Checkout pembayaran + upload bukti
   ========================================================= */
.badge-review { background:#e8f1ff; color:#175cd3; }
.badge-cancelled { background:#f2f4f7; color:#667085; }

.subscription-modal-payment-modern { background:linear-gradient(180deg,#fbfdff,#f6f9ff); border-color:#dce9fb; }
.subscription-modal-method-logo-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.subscription-modal-method-logo { min-width:0; display:flex; align-items:center; gap:8px; padding:9px; border:1px solid #e1e9f4; border-radius:13px; background:#fff; }
.subscription-modal-method-logo img { width:38px; height:38px; object-fit:contain; border-radius:9px; background:#fff; }
.subscription-modal-method-logo small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#536172; font-weight:800; }

.payment-app-page { max-width:1120px; }
.payment-checkout-shell { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:20px; margin-bottom:22px; align-items:start; }
.payment-summary-card,.payment-method-card,.payment-review-card { border-radius:24px; box-shadow:0 18px 50px rgba(48,63,91,.09); border-color:#dfe6ef; }
.payment-summary-card { position:sticky; top:92px; padding:22px; }
.payment-card-title { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding-bottom:16px; border-bottom:1px solid #e9edf3; }
.payment-card-title small { display:block; color:#7c8796; font-weight:700; }
.payment-card-title h2 { margin:2px 0 0; font-size:1.28rem; }
.payment-title-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; color:#1473e6; background:#eaf3ff; }
.payment-title-icon svg { width:26px; height:26px; }
.payment-summary-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; color:#5f6b79; border-bottom:1px solid #edf0f4; }
.payment-summary-row strong { color:#1f2937; }
.payment-summary-total { padding-top:17px; margin-top:2px; border-bottom:0; font-size:1.08rem; font-weight:800; }
.payment-summary-total strong { color:#1473e6; font-size:1.45rem; }
.payment-invoice-code { display:grid; grid-template-columns:1fr auto; gap:3px 10px; align-items:center; margin-top:13px; padding:13px; border-radius:14px; background:#f6f9fc; }
.payment-invoice-code span { grid-column:1; color:#7b8794; font-size:.76rem; }
.payment-invoice-code strong { grid-column:1; color:#334155; letter-spacing:.04em; }
.payment-invoice-code .btn { grid-row:1/3; grid-column:2; }

.payment-method-card { padding:22px; }
.payment-section-head h2 { margin:5px 0 3px; }
.payment-section-head p { margin:0 0 16px; color:#7a8593; }
.payment-method-selector { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.payment-method-option { position:relative; min-width:0; display:grid; grid-template-columns:58px 1fr auto; gap:12px; align-items:center; padding:13px; border:2px solid #dde4ec; border-radius:18px; background:#fff; cursor:pointer; transition:.18s ease; box-shadow:0 6px 18px rgba(36,51,74,.035); }
.payment-method-option:hover { transform:translateY(-1px); border-color:#b9d8f8; box-shadow:0 10px 22px rgba(28,105,187,.08); }
.payment-method-option.selected { border-color:#1782ed; background:#f4f9ff; box-shadow:0 0 0 4px rgba(23,130,237,.08),0 12px 26px rgba(23,130,237,.10); }
.payment-method-option input { position:absolute; opacity:0; pointer-events:none; }
.payment-method-logo { width:58px; height:50px; display:grid; place-items:center; overflow:hidden; border:1px solid #e6ebf1; border-radius:13px; background:#fff; }
.payment-method-logo img { width:100%; height:100%; object-fit:contain; }
.payment-method-copy { min-width:0; }
.payment-method-copy strong,.payment-method-copy small { display:block; }
.payment-method-copy strong { color:#1f2937; font-size:1rem; }
.payment-method-copy small { margin-top:2px; color:#8a95a3; font-size:.78rem; }
.payment-radio-ui { width:24px; height:24px; border:2px solid #cdd6e1; border-radius:50%; background:#fff; position:relative; transition:.18s ease; }
.payment-method-option.selected .payment-radio-ui { border-color:#1782ed; background:#1782ed; }
.payment-method-option.selected .payment-radio-ui::after { content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:.78rem; font-weight:900; }

.payment-transfer-panel { margin-top:18px; padding:18px; border:1px solid #b9dcfb; border-radius:20px; background:linear-gradient(145deg,#f7fbff,#edf6ff); }
.payment-transfer-brand { display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:13px; }
.payment-transfer-logo { width:64px; height:56px; display:grid; place-items:center; overflow:hidden; border-radius:14px; background:#fff; border:1px solid #dce8f4; }
.payment-transfer-logo img { width:100%; height:100%; object-fit:contain; }
.payment-transfer-brand small,.payment-transfer-info small,.payment-transfer-total small { display:block; color:#7d8998; }
.payment-transfer-brand strong { display:block; margin-top:2px; font-size:1.25rem; color:#1f2937; }
.payment-transfer-pill { padding:7px 13px; border-radius:999px; background:#ddebff; color:#176ac8; font-weight:900; font-size:.78rem; }
.payment-transfer-info,.payment-transfer-total { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 0; border-top:1px solid #dfeaf5; margin-top:15px; }
.payment-transfer-info strong { display:block; margin-top:3px; color:#1f2937; font-size:1.2rem; letter-spacing:.02em; }
.payment-transfer-info span { display:block; margin-top:2px; color:#637081; font-size:.84rem; }
.payment-transfer-total strong { display:block; margin-top:3px; color:#1473e6; font-size:1.4rem; }
.payment-transfer-panel > p { margin:0; color:#748294; font-size:.84rem; }

.payment-proof-upload { margin-top:18px; padding-top:18px; border-top:1px solid #e8edf3; }
.payment-proof-upload > div:first-child { display:flex; align-items:flex-start; gap:12px; }
.payment-upload-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:#eee9ff; color:#7047eb; flex:0 0 auto; }
.payment-upload-icon svg { width:25px; height:25px; }
.payment-proof-upload strong { color:#273142; }
.payment-proof-upload p { margin:3px 0 0; color:#7c8795; font-size:.82rem; }
.payment-proof-drop { margin-top:12px; min-height:150px; display:grid; place-items:center; overflow:hidden; border:2px dashed #cbd9e8; border-radius:18px; background:#fafcff; cursor:pointer; transition:.18s ease; }
.payment-proof-drop:hover { border-color:#1782ed; background:#f5faff; }
.payment-proof-drop input { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.payment-proof-placeholder { display:grid; place-items:center; text-align:center; padding:24px; }
.payment-proof-placeholder::before { content:'＋'; width:44px; height:44px; margin-bottom:8px; display:grid; place-items:center; border-radius:50%; background:#e9f4ff; color:#1473e6; font-size:1.5rem; font-weight:500; }
.payment-proof-placeholder small { margin-top:3px; color:#8c97a5; }
.payment-proof-drop img { width:100%; max-height:360px; object-fit:contain; background:#fff; }
.payment-submit-button { margin-top:16px; min-height:52px; border-radius:15px; font-size:1rem; }
.payment-review-note { margin:10px 0 0; text-align:center; color:#7d8795; font-size:.8rem; }
.payment-rejected-note { display:flex; flex-direction:column; gap:2px; margin-bottom:14px; padding:12px 14px; border-radius:13px; background:#fff1f1; color:#9a3434; }

.payment-review-card { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:flex-start; padding:24px; }
.payment-review-card h2 { margin:5px 0 5px; }
.payment-review-card p { margin:0; color:#687586; }
.payment-review-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; color:#176ac8; background:#e7f2ff; }
.payment-review-icon.success { color:#0c805d; background:#e0f7ee; }
.payment-review-icon svg { width:31px; height:31px; }
.payment-proof-thumb { grid-column:1/-1; display:grid; grid-template-columns:110px 1fr; gap:12px; align-items:center; margin-top:4px; padding:10px; border-radius:14px; border:1px solid #e3e8ef; color:#475569; background:#fafcff; }
.payment-proof-thumb:hover { color:#1473e6; }
.payment-proof-thumb img { width:110px; height:82px; object-fit:cover; border-radius:10px; background:#fff; }
.subscription-history-card { margin-bottom:24px; }

.developer-proof-review { display:grid; grid-template-columns:220px 1fr; gap:18px; align-items:center; margin-top:16px; padding:14px; border-radius:16px; background:#f7faff; border:1px solid #dce9f7; }
.developer-proof-image { display:block; position:relative; overflow:hidden; border-radius:13px; background:#fff; border:1px solid #dfe7ef; }
.developer-proof-image img { display:block; width:100%; height:165px; object-fit:contain; }
.developer-proof-image span { display:block; padding:7px 9px; color:#176ac8; background:#f5f9ff; font-size:.76rem; font-weight:800; text-align:center; }
.developer-proof-review h3 { margin:5px 0 8px; }
.developer-proof-review p { margin:4px 0; color:#687586; }
.payment-awaiting-proof { margin-top:14px; padding:12px 14px; border-radius:12px; background:#fff8e8; color:#8a5b10; }

@media (max-width:900px){
  .payment-checkout-shell { grid-template-columns:1fr; }
  .payment-summary-card { position:static; }
  .subscription-modal-method-logo-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:620px){
  .payment-app-page { width:min(100% - 20px,1120px); }
  .payment-summary-card,.payment-method-card,.payment-review-card { border-radius:20px; padding:16px; }
  .payment-card-title { grid-template-columns:auto 1fr; }
  .payment-card-title .badge { grid-column:1/-1; width:max-content; }
  .payment-method-selector { grid-template-columns:1fr 1fr; gap:9px; }
  .payment-method-option { grid-template-columns:46px 1fr 22px; gap:8px; padding:10px; border-radius:16px; }
  .payment-method-logo { width:46px; height:42px; border-radius:11px; }
  .payment-method-copy strong { font-size:.88rem; }
  .payment-method-copy small { font-size:.68rem; }
  .payment-radio-ui { width:21px; height:21px; }
  .payment-transfer-panel { padding:14px; border-radius:18px; }
  .payment-transfer-brand { grid-template-columns:52px 1fr auto; gap:9px; }
  .payment-transfer-logo { width:52px; height:48px; }
  .payment-transfer-brand strong { font-size:1.05rem; }
  .payment-transfer-pill { padding:6px 9px; font-size:.68rem; }
  .payment-transfer-info strong { font-size:1.05rem; }
  .payment-transfer-total strong { font-size:1.2rem; }
  .payment-proof-drop { min-height:130px; }
  .payment-review-card { grid-template-columns:1fr; }
  .payment-proof-thumb { grid-column:auto; grid-template-columns:90px 1fr; }
  .payment-proof-thumb img { width:90px; height:70px; }
  .developer-proof-review { grid-template-columns:1fr; }
  .developer-proof-image img { height:220px; }
  .subscription-modal-method-logo-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .subscription-modal-method-logo { padding:7px; }
  .subscription-modal-method-logo img { width:32px; height:32px; }
}

/* ============================================================
   Digitera V4.8.0 — Word/Blogger style rich text blog editor
   ============================================================ */
.blog-editor-page{max-width:1240px}.blog-editor-head{align-items:center}.blog-compose-form{margin-bottom:34px}.blog-compose-card{background:#fff;border:1px solid #e6e4ef;border-radius:26px;box-shadow:0 20px 55px rgba(43,35,75,.08);overflow:hidden}.blog-title-fields{padding:26px 28px 6px}.blog-title-input{font-size:1.18rem;font-weight:800;padding:15px 16px}.rich-editor-shell{border-top:1px solid #eceaf3;background:#f3f4f8}.rich-editor-toolbar{position:sticky;top:72px;z-index:12;display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:10px 12px;background:rgba(255,255,255,.97);border-bottom:1px solid #dedce8;box-shadow:0 5px 18px rgba(33,27,56,.06);backdrop-filter:blur(12px)}.teacher-app-shell .rich-editor-toolbar{top:72px}.rich-toolbar-group{display:flex;align-items:center;gap:4px;padding-right:7px;margin-right:1px;border-right:1px solid #e8e6ee}.rich-toolbar-group:last-child{border-right:0}.rich-tool,.rich-select,.rich-color-tool{height:36px;border:1px solid transparent;border-radius:8px;background:transparent;color:#373347;font:inherit}.rich-tool{min-width:36px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.9rem;font-weight:700;cursor:pointer;transition:.15s ease}.rich-tool:hover,.rich-tool:focus-visible{background:#f0ebff;border-color:#d9cdfc;color:#6842df;outline:none}.rich-tool:active{transform:translateY(1px)}.rich-tool-letter{font-family:Georgia,"Times New Roman",serif;font-size:1rem}.rich-select{padding:0 28px 0 9px;border-color:#e0dde8;background:#fff;font-size:.82rem;cursor:pointer;width:auto}.rich-font-select{max-width:142px}.rich-size-select{max-width:105px}.rich-color-tool{position:relative;min-width:36px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;cursor:pointer}.rich-color-tool input{position:absolute;inset:auto 5px 2px;width:26px;height:5px;padding:0;border:0;border-radius:3px;overflow:hidden;opacity:.9}.rich-highlight-tool span{font-size:1.05rem}.rich-tool-image{background:#f3efff;border-color:#ded4ff;color:#6741dc}.rich-editor-status{min-height:38px;padding:8px 20px;display:flex;align-items:center;gap:8px;background:#fafafe;border-bottom:1px solid #e8e6ee;color:#757184;font-size:.8rem}.rich-status-dot{width:7px;height:7px;border-radius:50%;background:#22a06b;box-shadow:0 0 0 4px rgba(34,160,107,.1)}.rich-editor-status.uploading .rich-status-dot{background:#7047eb;animation:richStatusPulse .8s ease-in-out infinite alternate}.rich-editor-status.error{color:#a32727;background:#fff5f5}.rich-editor-status.error .rich-status-dot{background:#df4242}.rich-editor-paper{padding:28px;background:linear-gradient(#f1f2f6,#f7f7fa)}.rich-editor-canvas{width:min(860px,100%);min-height:650px;margin:0 auto;padding:54px 62px;background:#fff;border:1px solid #e7e5ec;border-radius:4px;box-shadow:0 7px 26px rgba(28,25,43,.1);color:#242938;font-size:1rem;line-height:1.72;outline:none;overflow-wrap:anywhere}.rich-editor-canvas:focus{border-color:#c8b7fb;box-shadow:0 8px 30px rgba(74,52,139,.14),0 0 0 3px rgba(112,71,235,.08)}.rich-editor-canvas:empty:before{content:attr(data-placeholder);color:#aaa6b4;pointer-events:none}.rich-editor-canvas h1,.rich-editor-canvas h2,.rich-editor-canvas h3,.rich-editor-canvas h4{color:#242938;line-height:1.22;margin:1.2em 0 .55em}.rich-editor-canvas h1{font-size:2rem}.rich-editor-canvas h2{font-size:1.6rem}.rich-editor-canvas h3{font-size:1.3rem}.rich-editor-canvas p{margin:.7em 0}.rich-editor-canvas blockquote{margin:1.2em 0;padding:12px 18px;border-left:4px solid #7047eb;background:#f7f4ff;color:#5e586d}.rich-editor-canvas ul,.rich-editor-canvas ol{padding-left:28px}.rich-editor-canvas hr{border:0;border-top:1px solid #d9d6df;margin:24px 0}.rich-editor-canvas a{color:#5f39d6;text-decoration:underline}.rich-editor-canvas .blog-inline-image,.article-rich-content .blog-inline-image{display:block;max-width:100%;height:auto;margin:22px auto;border-radius:14px;box-shadow:0 8px 24px rgba(25,22,43,.11)}.rich-editor-canvas table,.article-rich-content table{width:100%;border-collapse:collapse;margin:18px 0}.rich-editor-canvas td,.rich-editor-canvas th,.article-rich-content td,.article-rich-content th{padding:9px 11px;border:1px solid #ddd9e7}.blog-editor-tips{margin:18px 28px 0;padding:13px 15px;border-radius:12px;background:#f5f1ff;color:#5c5470;font-size:.88rem}.blog-meta-grid{padding:22px 28px 0}.blog-status-field{padding:0 28px;max-width:360px}.blog-save-actions{padding:4px 28px 28px}.article-rich-content{font-size:1.04rem;line-height:1.8;color:#34303e}.article-rich-content p{margin:0 0 1em}.article-rich-content h1,.article-rich-content h2,.article-rich-content h3,.article-rich-content h4{color:#242938;line-height:1.22;margin:1.35em 0 .55em}.article-rich-content h1{font-size:2rem}.article-rich-content h2{font-size:1.65rem}.article-rich-content h3{font-size:1.35rem}.article-rich-content blockquote{padding:14px 18px;margin:1.4em 0;border-left:4px solid #7047eb;background:#f7f4ff;border-radius:0 12px 12px 0}.article-rich-content ul,.article-rich-content ol{padding-left:28px}.article-rich-content a{text-decoration:underline}.article-rich-content hr{margin:28px 0;border:0;border-top:1px solid #dedbe6}.article-rich-content pre{overflow:auto;padding:16px;border-radius:12px;background:#1f2430;color:#f7f7fb}.article-rich-content img+br{display:none}@keyframes richStatusPulse{from{opacity:.45;transform:scale(.86)}to{opacity:1;transform:scale(1.15)}}
@media(max-width:900px){.rich-editor-toolbar{top:70px}.rich-editor-paper{padding:16px}.rich-editor-canvas{min-height:560px;padding:34px 30px}.rich-toolbar-selects{order:2;flex:1 1 100%;border-right:0}.rich-select{flex:1;min-width:100px}.blog-title-fields{padding:21px 20px 4px}.blog-editor-tips{margin:15px 20px 0}.blog-meta-grid{padding:20px 20px 0}.blog-status-field{padding:0 20px}.blog-save-actions{padding:4px 20px 22px}}
@media(max-width:620px){.blog-editor-page{width:100%;padding:0 12px}.blog-compose-card{border-radius:20px}.rich-editor-toolbar{position:relative;top:auto;gap:5px;padding:9px 8px}.rich-toolbar-group{padding-right:4px}.rich-tool{min-width:34px;height:34px;padding:0 7px}.rich-tool-image span:last-child{display:none}.rich-editor-status{padding:7px 12px}.rich-editor-paper{padding:8px;background:#f3f4f8}.rich-editor-canvas{min-height:520px;padding:24px 18px;border-radius:10px;font-size:.96rem}.blog-meta-grid{grid-template-columns:1fr}.blog-save-actions .btn{flex:1}.blog-editor-head{padding-left:5px;padding-right:5px}.article-rich-content .blog-inline-image{border-radius:10px;margin:17px auto}}
@media(prefers-reduced-motion:reduce){.rich-editor-status.uploading .rich-status-dot{animation:none}}

/* =========================================================
   Digitera V4.8.1 — Microsoft Word style blog editor
   ========================================================= */
.word-blog-page{max-width:1380px}.word-compose-card{border-radius:18px;overflow:hidden}.word-blog-meta-top{background:#fff}.word-editor-shell{--word-blue:#2b579a;--word-blue-dark:#1e447e;--word-ribbon-border:#d5d8de;background:#d9d9d9;border-top:1px solid #dfe2e7;font-family:"Segoe UI",Arial,sans-serif}.word-titlebar{height:38px;background:var(--word-blue);color:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 10px;font-size:12px;user-select:none}.word-quick-access,.word-title-actions{display:flex;align-items:center;gap:2px}.word-title-tool{width:28px;height:28px;border:0;background:transparent;color:#fff;border-radius:3px;font-size:16px;cursor:pointer}.word-title-tool:hover{background:rgba(255,255,255,.16)}.word-document-name{text-align:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.word-title-actions span{width:38px;text-align:center;font-size:16px}.word-tabs{height:36px;background:var(--word-blue);display:flex;align-items:flex-end;padding:0 8px;color:#fff;overflow-x:auto;scrollbar-width:none}.word-tabs::-webkit-scrollbar{display:none}.word-tab{height:34px;padding:0 14px;border:0;background:transparent;color:#fff;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap;border-radius:2px 2px 0 0}.word-tab:hover{background:rgba(255,255,255,.12)}.word-tab.active{background:#fff;color:#1f3f71}.word-tab-file{background:#1f4e8c}.word-tell-me{margin-left:auto;align-self:center;padding:0 14px 5px;color:#eef4ff;white-space:nowrap;font-size:12px}.word-ribbon{background:#fff;border-bottom:1px solid #bfc4cb;min-height:100px}.word-ribbon-panel{display:none;align-items:stretch;min-height:100px;padding:4px 6px 2px;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.word-ribbon-panel.active{display:flex}.word-ribbon-group{position:relative;display:flex;align-items:flex-start;gap:4px;padding:4px 8px 20px;border-right:1px solid var(--word-ribbon-border);min-width:max-content}.word-ribbon-group:last-child{border-right:0}.word-group-name{position:absolute;bottom:2px;left:8px;right:8px;text-align:center;color:#777;font-size:10px;line-height:14px;white-space:nowrap}.word-big-tool,.word-mini-tool,.word-tool,.word-style-card{border:1px solid transparent;background:#fff;color:#20242b;font-family:"Segoe UI",Arial,sans-serif;cursor:pointer;border-radius:2px}.word-big-tool:hover,.word-mini-tool:hover,.word-tool:hover,.word-style-card:hover,.word-style-card.active,.word-tool.active{background:#e5f1fb;border-color:#c1d7ed}.word-big-tool{width:58px;min-height:62px;padding:4px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;line-height:1.1}.word-big-icon{font-size:25px;line-height:1}.word-stack-tools{display:flex;flex-direction:column;gap:1px}.word-mini-tool{height:24px;padding:2px 6px;text-align:left;font-size:11px;white-space:nowrap}.word-font-group{display:grid;grid-template-rows:30px 30px 14px;align-content:start;min-width:330px}.word-font-topline,.word-font-bottomline,.word-paragraph-row{display:flex;align-items:center;gap:2px}.word-font-select,.word-size-select,.word-line-select,.word-setting select{height:25px;border:1px solid #b7bbc2;background:#fff;color:#222;font:11px "Segoe UI",Arial,sans-serif;padding:1px 5px;border-radius:1px}.word-font-select{width:148px}.word-size-select{width:52px}.word-line-select{width:54px}.word-tool{height:25px;min-width:25px;padding:1px 5px;display:inline-flex;align-items:center;justify-content:center;font-size:11px}.word-letter{font-family:Calibri,Arial,sans-serif;font-size:13px}.word-color-tool{height:25px;min-width:28px;position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:2px;font-size:12px;font-weight:700;cursor:pointer}.word-color-tool:hover{background:#e5f1fb;border-color:#c1d7ed}.word-color-tool input{position:absolute;left:4px;right:4px;bottom:1px;width:20px;height:4px;padding:0;border:0;opacity:.95}.word-font-color span{border-bottom:3px solid #d71920}.word-paragraph-group{display:grid;grid-template-rows:30px 30px 14px;align-content:start;min-width:205px}.word-styles-group{display:flex;align-items:flex-start;gap:2px;min-width:310px}.word-style-card{width:73px;height:54px;padding:4px 5px;text-align:left;border-color:#e0e2e5;background:#fff;overflow:hidden}.word-style-card strong{display:block;font:14px Calibri,Arial,sans-serif;white-space:nowrap;color:#222}.word-style-card span{display:block;margin-top:4px;color:#555;font-size:9px;white-space:nowrap}.word-style-card.heading1 strong,.word-style-card.heading2 strong{color:#2f5597;font-weight:400}.word-editing-group{display:flex;flex-direction:column;gap:1px;min-width:82px}.word-file-group{min-width:240px}.word-design-group{min-width:330px}.word-setting{display:flex;flex-direction:column;gap:3px;font-size:10px;color:#555;min-width:100px}.word-editor-notice{min-height:28px;padding:5px 14px;background:#f7f8fa;border-bottom:1px solid #cacdd2;font-size:11px}.word-ruler-wrap{height:26px;background:#ececec;display:flex;align-items:stretch;border-bottom:1px solid #c7c7c7}.word-ruler-corner{width:32px;display:grid;place-items:center;background:#f6f6f6;border-right:1px solid #c7c7c7;color:#777;font-size:10px}.word-ruler{position:relative;flex:1;max-width:900px;margin:0 auto;background:repeating-linear-gradient(90deg,transparent 0 11px,#9b9b9b 12px 13px,transparent 13px 23px,#c7c7c7 24px 25px),linear-gradient(#f7f7f7,#e4e4e4);border-left:1px solid #c8c8c8;border-right:1px solid #c8c8c8}.word-ruler:before{content:"1        2        3        4        5        6        7        8";position:absolute;left:6%;right:6%;top:4px;display:flex;justify-content:space-around;color:#555;font-size:9px;letter-spacing:17px;white-space:nowrap;overflow:hidden}.word-indent-marker{position:absolute;top:0;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}.word-indent-left{left:10%;border-top:7px solid #777}.word-indent-right{right:10%;border-top:7px solid #777}.word-editor-workspace{padding:28px 34px 36px;min-height:720px;background:#d9d9d9;overflow:auto}.word-editor-canvas{width:794px;max-width:calc(100% - 4px);min-height:1123px;margin:0 auto;padding:100px 96px;background:#fff;border:1px solid #bbb;border-radius:0;box-shadow:0 1px 5px rgba(0,0,0,.24);font-family:Calibri,Arial,sans-serif;font-size:14.67px;line-height:1.5;color:#111;transition:transform .15s ease,width .2s ease,padding .2s ease}.word-editor-canvas:focus{border-color:#999;box-shadow:0 1px 7px rgba(0,0,0,.28);outline:none}.word-editor-canvas.word-margin-narrow{padding-left:48px;padding-right:48px}.word-editor-canvas.word-margin-wide{padding-left:140px;padding-right:140px}.word-editor-workspace.word-page-letter .word-editor-canvas{width:816px;min-height:1056px}.word-editor-workspace.word-page-wide .word-editor-canvas{width:980px;min-height:760px}.word-web-layout .word-ruler-wrap{display:none}.word-web-layout .word-editor-workspace{padding:0;background:#fff;min-height:600px}.word-web-layout .word-editor-canvas{width:100%!important;max-width:none;min-height:650px;padding:48px 56px;border:0;box-shadow:none;transform:none!important;margin-bottom:0!important}.word-theme-classic{font-family:"Times New Roman",serif}.word-theme-modern{font-family:"Aptos","Segoe UI",Arial,sans-serif}.word-theme-book{font-family:Georgia,"Times New Roman",serif}.word-theme-clean{font-family:Arial,Helvetica,sans-serif}.word-show-formatting p:after,.word-show-formatting div:after,.word-show-formatting h1:after,.word-show-formatting h2:after,.word-show-formatting h3:after{content:" ¶";color:#2b579a;font-weight:400}.word-statusbar{min-height:28px;background:#f4f4f4;border-top:1px solid #c5c5c5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 10px;color:#555;font-size:10px;user-select:none}.word-status-left,.word-status-right{display:flex;align-items:center;gap:12px}.word-statusbar button{border:0;background:transparent;color:#555;font:inherit;cursor:pointer;padding:2px 4px}.word-statusbar button:hover,.word-statusbar button.active{background:#dce8f5;color:#1e4f8d}.word-status-right input[type=range]{width:110px;height:4px;padding:0;border:0}.word-editor-shell:fullscreen{background:#d9d9d9;overflow:auto}.word-editor-shell:fullscreen .word-titlebar,.word-editor-shell:fullscreen .word-tabs,.word-editor-shell:fullscreen .word-ribbon{position:sticky;top:0;z-index:30}.word-editor-shell:fullscreen .word-tabs{top:38px}.word-editor-shell:fullscreen .word-ribbon{top:74px}.word-editor-shell:fullscreen .word-editor-workspace{min-height:calc(100vh - 200px)}

@media(max-width:900px){.word-blog-page{width:100%;padding:0 10px}.word-editor-shell{margin-left:-10px;margin-right:-10px}.word-titlebar{grid-template-columns:auto minmax(120px,1fr) auto}.word-document-name{font-size:11px}.word-title-actions{display:none}.word-tell-me{display:none}.word-tabs{padding-left:4px}.word-tab{padding:0 12px}.word-ribbon{min-height:96px}.word-ribbon-panel{min-height:96px;overflow-x:auto}.word-font-group{min-width:320px}.word-styles-group{min-width:305px}.word-ruler-corner{width:22px}.word-editor-workspace{padding:18px 12px 28px}.word-editor-canvas{width:794px;max-width:none;min-height:980px;padding:70px 58px;transform-origin:top left!important}.word-statusbar{position:sticky;bottom:0;z-index:9}.word-status-left span:nth-child(3),.word-status-left span:nth-child(4){display:none}}
@media(max-width:620px){.word-compose-card{border-radius:14px}.word-blog-meta-top{padding:18px 16px 4px}.word-titlebar{height:36px;padding:0 5px}.word-quick-access .word-title-tool{width:25px;height:25px}.word-tabs{height:38px}.word-tab{height:36px;font-size:11px;padding:0 11px}.word-ribbon-panel{padding-left:3px;padding-right:3px}.word-ribbon-group{padding-left:5px;padding-right:5px}.word-font-select{width:135px}.word-styles-group{min-width:292px}.word-editor-notice{padding:5px 10px}.word-ruler-wrap{height:22px}.word-editor-workspace{padding:10px 8px 24px;overflow:auto}.word-editor-canvas{width:650px;min-height:920px;padding:56px 46px;font-size:14px}.word-statusbar{gap:5px;padding:2px 6px}.word-status-left{gap:7px}.word-status-left span:first-child{display:none}.word-status-right{gap:4px}.word-status-right input[type=range]{width:64px}.word-status-right .word-view-status{display:none}.blog-editor-tips{margin:14px 16px 0}.blog-meta-grid{padding:18px 16px 0}.blog-status-field{padding:0 16px}.blog-save-actions{padding:4px 16px 20px}}
@media(max-width:620px){.word-editor-canvas{width:100%;max-width:100%;min-height:760px;padding:48px 26px;transform-origin:top center!important}.word-editor-workspace.word-page-letter .word-editor-canvas,.word-editor-workspace.word-page-wide .word-editor-canvas{width:100%;min-height:760px}.word-editor-canvas.word-margin-narrow{padding-left:18px;padding-right:18px}.word-editor-canvas.word-margin-wide{padding-left:42px;padding-right:42px}}

/* Digitera V4.8.2 — pengaturan gambar editor Word: resize, align, drag. */
.rich-editor-canvas .blog-inline-image.word-editable-image{cursor:pointer;transition:outline-color .12s ease,box-shadow .12s ease;box-sizing:border-box}.rich-editor-canvas .blog-inline-image.word-image-selected{outline:2px solid #2b579a;outline-offset:2px;box-shadow:0 0 0 5px rgba(43,87,154,.13),0 8px 24px rgba(25,22,43,.12)}
.word-image-controls{position:fixed;z-index:10050;border:1.5px solid #2b579a;pointer-events:none;box-sizing:border-box;transition:opacity .08s linear}.word-image-mini-toolbar{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(calc(-50% + var(--word-image-toolbar-shift,0px)));display:flex;align-items:center;gap:2px;min-height:36px;padding:4px;background:#fff;border:1px solid #c6ccd6;border-radius:7px;box-shadow:0 5px 20px rgba(22,34,52,.2);white-space:nowrap;pointer-events:auto}.word-image-mini-toolbar.below{bottom:auto;top:calc(100% + 10px)}.word-image-mini-toolbar button{height:28px;min-width:30px;padding:0 7px;border:1px solid transparent;border-radius:4px;background:#fff;color:#25354a;font:600 11px "Segoe UI",Arial,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px}.word-image-mini-toolbar button:hover,.word-image-mini-toolbar button:focus-visible{background:#e7f1fb;border-color:#bad0e7;color:#1f4f88;outline:none}.word-image-mini-toolbar .word-image-drag{cursor:grab;color:#1f4f88}.word-image-mini-toolbar .word-image-drag:active{cursor:grabbing}.word-image-mini-toolbar .word-image-delete{color:#a32f2f}.word-image-separator{width:1px;height:20px;background:#d8dde4;margin:0 2px}.word-image-resize-handle{position:absolute;width:13px;height:13px;background:#fff;border:2px solid #2b579a;border-radius:2px;pointer-events:auto;touch-action:none;box-shadow:0 1px 3px rgba(0,0,0,.2)}.word-image-resize-handle.nw{left:-7px;top:-7px;cursor:nwse-resize}.word-image-resize-handle.ne{right:-7px;top:-7px;cursor:nesw-resize}.word-image-resize-handle.sw{left:-7px;bottom:-7px;cursor:nesw-resize}.word-image-resize-handle.se{right:-7px;bottom:-7px;cursor:nwse-resize}.word-image-drag-ghost{position:fixed;z-index:10070;max-width:260px;max-height:180px;object-fit:contain;opacity:.78;pointer-events:none;border:2px solid #2b579a;border-radius:5px;box-shadow:0 12px 30px rgba(0,0,0,.24);background:#fff}.word-image-drop-marker{position:fixed;z-index:10065;height:4px;background:#2b579a;border-radius:999px;pointer-events:none;box-shadow:0 0 0 2px rgba(43,87,154,.15)}body.word-image-resizing,body.word-image-moving{user-select:none}body.word-image-resizing *{cursor:nwse-resize!important}body.word-image-moving *{cursor:grabbing!important}
@media(max-width:620px){.word-image-mini-toolbar{max-width:calc(100vw - 18px);overflow-x:auto}.word-image-mini-toolbar button{min-width:34px;height:32px;padding:0 8px}.word-image-mini-toolbar .word-image-drag span{display:none}.word-image-resize-handle{width:17px;height:17px}.word-image-resize-handle.nw{left:-9px;top:-9px}.word-image-resize-handle.ne{right:-9px;top:-9px}.word-image-resize-handle.sw{left:-9px;bottom:-9px}.word-image-resize-handle.se{right:-9px;bottom:-9px}}

/* ======================================================================
   Digitera V4.8.3 — Blogger-style article editor
   ====================================================================== */
.blogger-compose-page{width:min(1440px,calc(100% - 28px));}
.blogger-page-head{padding-bottom:16px;}
.blogger-compose-shell{background:#f8f9fa;border:1px solid #e2e5e9;border-radius:18px;overflow:hidden;box-shadow:0 18px 50px rgba(32,33,36,.08);}
.blogger-compose-topbar{min-height:70px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;border-bottom:1px solid #e6e8eb;position:sticky;top:0;z-index:16;}
.blogger-compose-brand{display:flex;align-items:center;gap:12px;min-width:0;color:#202124;}
.blogger-compose-brand>div{min-width:0;}
.blogger-compose-brand strong,.blogger-compose-brand small{display:block;}
.blogger-compose-brand strong{font-size:1rem;}
.blogger-compose-brand small{margin-top:2px;color:#80868b;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.blogger-compose-logo{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#ff8a00,#f57c00);color:#fff;font-size:1.4rem;font-weight:900;box-shadow:0 8px 18px rgba(245,124,0,.2);}
.blogger-top-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.blogger-compose-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:730px;}
.blogger-editor-main{min-width:0;background:#fff;border-right:1px solid #e6e8eb;}
.blogger-title-wrap{padding:22px 26px 10px;background:#fff;}
.blogger-title-input{width:100%;padding:10px 2px 14px!important;border:0!important;border-bottom:1px solid #dadce0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:1.55rem!important;font-weight:500!important;letter-spacing:-.02em;color:#202124!important;}
.blogger-title-input:focus{border-bottom-color:#f57c00!important;box-shadow:0 1px 0 #f57c00!important;}
.blogger-title-input::placeholder{color:#9aa0a6;}
.blogger-editor-shell{margin:0;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;overflow:visible!important;position:relative;}
.blogger-modebar{padding:6px 20px 7px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border-bottom:1px solid #edf0f2;}
.blogger-mode-switch{display:flex;align-items:center;gap:2px;padding:3px;background:#f1f3f4;border-radius:8px;}
.blogger-mode-button{appearance:none;border:0;background:transparent;color:#5f6368;font:inherit;font-size:.78rem;font-weight:700;border-radius:6px;padding:7px 10px;cursor:pointer;}
.blogger-mode-button:hover{background:#fff;color:#202124;}
.blogger-mode-button.active{background:#fff;color:#f57c00;box-shadow:0 1px 4px rgba(60,64,67,.16);}
.blogger-editor-state{display:flex;align-items:center;gap:7px;color:#80868b;font-size:.76rem;}
.blogger-editor-state .rich-status-dot{width:7px;height:7px;border-radius:50%;background:#34a853;}
.blogger-toolbar-wrap{position:sticky;top:70px;z-index:14;background:#fff;border-bottom:1px solid #dadce0;box-shadow:0 2px 5px rgba(60,64,67,.06);}
.blogger-toolbar{min-height:50px;display:flex;align-items:center;gap:4px;padding:7px 16px;overflow-x:auto;overflow-y:visible;scrollbar-width:thin;}
.blogger-toolbar::-webkit-scrollbar{height:5px}.blogger-toolbar::-webkit-scrollbar-thumb{background:#dadce0;border-radius:99px;}
.blogger-tool-group{display:flex;align-items:center;gap:2px;padding:0 6px;border-right:1px solid #e5e7ea;flex:0 0 auto;}
.blogger-tool-group:first-child{padding-left:0}.blogger-tool-group:last-of-type{border-right:0;}
.blogger-tool,.blogger-more-menu>summary{appearance:none;border:0;background:transparent;color:#3c4043;min-width:32px;height:34px;padding:5px 7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font:600 .88rem/1 Arial,sans-serif;cursor:pointer;user-select:none;list-style:none;}
.blogger-more-menu>summary::-webkit-details-marker{display:none}.blogger-more-menu>summary::marker{display:none;}
.blogger-tool:hover,.blogger-more-menu>summary:hover,.blogger-tool.active{background:#f1f3f4;color:#202124;}
.blogger-image-tool{font-size:1.1rem;color:#f57c00;}
.blogger-letter{font-family:Arial,sans-serif;font-size:.95rem;}
.blogger-select{height:34px;border:1px solid transparent!important;border-radius:6px!important;background:#fff!important;color:#3c4043!important;padding:4px 24px 4px 8px!important;font-size:.79rem!important;box-shadow:none!important;cursor:pointer;}
.blogger-select:hover,.blogger-select:focus{border-color:#dadce0!important;background:#f8f9fa!important;box-shadow:none!important;}
.blogger-font-select{width:150px}.blogger-format-select{width:112px}.blogger-size-select{width:58px;padding-right:18px!important;}
.blogger-color-tool{position:relative;width:32px;height:34px;display:inline-grid;place-items:center;border-radius:6px;color:#3c4043;font-size:.9rem;font-weight:800;cursor:pointer;overflow:hidden;}
.blogger-color-tool:hover{background:#f1f3f4;}
.blogger-color-tool input{position:absolute;bottom:3px;left:6px;width:20px;height:4px;padding:0;border:0;border-radius:0;opacity:.95;cursor:pointer;}
.blogger-color-tool:not(.blogger-highlight-tool) input{background:#202124}.blogger-highlight-tool input{background:#fff59d;}
.blogger-more-menu{position:relative;flex:0 0 auto;}
.blogger-more-menu[open]>summary{background:#f1f3f4;}
.blogger-more-panel{position:absolute;top:42px;right:0;width:330px;max-height:min(520px,70vh);overflow:auto;padding:12px;background:#fff;border:1px solid #dadce0;border-radius:12px;box-shadow:0 12px 34px rgba(60,64,67,.24);display:grid;grid-template-columns:1fr 1fr;gap:12px;z-index:40;}
.blogger-more-section{display:flex;flex-direction:column;gap:4px;min-width:0;}
.blogger-more-section strong{padding:2px 6px 5px;color:#80868b;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;}
.blogger-more-section button,.blogger-more-section label{appearance:none;border:0;background:#fff;color:#3c4043;min-height:34px;padding:7px 8px;border-radius:7px;text-align:left;font:600 .76rem/1.25 inherit;cursor:pointer;}
.blogger-more-section button:hover,.blogger-more-section label:hover{background:#f1f3f4;}
.blogger-more-section label{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.blogger-more-section select{width:76px;padding:3px 4px;border:1px solid #dadce0;border-radius:5px;background:#fff;font-size:.72rem;}
.blogger-editor-notice{min-height:28px;padding:5px 22px;background:#fff;border-bottom:1px solid #edf0f2;color:#80868b;font-size:.73rem;display:flex;align-items:center;gap:7px;}
.blogger-editor-notice.uploading{color:#f57c00}.blogger-editor-notice.error{color:#c5221f;}
.blogger-editor-workspace{padding:26px 28px 42px!important;min-height:640px!important;background:#f8f9fa!important;overflow:auto!important;position:relative;}
.blogger-editor-canvas{width:min(860px,100%)!important;max-width:860px!important;min-height:680px!important;margin:0 auto!important;padding:54px 62px!important;background:#fff!important;border:1px solid #e0e3e7!important;border-radius:8px!important;box-shadow:0 2px 8px rgba(60,64,67,.08)!important;color:#202124!important;font-family:Arial,sans-serif!important;font-size:16px!important;line-height:1.7!important;transform-origin:top center!important;outline:none!important;}
.blogger-editor-canvas:focus{border-color:#c9d7f8!important;box-shadow:0 0 0 2px rgba(66,133,244,.09),0 3px 12px rgba(60,64,67,.08)!important;}
.blogger-editor-canvas:empty:before{content:attr(data-placeholder);color:#9aa0a6;pointer-events:none;}
.blogger-editor-canvas h1{font-size:2rem;line-height:1.25;margin:1em 0 .45em}.blogger-editor-canvas h2{font-size:1.55rem;line-height:1.3;margin:1em 0 .45em}.blogger-editor-canvas h3{font-size:1.25rem;line-height:1.35;margin:1em 0 .45em}.blogger-editor-canvas blockquote{margin:1.2em 0;padding:5px 0 5px 18px;border-left:4px solid #f57c00;color:#5f6368;font-style:italic}.blogger-editor-canvas table{border-collapse:collapse;max-width:100%}.blogger-editor-canvas th,.blogger-editor-canvas td{border:1px solid #dadce0;padding:8px 10px}.blogger-editor-canvas img{max-width:100%;height:auto;}
.blogger-html-editor{display:block;width:min(980px,100%);min-height:680px;margin:0 auto;padding:24px;border:1px solid #dadce0;border-radius:8px;background:#202124;color:#e8eaed;font:14px/1.6 Consolas,"Courier New",monospace;resize:vertical;outline:none;white-space:pre;tab-size:2;}
.blogger-html-editor[hidden]{display:none!important;}
.blogger-statusbar{min-height:36px;padding:5px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #e4e7ea;background:#fff;color:#80868b;font-size:.72rem;}
.blogger-status-left,.blogger-status-right{display:flex;align-items:center;gap:9px}.blogger-statusbar button{appearance:none;border:0;background:transparent;color:inherit;padding:4px 6px;border-radius:5px;cursor:pointer}.blogger-statusbar button:hover{background:#f1f3f4;color:#3c4043}.blogger-status-right input[type=range]{width:90px;height:4px;padding:0;border:0;}
.blogger-settings-panel{padding:22px 20px;background:#f8f9fa;}
.blogger-settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #e2e5e9;color:#3c4043;}
.blogger-settings-panel .form-group{margin-bottom:18px}.blogger-settings-panel label{font-size:.82rem;color:#3c4043}.blogger-settings-panel input,.blogger-settings-panel textarea,.blogger-settings-panel select{background:#fff;border-color:#dadce0;border-radius:9px;}
.blogger-help-card{margin-top:10px;padding:14px;border-radius:12px;background:#fff3e0;border:1px solid #ffe0b2;color:#6d4c41;font-size:.78rem;line-height:1.55}.blogger-help-card strong{display:block;margin-bottom:5px;color:#e65100}.blogger-help-card p{margin:0;}
.blogger-compose-footer{padding:14px 18px;display:flex;align-items:center;justify-content:flex-end;gap:9px;background:#fff;border-top:1px solid #e6e8eb;}
.blogger-preview-overlay{position:fixed;inset:0;z-index:10000;padding:28px;background:rgba(32,33,36,.68);display:grid;place-items:center;backdrop-filter:blur(3px);}
.blogger-preview-modal{width:min(980px,100%);height:min(88vh,900px);display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.35);overflow:hidden;}
.blogger-preview-head{min-height:56px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #e5e7ea;color:#202124;}.blogger-preview-head strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.blogger-preview-close{appearance:none;border:0;background:#f1f3f4;width:36px;height:36px;border-radius:50%;font-size:1.5rem;color:#5f6368;cursor:pointer}.blogger-preview-close:hover{background:#e8eaed;color:#202124}.blogger-preview-frame{width:100%;height:100%;border:0;background:#fff;}
.blogger-editor-shell:fullscreen{background:#f8f9fa;overflow:auto;}.blogger-editor-shell:fullscreen .blogger-toolbar-wrap{top:0}.blogger-editor-shell:fullscreen .blogger-editor-workspace{min-height:calc(100vh - 145px)!important;}

/* Re-use V4.8.2 image object controls in the cleaner Blogger editor. */
.blogger-editor-canvas .blog-inline-image.word-editable-image{border-radius:4px;}
.word-image-mini-toolbar{background:#fff!important;border-color:#dadce0!important;box-shadow:0 8px 24px rgba(60,64,67,.24)!important;color:#3c4043!important;}
.word-image-mini-toolbar button{color:#3c4043!important;}.word-image-mini-toolbar button:hover{background:#f1f3f4!important;color:#f57c00!important;}
.word-image-resize-handle{background:#f57c00!important;border-color:#fff!important;box-shadow:0 0 0 1px #f57c00!important;}
.rich-editor-canvas .blog-inline-image.word-image-selected{outline-color:#f57c00!important;box-shadow:0 0 0 5px rgba(245,124,0,.13),0 8px 24px rgba(25,22,43,.12)!important;}

@media(max-width:1100px){.blogger-compose-layout{grid-template-columns:1fr}.blogger-editor-main{border-right:0}.blogger-settings-panel{border-top:1px solid #e6e8eb;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.blogger-settings-head,.blogger-help-card{grid-column:1/-1}.blogger-compose-topbar{position:relative}.blogger-toolbar-wrap{top:0}}
@media(max-width:760px){.blogger-compose-page{width:100%;padding:0 8px}.blogger-page-head{padding-left:8px;padding-right:8px}.blogger-compose-shell{border-radius:14px}.blogger-compose-topbar{padding:10px 12px;align-items:flex-start}.blogger-compose-brand small{display:none}.blogger-compose-logo{width:36px;height:36px}.blogger-top-actions{gap:5px}.blogger-top-actions .btn{padding:7px 9px;font-size:.74rem}.blogger-title-wrap{padding:14px 14px 7px}.blogger-title-input{font-size:1.25rem!important}.blogger-modebar{padding:5px 10px}.blogger-editor-state{display:none}.blogger-toolbar{padding:5px 8px;min-height:46px}.blogger-tool-group{padding:0 4px}.blogger-font-select{width:132px}.blogger-format-select{width:96px}.blogger-more-panel{position:fixed;left:12px;right:12px;top:auto;bottom:82px;width:auto;max-height:55vh;grid-template-columns:1fr 1fr}.blogger-editor-workspace{padding:10px 8px 24px!important;min-height:560px!important}.blogger-editor-canvas{min-height:620px!important;padding:34px 24px!important;border-radius:6px!important;font-size:15px!important}.blogger-html-editor{min-height:620px;padding:16px;font-size:13px}.blogger-statusbar{padding:5px 8px}.blogger-status-left span[data-word-spell-status]{display:none}.blogger-status-right input[type=range]{width:62px}.blogger-settings-panel{display:block;padding:18px 14px}.blogger-compose-footer{padding:12px;flex-wrap:wrap}.blogger-compose-footer .btn{flex:1 1 auto}.blogger-preview-overlay{padding:10px}.blogger-preview-modal{height:94vh;border-radius:12px}}
@media(max-width:430px){.blogger-compose-brand>div{display:none}.blogger-top-actions{width:100%;justify-content:flex-end}.blogger-top-actions .blogger-preview-button{display:none}.blogger-more-panel{grid-template-columns:1fr}.blogger-font-select{width:120px}.blogger-format-select{width:92px}.blogger-editor-canvas{padding:28px 18px!important}.blogger-status-left{display:none}.blogger-statusbar{justify-content:flex-end}}

/* Digitera V4.8.4 — import artikel dari DOCX/PDF */
.blogger-import-tool{gap:5px!important;width:auto!important;min-width:74px!important;padding-inline:9px!important;color:#1a73e8!important;font-size:.72rem!important;font-weight:800!important;}
.blogger-import-tool>span:first-child{font-size:1rem;line-height:1;}
.blogger-import-side-button{appearance:none;width:100%;margin:12px 0 8px;padding:10px 12px;border:1px solid #f6b26b;border-radius:9px;background:#fff;color:#e65100;font:800 .78rem/1.2 inherit;cursor:pointer;transition:.16s ease;}
.blogger-import-side-button:hover{background:#fff8ef;border-color:#f57c00;transform:translateY(-1px);}
.blogger-help-card>small{display:block;color:#795548;line-height:1.45;}
.blog-document-import-overlay{position:fixed;inset:0;z-index:12000;padding:18px;display:grid;place-items:center;background:rgba(32,33,36,.62);backdrop-filter:blur(4px);}
.blog-document-import-modal{width:min(600px,100%);max-height:min(760px,92vh);overflow:auto;background:#fff;border-radius:18px;box-shadow:0 28px 80px rgba(0,0,0,.3);animation:blogDocumentModalIn .2s ease-out;}
.blog-document-import-head{min-height:72px;padding:14px 16px;display:grid;grid-template-columns:44px minmax(0,1fr) 38px;align-items:center;gap:12px;border-bottom:1px solid #e8eaed;}
.blog-document-import-head>div:nth-child(2){min-width:0}.blog-document-import-head strong,.blog-document-import-head small{display:block}.blog-document-import-head strong{font-size:1.03rem;color:#202124}.blog-document-import-head small{margin-top:3px;color:#80868b;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.blog-document-import-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#e8f0fe;color:#1a73e8;font-size:1.4rem;font-weight:900;}
.blog-document-import-close{appearance:none;width:36px;height:36px;border:0;border-radius:50%;background:#f1f3f4;color:#5f6368;font-size:1.45rem;cursor:pointer}.blog-document-import-close:hover{background:#e8eaed;color:#202124;}
.blog-document-import-body{padding:18px;}.blog-document-import-body>p{margin:12px 0 16px;color:#5f6368;font-size:.86rem;}
.blog-document-import-file{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #e1e5ea;border-radius:12px;background:#f8f9fa;}.blog-document-import-file>div{min-width:0}.blog-document-import-file strong,.blog-document-import-file small{display:block}.blog-document-import-file strong{color:#202124;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.blog-document-import-file small{margin-top:3px;color:#80868b;font-size:.75rem;}
.blog-document-file-badge{width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,#1a73e8,#5b8def);color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.02em;box-shadow:0 7px 16px rgba(26,115,232,.18);}
.blog-document-import-warning{margin:0 0 14px;padding:10px 12px;border:1px solid #fdd663;border-radius:10px;background:#fef7e0;color:#7a4d00;font-size:.78rem;line-height:1.45;}
.blog-document-import-options{display:grid;gap:10px;}.blog-document-import-choice{appearance:none;width:100%;padding:14px;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:12px;border:1px solid #dadce0;border-radius:12px;background:#fff;color:#3c4043;text-align:left;cursor:pointer;transition:.16s ease;}.blog-document-import-choice>span{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#f1f3f4;color:#5f6368;font-size:1.1rem}.blog-document-import-choice strong,.blog-document-import-choice small{display:block}.blog-document-import-choice strong{font-size:.88rem;color:#202124}.blog-document-import-choice small{margin-top:3px;color:#80868b;font-size:.74rem;line-height:1.4}.blog-document-import-choice:hover{border-color:#aecbfa;background:#f8fbff;transform:translateY(-1px)}.blog-document-import-choice.primary{border-color:#aecbfa;background:#f8fbff}.blog-document-import-choice.primary>span{background:#e8f0fe;color:#1a73e8}.blog-document-import-choice:disabled{opacity:.45;cursor:not-allowed;transform:none;}
@keyframes blogDocumentModalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:560px){.blog-document-import-overlay{padding:10px;align-items:end}.blog-document-import-modal{width:100%;max-height:88vh;border-radius:18px 18px 10px 10px}.blog-document-import-head{grid-template-columns:40px minmax(0,1fr) 36px;padding:12px}.blog-document-import-icon{width:40px;height:40px}.blog-document-import-body{padding:14px}.blogger-import-tool{min-width:68px!important}.blogger-import-tool>span:last-child{font-size:.66rem}}


/* =========================================================
   Digitera V4.8.5 — Price list publik + Developer Pricing
   ========================================================= */
.home-pricing-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f7f4ff 100%)}
.home-pricing-section::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(112,71,235,.08);filter:blur(4px);right:-180px;top:30px;pointer-events:none}
.home-pricing-head{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:28px}
.home-pricing-head>div:first-child{max-width:720px}.home-pricing-head h2{margin-top:10px;margin-bottom:8px}
.promo-countdown-card{flex:0 0 auto;min-width:345px;padding:18px 20px;border:1px solid rgba(112,71,235,.24);border-radius:22px;background:#fff;box-shadow:0 18px 45px rgba(45,37,89,.09)}
.promo-countdown-card>strong{display:block;margin:5px 0 12px;font-size:.9rem;color:#4d465e}.promo-countdown-label{display:inline-flex;padding:5px 10px;border-radius:999px;background:#efe9ff;color:#6540d7;font-size:.78rem;font-weight:850}
.promo-countdown-grid{display:flex;align-items:center;gap:7px}.promo-countdown-grid>span{min-width:56px;text-align:center;padding:8px 6px;border-radius:13px;background:#f7f5ff;border:1px solid #e7e0ff}.promo-countdown-grid b{display:block;color:#2b2140;font-size:1.25rem;line-height:1}.promo-countdown-grid small{display:block;margin-top:5px;color:#7a718c;font-size:.65rem}.promo-countdown-grid i{font-style:normal;color:#8a7ea2;font-weight:900}.promo-countdown-end{display:block;margin-top:10px;color:#857c94}.promo-countdown-card.is-ended{opacity:.72}
.home-pricing-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.home-price-card{position:relative;padding:24px;border:1px solid #e8e3f4;border-radius:24px;background:#fff;box-shadow:0 14px 34px rgba(38,31,61,.07);display:flex;flex-direction:column;min-height:430px;transition:transform .2s ease,border-color .2s ease}.home-price-card:hover{transform:translateY(-4px);border-color:#cfc1ff}.home-price-card.featured{border:2px solid #7b51ed;box-shadow:0 20px 45px rgba(112,71,235,.16)}
.home-price-popular{position:absolute;right:14px;top:14px;padding:5px 9px;border-radius:999px;background:#6f46e9;color:#fff;font-size:.68rem;font-weight:850}.home-price-top{display:flex;align-items:center;gap:11px}.home-price-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#f0ebff;color:#6f46e9}.home-price-icon svg{width:23px;height:23px}.home-price-top h3{margin:0}.home-price-top small{color:#847b91}.home-price-discount{display:flex;align-items:center;gap:8px;margin-top:22px;min-height:25px}.home-price-discount span{padding:4px 8px;border-radius:999px;background:#fff0ef;color:#c23c34;font-size:.72rem;font-weight:850}.home-price-discount del{color:#9a92a7;font-size:.86rem}.home-price-discount.normal span{background:#f4f3f7;color:#777080}.home-price-value{display:flex;align-items:baseline;gap:5px;margin-top:7px}.home-price-value strong{font-size:1.82rem;letter-spacing:-.04em;color:#251b39}.home-price-value small{color:#8b8298}.home-price-card>p{color:#766d83;font-size:.88rem}.home-price-features{list-style:none;padding:0;margin:10px 0 22px;display:grid;gap:9px;color:#514a5d;font-size:.84rem}.home-price-features li::before{content:"✓";display:inline-grid;place-items:center;width:19px;height:19px;margin-right:7px;border-radius:50%;background:#ecfdf3;color:#16834f;font-weight:900}.home-price-card .btn{margin-top:auto}.home-pricing-note{text-align:center;margin:22px 0 0;color:#847b90;font-size:.85rem}
.developer-pricing-page{padding-bottom:30px}.developer-pricing-form{display:grid;gap:20px}.pricing-control-card{padding:24px}.pricing-toggle{display:flex;align-items:center;gap:9px;font-weight:800}.pricing-toggle input{width:18px;height:18px}.pricing-live-status{display:flex;align-items:center;gap:8px;margin-top:8px;padding:11px 13px;border-radius:12px;background:#f4f3f7;color:#746d7e}.pricing-live-status.active{background:#ecfdf3;color:#146c45}.pricing-live-dot{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px color-mix(in srgb,currentColor 13%,transparent)}.developer-price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.developer-price-card{padding:20px}.developer-price-card-head{display:flex;justify-content:space-between;gap:10px;align-items:start;margin-bottom:16px}.developer-price-card h2{font-size:1rem;margin:5px 0 0}.pricing-mini-discount{padding:5px 8px;border-radius:999px;background:#fff0ef;color:#c43d36;font-weight:850;font-size:.72rem}.money-input{display:flex;align-items:center;border:1px solid #dcd6e8;border-radius:12px;background:#fff;overflow:hidden}.money-input:focus-within{border-color:#8059ed;box-shadow:0 0 0 3px rgba(112,71,235,.1)}.money-input span{padding:0 10px;color:#6d6579;font-weight:800}.money-input input{border:0!important;box-shadow:none!important;border-radius:0!important;padding-left:0!important}.money-input.promo{border-color:#cbbdf8;background:#fbf9ff}.developer-price-preview{display:grid;gap:2px;margin-top:10px;padding:12px;border-radius:13px;background:#f8f6ff}.developer-price-preview small,.developer-price-preview span{color:#7c748a}.developer-price-preview strong{font-size:1.3rem;color:#5f38ce}.developer-pricing-save{display:flex;align-items:center;gap:16px;justify-content:flex-end}.developer-pricing-save p{margin:0;max-width:540px;font-size:.82rem}
@media(max-width:1050px){.home-pricing-grid,.developer-price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-pricing-head{align-items:stretch;flex-direction:column}.promo-countdown-card{min-width:0;width:min(390px,100%)}}
@media(max-width:620px){.home-pricing-grid,.developer-price-grid{grid-template-columns:1fr 1fr;gap:10px}.home-price-card{padding:15px;min-height:0;border-radius:18px}.home-price-popular{position:static;align-self:flex-start;margin-bottom:8px}.home-price-top{align-items:flex-start}.home-price-icon{width:36px;height:36px}.home-price-icon svg{width:20px;height:20px}.home-price-top h3{font-size:.96rem}.home-price-top small{font-size:.7rem}.home-price-discount{margin-top:14px;display:block}.home-price-discount del{display:block;margin-top:4px}.home-price-value{display:block}.home-price-value strong{font-size:1.33rem}.home-price-value small{display:block;margin-top:2px}.home-price-card>p{font-size:.75rem}.home-price-features{font-size:.72rem;gap:7px}.home-price-features li::before{width:16px;height:16px;margin-right:4px}.home-price-card .btn{font-size:.72rem;padding:9px 6px}.promo-countdown-card{padding:15px}.promo-countdown-grid{gap:4px}.promo-countdown-grid>span{min-width:0;flex:1;padding:8px 3px}.promo-countdown-grid b{font-size:1.1rem}.developer-pricing-save{align-items:stretch;flex-direction:column}.developer-pricing-save .btn{width:100%}.developer-price-card{padding:14px}.developer-price-card .form-group label{font-size:.75rem}.developer-price-preview strong{font-size:1.05rem}}
@media(max-width:380px){.home-pricing-grid,.developer-price-grid{grid-template-columns:1fr}}
.subscription-promo-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0 18px;padding:12px 14px;border-radius:14px;background:#f4efff;border:1px solid #ddd1ff;color:#5130b7}.subscription-promo-strip span:first-child{display:grid;gap:2px}.subscription-promo-strip small{color:#776b92}.subscription-promo-timer{font-weight:800;white-space:nowrap}.subscription-promo-timer b{display:inline-block;min-width:25px;text-align:center;color:#2e2053}.subscription-plan-regular{display:block;margin-top:8px;color:#968ea3;font-size:.82rem}
@media(max-width:620px){.subscription-promo-strip{align-items:flex-start;flex-direction:column}.subscription-promo-timer{font-size:.82rem}}

/* =========================================================
   Digitera V4.8.6 — Quiz Tim Live ala game show / Kahoot
   ========================================================= */
.live-host-page{min-height:calc(100vh - 70px);background:radial-gradient(circle at 80% 0,rgba(124,92,255,.22),transparent 32%),linear-gradient(145deg,#11152d,#1d1542 58%,#11152d);color:#fff;padding:28px 0 70px}
.live-host-container{width:min(1240px,calc(100% - 32px))}
.live-host-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:22px}.live-host-topbar h1{font-size:clamp(1.6rem,3vw,2.6rem);margin:5px 0}.live-host-topbar p{margin:0;color:#c9c6df}.live-host-kicker{display:inline-flex;align-items:center;gap:7px;font-weight:900;font-size:.76rem;letter-spacing:.13em;color:#c9b8ff}.live-host-actions{display:flex;gap:9px;flex-wrap:wrap}.live-host-page .btn-secondary,.live-host-page .btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}.live-host-page .btn-secondary:hover,.live-host-page .btn-ghost:hover{background:rgba(255,255,255,.17);color:#fff}
.live-pin-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;margin-bottom:22px;border:1px solid rgba(255,255,255,.16);border-radius:24px;background:rgba(255,255,255,.08);backdrop-filter:blur(14px)}.live-pin-panel>div{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}.live-pin-panel small{font-weight:900;letter-spacing:.14em;color:#c9b8ff}.live-pin-panel strong{font-size:clamp(2.4rem,6vw,4.7rem);line-height:1;letter-spacing:.08em}.live-pin-panel span{color:#d8d5e8}
.live-host-root{min-height:430px}.live-host-loading,.live-host-empty,.live-host-countdown,.live-host-finished{min-height:430px;display:grid;place-items:center;text-align:center}.live-host-loading span{width:52px;height:52px;border:5px solid rgba(255,255,255,.18);border-top-color:#9d82ff;border-radius:50%;animation:liveSpin .85s linear infinite}.live-host-lobby,.live-host-board,.live-host-question{border:1px solid rgba(255,255,255,.14);border-radius:28px;background:rgba(255,255,255,.075);padding:26px;backdrop-filter:blur(12px)}.live-host-section-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.live-host-section-head h2,.live-host-board h2{margin:5px 0}.live-host-section-head p{margin:0;color:#cac7dc}.live-host-start{min-width:170px}
.live-host-team-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.live-host-team-row{display:flex;align-items:center;gap:12px;padding:16px;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.11)}.live-host-team-row>div{min-width:0;flex:1}.live-host-team-row strong,.live-host-team-row small{display:block}.live-host-team-row small{margin-top:3px;color:#c7c4d7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-host-rank{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(157,130,255,.2);font-weight:900}.live-ready-badge{padding:5px 9px;border-radius:999px;background:rgba(88,220,154,.16);color:#9af0c1;font-size:.75rem;font-weight:900}.live-host-team-list.is-board{grid-template-columns:1fr}.live-host-team-list.is-board .live-host-team-row b{font-size:1.15rem;color:#ffe98b}
.live-host-countdown{border-radius:30px;background:radial-gradient(circle,rgba(141,105,255,.34),transparent 55%)}.live-host-countdown .live-countdown-ready{font-size:clamp(1.3rem,3vw,2.2rem);font-weight:900;letter-spacing:.12em}.live-host-countdown strong{font-size:clamp(6rem,20vw,13rem);line-height:.9;text-shadow:0 18px 50px rgba(0,0,0,.35);animation:livePop .75s ease both}.live-host-countdown p{color:#d8d5e8}
.live-host-question-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;margin-bottom:20px;font-weight:800}.live-host-question-top>span:last-child{text-align:right}.live-host-question-timer{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:#7c4dff;border:5px solid rgba(255,255,255,.23);box-shadow:0 12px 30px rgba(65,30,170,.35)}.live-host-question-timer strong{font-size:2rem;line-height:1}.live-host-question-timer small{font-size:.62rem;text-transform:uppercase}.live-host-question-card{text-align:center}.live-host-question-card h2{max-width:900px;margin:0 auto 20px;font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.25}.live-host-question-card>img{max-width:min(600px,100%);max-height:300px;object-fit:contain;border-radius:18px;margin:0 auto 18px;display:block}.live-host-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.live-host-option{min-height:92px;display:flex;align-items:center;gap:14px;text-align:left;padding:16px 20px;border-radius:18px;background:#3165d4}.live-host-option:nth-child(2){background:#b82f45}.live-host-option:nth-child(3){background:#c58b10}.live-host-option:nth-child(4){background:#27864f}.live-host-option span{font-size:1.45rem}.live-host-option strong{font-size:1.1rem}.live-host-control-row{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}.live-host-control-row small{color:#c6c2d6}
.live-host-board-title{display:flex;align-items:center;justify-content:center;gap:14px;text-align:left;margin-bottom:20px}.live-host-board-title>span{font-size:3rem}.live-host-board-title p{margin:3px 0;color:#d6d2e5}.live-host-finished .live-finish-trophy,.live-finish-trophy{font-size:5rem;filter:drop-shadow(0 10px 28px rgba(255,210,67,.28));animation:liveFloat 2.2s ease-in-out infinite}.live-host-finished h2{font-size:clamp(2rem,4vw,3.4rem);margin:8px 0}.live-host-finished>p{color:#d3cfdf}

.live-join-page{min-height:calc(100vh - 100px);padding:34px 0 90px;background:radial-gradient(circle at 20% 0,rgba(122,78,255,.17),transparent 34%),#f5f4fb}.live-join-wrap{max-width:650px}.live-join-brand{text-align:center;margin-bottom:16px}.live-join-brand strong,.live-join-brand small{display:block}.live-join-brand strong{letter-spacing:.12em}.live-join-brand small{color:var(--muted);margin-top:3px}.live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#f04444;box-shadow:0 0 0 5px rgba(240,68,68,.12);margin-right:8px;animation:livePulse 1.4s ease infinite}.live-join-card{background:#fff;border:1px solid #e8e5f2;border-radius:26px;padding:28px;box-shadow:0 22px 60px rgba(48,37,91,.11)}.live-join-card h1{font-size:clamp(1.75rem,6vw,2.6rem);margin:10px 0 20px}.live-pin-input{text-align:center;font-size:2rem!important;font-weight:900!important;letter-spacing:.14em}.live-pin-confirm{display:grid;place-items:center;margin:0 0 22px;padding:17px;border-radius:18px;background:#f1edff}.live-pin-confirm span{font-size:.72rem;font-weight:900;letter-spacing:.15em;color:#6846d9}.live-pin-confirm strong{font-size:2.4rem;letter-spacing:.09em}.live-pin-confirm small{color:#706c7a}.live-waiting-host{text-align:center;padding:20px 0}.live-waiting-host>span{font-size:3rem}.live-waiting-host h2{margin:9px 0}.live-waiting-host p{color:var(--muted)}.live-join-button{min-height:50px}

.live-team-page{min-height:calc(100vh - 120px);background:linear-gradient(145deg,#f7f6fc,#efecfa);padding-bottom:92px}.live-team-topbar{position:sticky;top:64px;z-index:12;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px max(18px,calc((100vw - 920px)/2));background:#21134c;color:#fff;box-shadow:0 8px 25px rgba(32,18,72,.16)}.live-team-topbar>div:first-child{display:flex;align-items:center;gap:8px;min-width:0}.live-team-topbar small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.78}.live-team-score{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.1)}.live-team-score span{font-size:.72rem}.live-team-score strong{font-size:1.1rem;color:#ffe47a}.live-team-root{width:min(860px,calc(100% - 28px));margin:0 auto;padding:34px 0}.live-team-loading,.live-team-wait,.live-team-countdown,.live-answer-wait,.live-team-finish{min-height:500px;display:grid;align-content:center;justify-items:center;text-align:center}.live-team-loading>span{width:48px;height:48px;border:5px solid #dcd6ef;border-top-color:#6c43e8;border-radius:50%;animation:liveSpin .8s linear infinite}.live-pulse-rings{position:relative;width:130px;height:130px;display:grid;place-items:center;margin-bottom:20px}.live-pulse-rings i{position:absolute;inset:0;border:2px solid rgba(110,70,230,.2);border-radius:50%;animation:liveRing 2s ease-out infinite}.live-pulse-rings i:nth-child(2){animation-delay:.55s}.live-pulse-rings i:nth-child(3){animation-delay:1.1s}.live-pulse-rings span{font-size:3rem}.live-team-kicker{font-weight:900;font-size:.74rem;letter-spacing:.15em;color:#6543ce}.live-team-wait h1,.live-team-finish h1{font-size:clamp(2rem,8vw,3.3rem);margin:8px 0}.live-team-wait>p,.live-team-finish>p{color:var(--muted)}.live-team-pin{margin:18px 0;padding:12px 22px;border-radius:18px;background:#fff;border:1px solid #e5e1ef}.live-team-pin small,.live-team-pin strong{display:block}.live-team-pin strong{font-size:2rem;letter-spacing:.1em}.live-team-count{font-weight:700;color:#5f5b69}.live-team-countdown span{font-size:1.4rem;font-weight:900;letter-spacing:.12em;color:#6844d9}.live-team-countdown strong{font-size:clamp(7rem,35vw,13rem);line-height:.9;color:#3c207e;animation:livePop .7s ease both}.live-team-countdown p{font-weight:700;color:#6d6879}
.live-question-stage{background:#fff;border:1px solid #e6e1f0;border-radius:26px;padding:22px;box-shadow:0 18px 48px rgba(50,38,89,.09)}.live-question-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;color:#6d6878;font-weight:800}.live-team-timer{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#6843de;color:#fff}.live-team-timer strong{font-size:1.5rem;line-height:1}.live-team-timer small{font-size:.55rem}.live-question-type{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eee9ff;color:#6841dc;font-size:.74rem;font-weight:900}.live-question-stage h2{font-size:clamp(1.45rem,6vw,2.15rem);line-height:1.28;margin:14px 0 18px}.live-question-image{display:block;max-width:100%;max-height:270px;object-fit:contain;margin:0 auto 18px;border-radius:15px}.live-question-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.live-answer-option{min-height:105px;border:0;border-radius:17px;padding:15px;color:#fff;background:#2e64d1;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;font:inherit;box-shadow:inset 0 -4px rgba(0,0,0,.12);transition:transform .12s ease,filter .12s ease}.live-answer-option:nth-child(2){background:#bb3048}.live-answer-option:nth-child(3){background:#bf8812}.live-answer-option:nth-child(4){background:#28854e}.live-answer-option:hover{filter:brightness(1.04);transform:translateY(-1px)}.live-answer-option:active{transform:scale(.98)}.live-answer-option span{font-size:1.5rem}.live-answer-option strong{font-size:1.02rem}.live-answer-help{display:block;margin-top:11px;text-align:center;color:#77717f}.live-pair-label,.live-sort-chip{display:inline-flex;margin-top:14px;padding:7px 10px;border-radius:9px;background:#17152d;color:#fff;font-size:.7rem;font-weight:900;letter-spacing:.12em}.live-mini-wheel{width:72px;height:72px;margin:14px auto;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.8rem;font-weight:900;background:conic-gradient(#e8425e 0 25%,#3569dc 0 50%,#efb423 0 75%,#2b9a58 0);border:5px solid #fff;box-shadow:0 0 0 2px #ddd6f0;animation:liveWheel .9s cubic-bezier(.2,.8,.2,1)}.live-card-reveal,.live-box-reveal{width:86px;height:102px;margin:14px auto;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#6541df,#8e6cff);color:#fff;font-size:2rem;font-weight:900;animation:liveFlip .8s ease}.live-box-reveal{height:86px;border-radius:18px}
.live-unjumble-answer{min-height:76px;display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:12px;border:2px dashed #cfc7e8;border-radius:16px;margin:14px 0;background:#faf9fd}.live-unjumble-answer button,.live-unjumble-pool button{border:1px solid #d8d1eb;background:#fff;border-radius:10px;padding:9px 11px;font:inherit;font-weight:800;color:#31294b}.live-unjumble-pool{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.live-unjumble-pool button{background:#ede7ff;color:#5336b7}.live-answer-wait .live-answer-result{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;font-size:4rem;font-weight:900;background:#e7f8ee;color:#1f944d}.live-answer-wait.is-wrong .live-answer-result{background:#fff0f1;color:#c9374d}.live-answer-wait h2{font-size:2.4rem;margin:12px 0 4px}.live-answer-wait p{font-size:1.15rem}.live-wait-dots{display:flex;gap:8px;margin:22px 0}.live-wait-dots i{width:10px;height:10px;border-radius:50%;background:#6d48db;animation:liveDots 1s ease-in-out infinite}.live-wait-dots i:nth-child(2){animation-delay:.15s}.live-wait-dots i:nth-child(3){animation-delay:.3s}.live-answer-wait small{color:var(--muted)}
.live-team-board,.live-team-finish{background:#fff;border:1px solid #e6e1f0;border-radius:26px;padding:24px;box-shadow:0 18px 48px rgba(50,38,89,.09)}.live-team-board-head{display:flex;align-items:center;gap:13px;margin-bottom:18px;text-align:left}.live-team-board-head>span{font-size:2.7rem}.live-team-board-head small{font-weight:900;letter-spacing:.12em;color:#6541d4}.live-team-board-head h2{margin:2px 0}.live-team-board-head p{margin:3px 0;color:#6e6878}.live-team-board-list{display:grid;gap:8px;width:100%}.live-team-board-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:9px;text-align:left;padding:11px 12px;border:1px solid #e9e5f0;border-radius:14px}.live-team-board-row.is-me{border-color:#8b6bed;background:#f2eeff}.live-team-board-row>span{font-weight:900;color:#6543cd}.live-team-board-row strong,.live-team-board-row small{display:block}.live-team-board-row small{color:#77717e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-team-board-row b{color:#6040ca}.live-my-rank{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:17px 0 4px;padding:12px;border-radius:14px;background:#24154f;color:#fff}.live-my-rank strong{font-size:1.5rem;color:#ffe575}.live-my-rank small{opacity:.78}.live-board-wait{color:var(--muted);text-align:center;margin:18px 0 0}.live-final-points{font-size:3.2rem;color:#6340d0;margin:0 0 22px}
@keyframes liveSpin{to{transform:rotate(360deg)}}@keyframes livePop{0%{transform:scale(.35);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}@keyframes livePulse{50%{box-shadow:0 0 0 9px rgba(240,68,68,0)}}@keyframes liveRing{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.2);opacity:0}}@keyframes liveFloat{50%{transform:translateY(-8px)}}@keyframes liveDots{50%{transform:translateY(-6px);opacity:.45}}@keyframes liveWheel{from{transform:rotate(0)}to{transform:rotate(1080deg)}}@keyframes liveFlip{0%{transform:rotateY(90deg) scale(.8);opacity:0}100%{transform:rotateY(0) scale(1);opacity:1}}
@media(max-width:820px){.live-host-team-list{grid-template-columns:repeat(2,minmax(0,1fr))}.live-host-topbar,.live-host-section-head{align-items:stretch;flex-direction:column}.live-host-actions{width:100%}.live-host-actions .btn{flex:1}.live-pin-panel{align-items:flex-start;flex-direction:column}.live-pin-panel>div{display:grid;gap:5px}.live-host-options{grid-template-columns:1fr}.live-host-question-top{grid-template-columns:1fr auto 1fr}.live-team-topbar{top:58px}}
@media(max-width:540px){.live-host-page{padding-top:18px}.live-host-container{width:min(100% - 20px,1240px)}.live-host-lobby,.live-host-board,.live-host-question{padding:16px;border-radius:20px}.live-host-team-list{grid-template-columns:1fr}.live-host-question-timer{width:64px;height:64px}.live-host-question-timer strong{font-size:1.45rem}.live-host-question-top{font-size:.78rem}.live-host-option{min-height:72px}.live-join-card{padding:20px;border-radius:21px}.live-team-root{width:calc(100% - 18px);padding-top:18px}.live-question-stage,.live-team-board,.live-team-finish{padding:16px;border-radius:20px}.live-question-options{grid-template-columns:1fr}.live-answer-option{min-height:72px}.live-team-topbar{padding-left:12px;padding-right:12px}.live-team-topbar small{max-width:145px}}
@media(prefers-reduced-motion:reduce){.live-dot,.live-host-loading span,.live-team-loading>span,.live-pulse-rings i,.live-team-countdown strong,.live-host-countdown strong,.live-finish-trophy,.live-wait-dots i,.live-mini-wheel,.live-card-reveal,.live-box-reveal{animation:none!important}}
.live-go-flash{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(42,20,94,.92);color:#fff;font-size:clamp(4rem,20vw,10rem);font-weight:950;letter-spacing:.06em;pointer-events:none;animation:liveGoFlash 1s ease forwards}.live-go-flash.is-host{z-index:90}.student-live-join-banner{display:flex;align-items:center;gap:12px;margin:0 0 22px;padding:14px 16px;border-radius:17px;background:#251554;color:#fff;box-shadow:0 12px 28px rgba(47,27,103,.16)}.student-live-join-banner:hover{color:#fff;background:#311d69}.student-live-join-banner>div{min-width:0;flex:1}.student-live-join-banner strong,.student-live-join-banner small{display:block}.student-live-join-banner small{margin-top:2px;color:#d6cef0}.student-live-join-banner>b{white-space:nowrap}.student-sheet-live{background:#f1edff!important;border-color:#dcd2ff!important}.student-sheet-live span{color:#6841d9}@keyframes liveGoFlash{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1.08)}65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.4);visibility:hidden}}@media(max-width:520px){.student-live-join-banner>b{display:none}.student-live-join-banner{margin-bottom:15px}}
.live-host-unjumble-note{grid-column:1/-1;padding:24px;border:2px dashed rgba(255,255,255,.22);border-radius:18px;color:#e8e3fa;font-weight:800;background:rgba(255,255,255,.06)}

/* =========================================================
   Digitera V4.8.7 — Live Chat Guru <-> Developer
   ========================================================= */
.digitera-live-chat {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 1460;
    font-family: inherit;
}
.live-chat-fab {
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(145deg,#6841e8 0%,#7d50ef 55%,#9b63f3 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(91,55,221,.38),0 6px 14px rgba(40,32,90,.16);
    transition: transform .18s ease,box-shadow .18s ease;
}
.live-chat-fab:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(91,55,221,.44),0 8px 18px rgba(40,32,90,.18); }
.live-chat-fab:active { transform: scale(.96); }
.live-chat-fab-icon { width: 29px; height: 29px; display: grid; place-items: center; }
.live-chat-fab-icon svg { width: 29px; height: 29px; }
.live-chat-fab-icon .icon-fill { fill: rgba(255,255,255,.22); }
.live-chat-fab-icon .icon-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.live-chat-fab-pulse {
    position: absolute;
    inset: -5px;
    border: 2px solid rgba(124,80,239,.32);
    border-radius: 24px;
    pointer-events: none;
    opacity: 0;
}
.digitera-live-chat.has-unread .live-chat-fab-pulse { animation: digiteraChatPulse 1.65s ease-out infinite; }
@keyframes digiteraChatPulse { 0%{opacity:.75;transform:scale(.88)} 75%,100%{opacity:0;transform:scale(1.22)} }
.live-chat-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 999px;
    background: #ef3340;
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(194,34,49,.34);
}
.live-chat-badge[hidden] { display: none !important; }
.live-chat-panel {
    position: absolute;
    right: 0;
    bottom: 72px;
    width: min(390px, calc(100vw - 28px));
    height: min(590px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(108,75,220,.17);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(28,24,62,.23),0 8px 22px rgba(53,37,111,.12);
    transform-origin: right bottom;
    animation: digiteraChatIn .18s ease-out;
}
.live-chat-panel[hidden] { display: none !important; }
@keyframes digiteraChatIn { from{opacity:0;transform:translateY(12px) scale(.96)} to{opacity:1;transform:none} }
.live-chat-head {
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px 10px 14px;
    color: #fff;
    background: linear-gradient(135deg,#5e36dc,#7d50ed 62%,#925bec);
}
.live-chat-head-avatar {
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(255,255,255,.16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.live-chat-head-avatar svg { width: 24px; height: 24px; }
.live-chat-head-avatar .icon-fill { fill: rgba(255,255,255,.22); }
.live-chat-head-avatar .icon-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.live-chat-head-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.12; }
.live-chat-head-copy strong { overflow: hidden; color: #fff; font-size: .93rem; text-overflow: ellipsis; white-space: nowrap; }
.live-chat-head-copy small { margin-top: 5px; display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.82); font-size: .68rem; }
.live-chat-head-copy small i { width: 7px; height: 7px; border-radius: 50%; background: #70f0b1; box-shadow: 0 0 0 3px rgba(112,240,177,.15); }
.live-chat-close,.live-chat-back {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 11px;
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 1.5rem;
}
.live-chat-back { font-size: 1.8rem; }
.live-chat-back[hidden] { display: none !important; }
.live-chat-close:hover,.live-chat-back:hover { background: rgba(255,255,255,.2); }
.live-chat-conversations,.live-chat-thread { min-height: 0; flex: 1; }
.live-chat-conversations[hidden],.live-chat-thread[hidden] { display: none !important; }
.live-chat-conversations { display: flex; flex-direction: column; background: #f8f8fc; }
.live-chat-list-head { padding: 15px 17px 10px; display: flex; flex-direction: column; }
.live-chat-list-head strong { color: #242038; font-size: .94rem; }
.live-chat-list-head small { margin-top: 2px; color: #817b92; font-size: .7rem; }
.live-chat-list { min-height: 0; flex: 1; overflow-y: auto; padding: 4px 9px 12px; }
.live-chat-conversation {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border: 0;
    border-bottom: 1px solid #eceaf3;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.live-chat-conversation:hover { background: #fff; box-shadow: 0 7px 18px rgba(46,38,79,.06); }
.live-chat-conversation-avatar { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; background: #eee9ff; color: #6741da; font-size: .75rem; font-weight: 900; }
.live-chat-conversation-copy { min-width: 0; flex: 1; }
.live-chat-conversation-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live-chat-conversation-top strong { overflow: hidden; color: #28233a; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.live-chat-conversation-top time { flex: 0 0 auto; color: #9a95a7; font-size: .62rem; }
.live-chat-conversation-bottom { margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.live-chat-conversation-bottom span:first-child { min-width: 0; flex: 1; overflow: hidden; color: #817b90; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.live-chat-list-badge { min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #7047e7; color: #fff; font-size: .62rem; font-weight: 900; }
.live-chat-thread { display: flex; flex-direction: column; background: linear-gradient(180deg,#f7f5fd 0%,#fbfbfd 100%); }
.live-chat-messages { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 15px 13px 8px; scroll-behavior: smooth; }
.live-chat-message { margin: 0 0 9px; display: flex; flex-direction: column; align-items: flex-start; }
.live-chat-message.mine { align-items: flex-end; }
.live-chat-bubble { max-width: 84%; padding: 9px 12px 7px; border: 1px solid #ebe8f2; border-radius: 17px 17px 17px 5px; background: #fff; color: #332e43; box-shadow: 0 3px 10px rgba(55,45,88,.05); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; line-height: 1.42; }
.live-chat-message.mine .live-chat-bubble { border-color: #7249e5; border-radius: 17px 17px 5px 17px; background: linear-gradient(135deg,#6840df,#7a4bea); color: #fff; box-shadow: 0 5px 13px rgba(96,61,207,.19); }
.live-chat-message-meta { margin-top: 4px; padding: 0 3px; display: flex; align-items: center; gap: 5px; color: #9c96aa; font-size: .59rem; }
.live-chat-message.mine .live-chat-message-meta { justify-content: flex-end; }
.live-chat-read { color: #6b44d7; font-weight: 800; }
.live-chat-typing-status { min-height: 24px; padding: 3px 15px 6px; color: #9b96a6; font-size: .64rem; }
.live-chat-compose { display: flex; align-items: flex-end; gap: 8px; padding: 9px 10px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #ece9f2; background: rgba(255,255,255,.97); }
.live-chat-compose textarea { min-height: 42px; max-height: 110px; flex: 1; resize: none; overflow-y: auto; padding: 10px 12px; border: 1px solid #ded9ea; border-radius: 15px; background: #f8f7fb; color: #2d2939; font: inherit; font-size: .8rem; line-height: 1.35; outline: none; }
.live-chat-compose textarea:focus { border-color: #8e70e9; background: #fff; box-shadow: 0 0 0 3px rgba(112,71,231,.09); }
.live-chat-compose button { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 14px; background: linear-gradient(145deg,#6840df,#8352ee); color: #fff; cursor: pointer; box-shadow: 0 7px 16px rgba(102,65,218,.23); }
.live-chat-compose button:disabled { opacity: .55; cursor: wait; }
.live-chat-compose button svg { width: 20px; height: 20px; transform: rotate(-18deg); }
.live-chat-compose button .icon-fill { fill: rgba(255,255,255,.2); }
.live-chat-compose button .icon-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.live-chat-loading,.live-chat-empty { padding: 32px 18px; color: #918b9f; text-align: center; font-size: .76rem; }
.live-chat-empty strong { display: block; margin-bottom: 5px; color: #514b61; font-size: .84rem; }
.role-teacher .pwa-install-button,.role-developer .pwa-install-button { bottom: calc(88px + env(safe-area-inset-bottom)); }
@media (max-width: 640px) {
    .digitera-live-chat { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
    .live-chat-fab { width: 54px; height: 54px; border-radius: 18px; }
    .live-chat-panel { right: 0; bottom: 66px; width: calc(100vw - 24px); height: min(640px, calc(100dvh - 98px)); border-radius: 22px; }
    .live-chat-bubble { max-width: 88%; }
    .role-teacher .pwa-install-button,.role-developer .pwa-install-button { bottom: calc(78px + env(safe-area-inset-bottom)); }
}
@media (max-width: 390px) {
    .live-chat-panel { width: calc(100vw - 18px); right: -3px; }
    .live-chat-head { min-height: 66px; padding-left: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .live-chat-panel,.digitera-live-chat.has-unread .live-chat-fab-pulse { animation: none !important; }
}
.digitera-live-chat.chat-notification-pop .live-chat-fab { animation: digiteraChatPop .42s ease; }
@keyframes digiteraChatPop { 0%,100%{transform:none} 40%{transform:translateY(-5px) scale(1.08)} 70%{transform:translateY(1px) scale(.98)} }

/* Digitera V4.8.9 — Kahoot-style question creator + dynamic answer options */
.kahoot-creator-page{width:min(1480px,calc(100% - 20px));}
.kahoot-creator-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 14px;padding:12px 14px;border-radius:14px;background:linear-gradient(90deg,#4b168f,#6422a8);box-shadow:0 12px 28px rgba(75,22,143,.18)}
.kahoot-creator-brand{display:flex;align-items:center;gap:12px;min-width:0;color:#fff}.kahoot-creator-brand>span{font-weight:950;font-size:1.05rem;white-space:nowrap}.kahoot-creator-brand input{width:min(460px,48vw);height:40px;border:0!important;border-radius:8px!important;background:#fff!important;color:#2d2441!important;font-weight:750;box-shadow:none!important}.kahoot-creator-actions{display:flex;gap:8px}.kahoot-creator-actions .btn{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.14);color:#fff}.kahoot-creator-actions .btn:hover{background:rgba(255,255,255,.22);color:#fff}.kahoot-done-button{background:#fff!important;color:#4b168f!important}
.kahoot-question-workspace{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;align-items:start}.kahoot-question-rail{position:sticky;top:82px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 100px);padding:14px;border:1px solid #dfe2e8;border-radius:14px;background:#fff;box-shadow:0 10px 25px rgba(22,30,47,.07)}.kahoot-question-rail-head strong,.kahoot-question-rail-head span{display:block}.kahoot-question-rail-head span{margin-top:2px;color:#7b8391;font-size:.78rem}.kahoot-question-thumbs{display:grid;gap:8px;overflow:auto;padding-right:2px}.kahoot-question-thumb{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:center;min-height:58px;padding:8px;border:2px solid transparent;border-radius:10px;color:#333;background:#f7f8fa}.kahoot-question-thumb:hover{color:#333;background:#f0ecff}.kahoot-question-thumb.active{border-color:#6d3ce8;background:#eee9ff}.kahoot-question-thumb b{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#fff;color:#6d3ce8;font-size:.76rem}.kahoot-question-thumb span{font-size:.78rem;line-height:1.3;overflow-wrap:anywhere}.kahoot-add-question,.kahoot-question-bank{width:100%}
.kahoot-question-main{min-width:0;padding:0 0 12px}.kahoot-question-main .quiz-studio-page-head{padding:14px 12px 10px}.kahoot-question-main .quiz-studio-tip{display:none}.kahoot-question-main .quiz-studio-toolbar{top:78px;border-radius:12px;box-shadow:0 6px 18px rgba(25,25,35,.09)}
.kahoot-question-main .quiz-studio-canvas{padding:24px;border:1px solid #dde1e7;border-radius:10px;color:#2c3140;background:#eef0f3;box-shadow:none}.kahoot-question-main .quiz-studio-canvas::after{display:none}.kahoot-question-main .studio-question-box>label{color:#666f7e}.kahoot-question-main .studio-question-input{min-height:138px;border:1px solid #d9dde4!important;border-radius:8px!important;box-shadow:0 3px 10px rgba(24,32,47,.08)!important;font-size:clamp(1.35rem,2.3vw,2rem)!important}.kahoot-question-main .studio-question-hint{color:#7b8391}.kahoot-question-main .studio-media-zone{min-height:160px;border:2px dashed #cfd4dd;border-radius:10px;background:#fff}.kahoot-question-main .studio-media-copy strong{color:#3b4250}.kahoot-question-main .studio-media-copy span{color:#7f8795}.kahoot-question-main .studio-upload-button{color:#5530bd;background:#eee9ff}.kahoot-question-main .studio-section-title span,.kahoot-question-main .studio-section-title small{color:#687180}.kahoot-question-main .studio-section-title strong{color:#2f3542}
.studio-answer-grid-dynamic{align-items:stretch}.studio-answer-tile{overflow:visible}.studio-answer-tile.answer-purple{background:#7a43d6}.studio-answer-tile.answer-teal{background:#118a8a}.studio-answer-tile.answer-orange{background:#e46f22}.studio-answer-tile.answer-pink{background:#d9468f}.studio-answer-tile.answer-indigo{background:#4659c9}.studio-answer-tile.answer-cyan{background:#1688bd}.answer-remove-button{position:absolute;top:-9px;right:-9px;display:grid;place-items:center;width:27px;height:27px;padding:0;border:2px solid #fff;border-radius:50%;color:#fff;background:#303746;font-size:1rem;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 4px 11px rgba(25,30,42,.28);z-index:3}.answer-remove-button:hover{background:#c73747}.studio-answer-add-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:10px 12px;border:1px dashed #cfd4dd;border-radius:10px;background:rgba(255,255,255,.78)}.studio-answer-add-row span{color:#697282;font-size:.84rem}.studio-add-answer-button{border-color:#7151d6!important;color:#5f39ca!important;background:#f2eeff!important}.studio-add-answer-button:hover{color:#fff!important;background:#6741d6!important}.studio-add-answer-button:disabled{opacity:.45;cursor:not-allowed}.bulk-answer-add-row{margin-bottom:12px}
@media (max-width:1050px){.kahoot-question-workspace{grid-template-columns:190px minmax(0,1fr)}.kahoot-question-rail{top:76px;padding:10px}.kahoot-question-main .quiz-studio-canvas{padding:18px}}
@media (max-width:780px){.kahoot-creator-page{width:min(100% - 12px,1480px)}.kahoot-creator-bar{align-items:stretch;flex-direction:column}.kahoot-creator-brand{align-items:stretch;flex-direction:column}.kahoot-creator-brand input{width:100%}.kahoot-creator-actions{display:grid;grid-template-columns:1fr 1fr}.kahoot-question-workspace{display:block}.kahoot-question-rail{position:static;max-height:none;margin-bottom:10px}.kahoot-question-thumbs{display:flex;overflow-x:auto;padding:2px 0 6px}.kahoot-question-thumb{flex:0 0 150px}.kahoot-question-rail .kahoot-add-question,.kahoot-question-rail .kahoot-question-bank{display:inline-flex;width:auto}.kahoot-question-main .quiz-studio-toolbar{position:static}.kahoot-question-main .quiz-studio-canvas{padding:13px}.studio-answer-add-row{align-items:stretch;flex-direction:column}.studio-answer-add-row .btn{width:100%}}

/* =========================================================
   Digitera V4.9.0 — Notification Center + Floating Toasts
   ========================================================= */
.menu-notification-badge,
.app-notification-badge,
.student-sheet-notification-icon > b {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-size: .68rem;
    line-height: 1;
    font-weight: 900;
    box-shadow: 0 3px 9px rgba(239,68,68,.32);
}
.menu-notification-badge[hidden],.app-notification-badge[hidden],.student-sheet-notification-icon > b[hidden]{display:none!important}
.teacher-notification-link{position:relative}
.teacher-notification-link .menu-notification-badge{margin-left:auto}
.developer-notification-nav{position:relative}
.developer-notification-nav .menu-notification-badge{margin-left:2px}
.app-notification-button{
    position:relative;
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:inline-grid;
    place-items:center;
    border:1px solid #e5ddff;
    border-radius:15px;
    color:#6941d9;
    background:#f8f5ff;
    transition:.18s ease;
}
.app-notification-button:hover,.app-notification-button.active{color:#fff;background:#7047eb;border-color:#7047eb;transform:translateY(-1px)}
.app-notification-button svg{width:22px;height:22px}
.app-notification-button .icon-fill{fill:currentColor;opacity:.12}.app-notification-button .icon-line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-notification-badge{position:absolute;right:-5px;top:-6px;border:2px solid #fff}
.student-sheet-notification-icon{position:relative;display:grid!important;place-items:center}
.student-sheet-notification-icon > b{position:absolute;right:-9px;top:-8px;border:2px solid #fff}

.floating-notification-stack{
    position:fixed;
    z-index:2500;
    right:max(18px,env(safe-area-inset-right));
    top:84px;
    width:min(390px,calc(100vw - 30px));
    display:grid;
    gap:11px;
    pointer-events:none;
}
.floating-notification-toast{
    --toast-accent:#7047eb;
    pointer-events:auto;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 30px;
    gap:11px;
    align-items:start;
    padding:13px 12px;
    border:1px solid rgba(112,71,235,.16);
    border-left:4px solid var(--toast-accent);
    border-radius:18px;
    background:rgba(255,255,255,.97);
    box-shadow:0 18px 55px rgba(28,24,48,.18),0 3px 12px rgba(28,24,48,.08);
    backdrop-filter:blur(18px);
    transform:translate3d(32px,-8px,0) scale(.97);
    opacity:0;
    transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1);
}
.floating-notification-toast.is-visible{transform:translate3d(0,0,0) scale(1);opacity:1}
.floating-notification-toast.is-leaving{transform:translate3d(20px,-5px,0) scale(.98);opacity:0}
.floating-notification-toast.type-success{--toast-accent:#16a34a}.floating-notification-toast.type-warning{--toast-accent:#d97706}.floating-notification-toast.type-danger{--toast-accent:#dc2626}.floating-notification-toast.type-chat{--toast-accent:#7c3aed}.floating-notification-toast.type-payment{--toast-accent:#0f766e}.floating-notification-toast.type-quiz{--toast-accent:#2563eb}.floating-notification-toast.type-task{--toast-accent:#0891b2}.floating-notification-toast.type-content{--toast-accent:#9333ea}.floating-notification-toast.type-live{--toast-accent:#e11d48}
.floating-notification-icon{
    width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
    background:color-mix(in srgb,var(--toast-accent) 12%,white);
    color:var(--toast-accent);font-weight:950;font-size:1.05rem;
}
.floating-notification-copy{min-width:0}.floating-notification-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.floating-notification-top strong{color:#201b32;font-size:.94rem;line-height:1.3}.floating-notification-top small{flex:0 0 auto;color:#98a2b3;font-size:.68rem;margin-top:2px}.floating-notification-copy p{margin:5px 0 0;color:#667085;font-size:.83rem;line-height:1.45;overflow-wrap:anywhere}.floating-notification-actions{display:flex;gap:12px;margin-top:8px}.floating-notification-actions a{font-size:.76rem;font-weight:850;color:var(--toast-accent)}.floating-notification-close{width:28px;height:28px;border:0;border-radius:9px;background:#f4f2f8;color:#7b7489;font-size:1.15rem;line-height:1;cursor:pointer}.floating-notification-close:hover{background:#ece8f5;color:#332d40}

.notification-page-shell{max-width:980px}.notification-page-head{align-items:center}.notification-center-card{background:#fff;border:1px solid #e8e4f1;border-radius:24px;overflow:hidden;box-shadow:0 16px 45px rgba(31,24,55,.07)}
.notification-center-summary{display:flex;gap:26px;padding:18px 24px;border-bottom:1px solid #eeeaf5;background:linear-gradient(135deg,#fbfaff,#f6f2ff)}.notification-center-summary>div{display:flex;align-items:baseline;gap:8px}.notification-center-summary strong{font-size:1.45rem;color:#4e32b5}.notification-center-summary span{color:#7e778a;font-size:.84rem}.notification-list-page{display:grid}.notification-page-item{--note:#7047eb;position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 12px;gap:14px;padding:19px 22px;border-bottom:1px solid #f0edf5;transition:.16s ease}.notification-page-item:last-child{border-bottom:0}.notification-page-item.is-unread{background:linear-gradient(90deg,color-mix(in srgb,var(--note) 5%,white),#fff 55%)}.notification-page-item:hover{background:#faf9fd}.notification-page-item.type-success{--note:#16a34a}.notification-page-item.type-warning{--note:#d97706}.notification-page-item.type-danger{--note:#dc2626}.notification-page-item.type-chat{--note:#7c3aed}.notification-page-item.type-payment{--note:#0f766e}.notification-page-item.type-quiz{--note:#2563eb}.notification-page-item.type-task{--note:#0891b2}.notification-page-item.type-content{--note:#9333ea}.notification-page-item.type-live{--note:#e11d48}.notification-page-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:color-mix(in srgb,var(--note) 10%,white);color:var(--note)}.notification-page-icon svg{width:24px;height:24px}.notification-page-icon .icon-fill{fill:currentColor;opacity:.15}.notification-page-icon .icon-line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.notification-page-copy{min-width:0}.notification-page-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.notification-type-chip{display:inline-flex;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--note) 10%,white);color:var(--note);font-size:.7rem;font-weight:900}.notification-page-top time{font-size:.76rem;color:#98a2b3}.notification-page-copy h3{margin:6px 0 2px;font-size:1rem;color:#252033}.notification-page-copy p{margin:0;color:#667085;font-size:.88rem;line-height:1.5}.notification-page-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.notification-page-actions form{margin:0}.notification-unread-dot{width:9px;height:9px;border-radius:50%;background:var(--note);margin-top:20px;box-shadow:0 0 0 4px color-mix(in srgb,var(--note) 12%,transparent)}.notification-empty{border:0!important;background:#fff!important}.notification-empty-icon{width:64px;height:64px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;background:#f2edff;color:#7047eb}.notification-empty-icon svg{width:30px;height:30px}.notification-empty-icon .icon-fill{fill:currentColor;opacity:.14}.notification-empty-icon .icon-line{fill:none;stroke:currentColor;stroke-width:1.8}

@media(max-width:720px){
    .floating-notification-stack{top:76px;right:12px;width:calc(100vw - 24px)}
    .floating-notification-toast{grid-template-columns:42px minmax(0,1fr) 28px;padding:12px 10px;border-radius:16px}.floating-notification-icon{width:40px;height:40px;border-radius:13px}.floating-notification-top{display:block}.floating-notification-top small{display:block;margin-top:2px}.floating-notification-copy p{font-size:.8rem}
    .teacher-topbar-actions .teacher-notification-button{display:inline-grid!important;width:42px;height:42px;flex-basis:42px}
    .student-notification-button{width:42px;height:42px;flex-basis:42px;border-radius:14px}
    .notification-center-summary{padding:15px 17px;gap:18px}.notification-page-item{grid-template-columns:44px minmax(0,1fr) 10px;padding:15px 14px;gap:10px}.notification-page-icon{width:42px;height:42px}.notification-page-top{align-items:flex-start;flex-direction:column;gap:4px}.notification-page-copy h3{font-size:.94rem}.notification-page-copy p{font-size:.82rem}.notification-page-actions{flex-wrap:wrap}
}
@media(max-width:390px){.student-top-code{display:none}.app-notification-button{width:40px;height:40px;flex-basis:40px}.floating-notification-stack{top:70px}.notification-page-item{grid-template-columns:40px minmax(0,1fr) 8px}.notification-page-icon{width:38px;height:38px;border-radius:12px}.notification-center-summary>div{display:block}.notification-center-summary span{display:block}}

/* Digitera V4.9.2 — Web Push permission & device notification controls */
.push-permission-prompt{
    position:fixed;right:22px;bottom:104px;z-index:90;width:min(390px,calc(100vw - 28px));
    display:grid;grid-template-columns:48px minmax(0,1fr) auto 28px;align-items:center;gap:12px;
    padding:14px;background:#fff;border:1px solid #e7e1f4;border-radius:20px;box-shadow:0 18px 48px rgba(38,27,71,.18)
}
.push-permission-prompt[hidden]{display:none!important}.push-permission-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:#f0eaff;color:#7047eb}.push-permission-icon svg{width:24px;height:24px}.push-permission-icon .icon-fill{fill:currentColor;opacity:.14}.push-permission-icon .icon-line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.push-permission-copy{min-width:0}.push-permission-copy strong,.push-permission-copy small{display:block}.push-permission-copy strong{color:#282238;font-size:.9rem}.push-permission-copy small{margin-top:3px;color:#777082;font-size:.76rem;line-height:1.4}.push-permission-dismiss{width:28px;height:28px;border:0;border-radius:9px;background:#f5f2fa;color:#847c90;font-size:1.15rem;cursor:pointer}.push-permission-dismiss:hover{background:#ece7f5;color:#332b43}
.notification-device-card{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:15px;margin:0 0 18px;padding:17px 20px;background:linear-gradient(135deg,#faf8ff,#fff);border:1px solid #e5dff2;border-radius:20px}.notification-device-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:17px;background:#eee8ff;color:#7047eb}.notification-device-icon svg{width:27px;height:27px}.notification-device-icon .icon-fill{fill:currentColor;opacity:.14}.notification-device-icon .icon-line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.notification-device-card strong{display:block;color:#282238}.notification-device-card p{margin:4px 0 0;color:#777082;font-size:.86rem}.notification-device-actions{display:flex;gap:8px;align-items:center}
@media(max-width:700px){.push-permission-prompt{right:12px;bottom:94px;grid-template-columns:44px minmax(0,1fr) 28px}.push-permission-prompt [data-push-enable]{grid-column:2/4;width:100%}.push-permission-icon{width:42px;height:42px}.notification-device-card{grid-template-columns:46px minmax(0,1fr);padding:15px}.notification-device-icon{width:44px;height:44px;border-radius:14px}.notification-device-actions{grid-column:1/-1}.notification-device-actions .btn{flex:1}}

/* =========================================================
   Digitera V4.9.3 — Absensi Online
   ========================================================= */
.attendance-page{padding-bottom:32px}
.attendance-page-head{align-items:center}
.attendance-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:4px 0 24px}
.attendance-stat-grid article{display:flex;align-items:center;gap:13px;padding:17px 18px;background:#fff;border:1px solid #e9e5f6;border-radius:18px;box-shadow:0 8px 24px rgba(64,45,125,.06)}
.attendance-stat-grid article small,.attendance-stat-grid article strong{display:block}.attendance-stat-grid article small{font-size:.78rem;color:#7a7193;font-weight:700}.attendance-stat-grid article strong{font-size:1.55rem;line-height:1.1;margin-top:3px;color:#2b2242}
.attendance-stat-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#f1edff;font-size:1.25rem;flex:0 0 auto}
.attendance-class-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
.attendance-class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.attendance-class-card{background:#fff;border:1px solid #e8e3f5;border-radius:20px;padding:20px;box-shadow:0 10px 28px rgba(63,43,120,.07);transition:.18s ease}
.attendance-class-card:hover{transform:translateY(-2px);border-color:#cfc3f5}.attendance-class-card.is-inactive{opacity:.68}
.attendance-class-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.attendance-class-avatar{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#6f4ce8,#9275ff);color:#fff;font-weight:900;letter-spacing:.02em}.attendance-class-card h3{font-size:1.1rem;margin:0 0 5px}.attendance-class-card>p{margin:0;color:#746b88;font-size:.88rem}.attendance-class-meta{display:flex;gap:10px;margin-top:16px}.attendance-class-meta span{padding:7px 10px;border-radius:10px;background:#f7f5fc;color:#756c89;font-size:.78rem}.attendance-class-meta strong{color:#352a51}.attendance-last-date{display:block;color:#8c849c;margin-top:12px}.attendance-class-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.attendance-create-card{position:sticky;top:92px}.attendance-recent-card{margin-top:22px}.attendance-history-table{min-width:720px}.attendance-mini{display:inline-grid;min-width:30px;height:28px;place-items:center;border-radius:9px;font-weight:800;font-size:.82rem}.attendance-mini.present{background:#dcfce7;color:#166534}.attendance-mini.excused{background:#dbeafe;color:#1d4ed8}.attendance-mini.sick{background:#fef3c7;color:#92400e}.attendance-mini.absent{background:#fee2e2;color:#b91c1c}
.attendance-manager-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}.attendance-class-settings{position:sticky;top:92px}.attendance-add-student-card{margin-bottom:18px}.attendance-inline-student-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) auto;gap:12px;align-items:end}.attendance-inline-student-form .form-group{margin:0}.attendance-bulk-details{margin-top:16px;border-top:1px solid #eeeaf6;padding-top:14px}.attendance-bulk-details summary{cursor:pointer;color:#6844db;font-weight:800}.attendance-bulk-details form{margin-top:14px}.attendance-search{display:flex;align-items:center;gap:7px;border:1px solid #ddd6ed;border-radius:12px;padding:0 10px;background:#fff;min-width:210px}.attendance-search input{border:0!important;box-shadow:none!important;padding:9px 4px!important;background:transparent}.attendance-student-list{display:grid;gap:8px}.attendance-student-row{display:grid;grid-template-columns:28px 38px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 11px;border:1px solid #eeeaf5;border-radius:14px;background:#fff}.attendance-student-row.is-inactive{opacity:.6;background:#fafafa}.attendance-student-number{font-size:.78rem;color:#9289a2;text-align:center}.attendance-student-avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#eee9ff;color:#6341d5;font-weight:900}.attendance-student-copy strong,.attendance-student-copy small{display:block}.attendance-student-copy small{font-size:.76rem;color:#8b829b}.attendance-student-menu{position:relative}.attendance-student-menu>summary{list-style:none;cursor:pointer;font-weight:900;letter-spacing:2px;padding:7px}.attendance-student-menu>summary::-webkit-details-marker{display:none}.attendance-student-menu>div{position:absolute;z-index:8;right:0;top:35px;width:230px;padding:10px;border:1px solid #e4dff0;border-radius:14px;background:#fff;box-shadow:0 16px 40px rgba(31,24,51,.16)}.attendance-student-edit-form{display:grid;gap:7px;margin-bottom:8px}.attendance-student-edit-form input{padding:8px 9px}.attendance-student-menu form+form{margin-top:6px}
.attendance-date-bar,.attendance-report-filter{display:flex;align-items:end;gap:10px;margin-bottom:16px;padding:14px 16px}.attendance-date-bar>div,.attendance-report-filter>div{min-width:190px}.attendance-date-bar label,.attendance-report-filter label{display:block;font-weight:800;font-size:.8rem;margin-bottom:5px}.attendance-date-bar input,.attendance-report-filter input{padding:8px 10px}
.attendance-live-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.attendance-live-summary article{padding:12px 14px;border-radius:14px;border:1px solid transparent;display:flex;justify-content:space-between;align-items:center}.attendance-live-summary small{font-weight:800}.attendance-live-summary strong{font-size:1.3rem}.attendance-live-summary .present{background:#ecfdf3;color:#166534;border-color:#bbf7d0}.attendance-live-summary .excused{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}.attendance-live-summary .sick{background:#fffbeb;color:#92400e;border-color:#fde68a}.attendance-live-summary .absent{background:#fff1f2;color:#b91c1c;border-color:#fecdd3}
.attendance-sheet{display:grid;gap:14px}.attendance-sheet-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid #e9e4f3;border-radius:16px;padding:10px 12px;position:sticky;top:78px;z-index:7;box-shadow:0 8px 24px rgba(39,28,72,.07)}.attendance-mark-all{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.attendance-mark-all>span{font-size:.78rem;color:#7f768e;font-weight:700}.attendance-mark-all button{border:0;border-radius:9px;padding:7px 9px;background:#f3f0f9;font-weight:800;font-size:.75rem;cursor:pointer}.attendance-roster{display:grid;gap:8px}.attendance-roster-row{display:grid;grid-template-columns:32px 42px minmax(150px,.9fr) minmax(330px,1.6fr) minmax(150px,.75fr);align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid #eae5f3;border-radius:16px}.attendance-roster-number{color:#968ea4;text-align:center;font-size:.8rem}.attendance-roster-avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#f0ecff;color:#6240d2;font-weight:900}.attendance-roster-name strong,.attendance-roster-name small{display:block}.attendance-roster-name small{font-size:.75rem;color:#91889f}.attendance-status-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.attendance-status-option input{position:absolute;opacity:0;pointer-events:none}.attendance-status-option span{display:grid;place-items:center;min-height:38px;border-radius:10px;border:1px solid #e6e1ec;background:#f9f8fb;color:#655d70;font-size:.78rem;font-weight:800;cursor:pointer;transition:.15s}.attendance-status-option.present input:checked+span{background:#16a34a;border-color:#16a34a;color:#fff}.attendance-status-option.excused input:checked+span{background:#2563eb;border-color:#2563eb;color:#fff}.attendance-status-option.sick input:checked+span{background:#d97706;border-color:#d97706;color:#fff}.attendance-status-option.absent input:checked+span{background:#dc2626;border-color:#dc2626;color:#fff}.attendance-student-note{padding:8px 9px!important;font-size:.8rem}.attendance-save-panel{display:flex;align-items:end;gap:16px;justify-content:space-between;position:sticky;bottom:12px;z-index:6;box-shadow:0 14px 40px rgba(43,30,76,.12)}.attendance-save-panel .form-group{margin:0;flex:1}.attendance-save-actions{display:flex;gap:8px}
.attendance-report-stats{margin-top:16px}.attendance-report-table-card{margin-top:18px}.attendance-progress{width:92px;height:7px;border-radius:999px;background:#eeeaf4;overflow:hidden;margin-top:5px}.attendance-progress i{display:block;height:100%;background:linear-gradient(90deg,#6c49db,#8a72ee);border-radius:inherit}.attendance-session-list{display:grid;gap:8px}.attendance-session-list>a{display:grid;grid-template-columns:54px minmax(0,1fr) auto 20px;gap:12px;align-items:center;border:1px solid #ece7f4;border-radius:14px;padding:10px 12px;color:#302745}.attendance-session-list>a:hover{border-color:#cec1f1;background:#fbfaff}.attendance-session-date{width:48px;height:48px;border-radius:12px;background:#f1edff;display:grid;place-items:center;align-content:center}.attendance-session-date strong{font-size:1.1rem;line-height:1}.attendance-session-date small{font-size:.62rem;color:#786d8e}.attendance-session-list>a>div strong,.attendance-session-list>a>div small{display:block}.attendance-session-list>a>div small{color:#8b8299;font-size:.77rem;margin-top:2px}

@media(max-width:1100px){.attendance-class-layout,.attendance-manager-grid{grid-template-columns:1fr}.attendance-create-card,.attendance-class-settings{position:static}.attendance-roster-row{grid-template-columns:32px 42px minmax(140px,1fr);}.attendance-status-picker{grid-column:1/-1;margin-left:84px}.attendance-student-note{grid-column:1/-1;margin-left:84px}}
@media(max-width:760px){.attendance-page-head{align-items:flex-start}.attendance-stat-grid{grid-template-columns:repeat(2,1fr);gap:9px}.attendance-stat-grid article{padding:13px;border-radius:15px}.attendance-stat-icon{width:36px;height:36px;font-size:1rem}.attendance-stat-grid article strong{font-size:1.25rem}.attendance-class-grid{grid-template-columns:1fr}.attendance-inline-student-form{grid-template-columns:1fr}.attendance-student-row{grid-template-columns:24px 36px minmax(0,1fr) auto}.attendance-student-row>.badge{display:none}.attendance-sheet-toolbar{top:68px;align-items:stretch;flex-direction:column}.attendance-search{width:100%}.attendance-mark-all{display:grid;grid-template-columns:repeat(4,1fr)}.attendance-mark-all>span{grid-column:1/-1}.attendance-roster-row{grid-template-columns:28px 38px minmax(0,1fr);padding:10px}.attendance-status-picker{grid-column:1/-1;margin-left:0}.attendance-student-note{grid-column:1/-1;margin-left:0}.attendance-save-panel{align-items:stretch;flex-direction:column;bottom:78px}.attendance-save-actions{display:grid;grid-template-columns:1fr 1fr}.attendance-date-bar,.attendance-report-filter{align-items:stretch;flex-wrap:wrap}.attendance-date-bar>div,.attendance-report-filter>div{width:100%}.attendance-live-summary{grid-template-columns:repeat(4,1fr);gap:5px}.attendance-live-summary article{display:grid;place-items:center;padding:8px 4px}.attendance-live-summary small{font-size:.66rem}.attendance-live-summary strong{font-size:1.1rem}.attendance-session-list>a{grid-template-columns:48px minmax(0,1fr) auto}.attendance-session-list>a>b{display:none}}
@media(max-width:390px){.attendance-stat-grid{grid-template-columns:repeat(2,1fr)}.attendance-status-picker{grid-template-columns:repeat(2,1fr)}.attendance-save-actions{grid-template-columns:1fr}.attendance-mark-all{grid-template-columns:repeat(2,1fr)}}


/* ================================================================
   V4.9.4 Marketplace Dokumen — Play Store inspired
   ================================================================ */
.marketplace-store-shell{min-height:72vh;background:#f7f9fc;color:#202631}
.marketplace-store-top{position:sticky;top:0;z-index:14;background:rgba(255,255,255,.96);border-bottom:1px solid #e8edf4;backdrop-filter:blur(16px)}
.role-teacher .marketplace-store-top{top:72px}
.marketplace-store-bar{display:grid;grid-template-columns:auto minmax(280px,680px) auto;align-items:center;gap:22px;padding:17px 0 11px}
.marketplace-store-brand{display:flex;align-items:center;gap:11px;white-space:nowrap}.marketplace-store-brand>div{display:flex;flex-direction:column}.marketplace-store-brand strong{font-size:1.05rem}.marketplace-store-brand small{color:#7c8799;font-size:.72rem}
.marketplace-store-logo{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#eef7ff;color:#1769e0}.marketplace-store-logo svg{width:25px;height:25px}
.marketplace-search{height:48px;display:flex;align-items:center;gap:10px;border:1px solid #dce3ec;background:#f8fafc;border-radius:24px;padding:0 6px 0 16px}.marketplace-search>span{width:21px;height:21px;color:#68768b}.marketplace-search svg{width:21px;height:21px}.marketplace-search input{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}.marketplace-search button{border:0;border-radius:20px;padding:9px 17px;background:#1769e0;color:#fff;font-weight:800;cursor:pointer}
.marketplace-access-chip{display:flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #e0e6ee;border-radius:16px;background:#fff;white-space:nowrap}.marketplace-access-chip>div{display:flex;flex-direction:column}.marketplace-access-chip small{color:#7f8998;font-size:.66rem}.marketplace-access-chip strong{font-size:.8rem}.marketplace-access-chip.unlocked{border-color:#bde8cf;background:#f2fff7;color:#187545}.marketplace-access-chip.locked>span{filter:grayscale(.15)}
.marketplace-category-tabs{display:flex;gap:26px;overflow:auto;padding:0 0 10px;scrollbar-width:none}.marketplace-category-tabs::-webkit-scrollbar{display:none}.marketplace-category-tabs a{flex:0 0 auto;padding:8px 2px;color:#657185;font-weight:750;font-size:.88rem;border-bottom:3px solid transparent}.marketplace-category-tabs a.active{color:#1769e0;border-bottom-color:#1769e0}
.marketplace-content{padding-top:28px;padding-bottom:70px}.marketplace-hero-banner{display:grid;grid-template-columns:1.35fr .65fr;gap:26px;align-items:center;padding:35px;border-radius:28px;background:linear-gradient(125deg,#0f6ce5,#7248f5);color:#fff;overflow:hidden}.marketplace-hero-banner .eyebrow{background:rgba(255,255,255,.16);color:#fff}.marketplace-hero-banner h1{font-size:clamp(1.9rem,4vw,3rem);max-width:720px;margin:12px 0}.marketplace-hero-banner p{max-width:720px;color:#edf5ff;font-size:1.03rem}.marketplace-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.marketplace-hero-banner .btn-secondary{background:#fff;color:#2452a4;border-color:#fff}.marketplace-premium-ready{display:inline-flex;align-items:center;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.16);font-weight:800}.marketplace-hero-art{min-height:210px;position:relative;display:grid;place-items:center}.marketplace-hero-art span{position:absolute;display:grid;place-items:center;width:108px;height:108px;border-radius:25px;background:#fff;color:#1769e0;font-weight:950;box-shadow:0 20px 45px rgba(14,35,77,.18);transform:rotate(-8deg)}.marketplace-hero-art span:nth-child(2){transform:translate(65px,50px) rotate(9deg);color:#7146e9}.marketplace-hero-art span:nth-child(3){transform:translate(-75px,62px) rotate(-15deg);color:#188d68}
.marketplace-section{margin-top:38px}.marketplace-section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:17px}.marketplace-section-head h2{margin:0 0 4px;font-size:1.45rem}.marketplace-section-head p{margin:0;color:#7a8494}.marketplace-section-head>span,.marketplace-section-head>a{color:#1769e0;font-weight:800;font-size:.88rem}
.marketplace-featured-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(285px,360px);gap:18px;overflow-x:auto;padding:2px 2px 14px;scroll-snap-type:x proximity}.marketplace-featured-card{display:grid;grid-template-columns:124px 1fr;gap:15px;align-items:center;color:#202631;padding:12px;border-radius:20px;background:#fff;border:1px solid #e7ebf1;scroll-snap-align:start;transition:.18s ease}.marketplace-featured-card:hover{color:#202631;transform:translateY(-2px);box-shadow:0 12px 30px rgba(31,53,83,.08)}
.marketplace-cover,.marketplace-app-cover,.developer-market-cover,.marketplace-detail-cover{position:relative;overflow:hidden;background:#eef2f7}.marketplace-cover-large{width:124px;height:124px;border-radius:22px}.marketplace-cover img,.marketplace-app-cover img,.developer-market-cover img,.marketplace-detail-cover img{width:100%;height:100%;object-fit:cover;display:block}.marketplace-cover-fallback{width:100%;height:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;text-align:center;background:linear-gradient(145deg,#e8f3ff,#ece7ff);color:#245db3}.marketplace-cover-fallback b{font-size:1.25rem}.marketplace-cover-fallback small{color:#65748b;font-weight:700}.marketplace-premium-tag{position:absolute;right:7px;top:7px;padding:4px 6px;border-radius:7px;background:#202631;color:#fff;font-size:.58rem;font-weight:900}.marketplace-card-copy h3,.marketplace-app-copy h3{margin:0 0 6px;font-size:1rem;line-height:1.3}.marketplace-card-copy p,.marketplace-app-copy p{margin:0 0 8px;color:#687587;font-size:.82rem}.marketplace-card-copy small{color:#8b95a4}
.marketplace-app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.marketplace-app-card{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:13px;color:#202631;min-width:0}.marketplace-app-card:hover{color:#202631}.marketplace-app-cover{width:90px;height:90px;border-radius:20px;box-shadow:0 5px 16px rgba(30,52,78,.08)}.marketplace-app-copy{min-width:0}.marketplace-app-copy h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.marketplace-app-copy p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.marketplace-card-meta{display:flex;gap:7px;align-items:center;color:#788596;font-size:.71rem}.marketplace-card-meta span:not(:last-child)::after{content:'•';margin-left:7px;color:#c0c7d1}
.marketplace-empty{min-height:320px;display:grid;place-items:center;align-content:center;text-align:center;color:#778396}.marketplace-empty>span{width:70px;height:70px;display:grid;place-items:center;border-radius:22px;background:#eaf3ff;color:#1769e0}.marketplace-empty svg{width:38px}.marketplace-empty h2{margin:14px 0 4px}.marketplace-empty p{margin:0}.marketplace-result-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:22px}.marketplace-result-head h1{font-size:2rem;margin:0}.marketplace-result-head p{margin:4px 0 0;color:#758195}
.marketplace-detail-page{padding-top:30px}.marketplace-back{display:inline-flex;margin:5px 0 20px;font-weight:800;color:#66758c}.marketplace-detail-hero{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start}.marketplace-detail-cover{width:240px;height:240px;border-radius:38px;box-shadow:0 16px 40px rgba(35,55,80,.12)}.marketplace-detail-copy h1{font-size:clamp(2rem,4vw,3.1rem);margin:8px 0 4px;letter-spacing:-.03em}.marketplace-detail-copy>p{max-width:780px;color:#68758a}.marketplace-detail-author{font-weight:800;color:#1769e0!important}.marketplace-detail-category{display:inline-flex;padding:6px 10px;border-radius:999px;background:#eaf3ff;color:#1769e0;font-size:.78rem;font-weight:850}.marketplace-detail-stats{display:flex;gap:0;margin:22px 0}.marketplace-detail-stats>div{min-width:105px;padding:0 18px;border-right:1px solid #e5e9ef;text-align:center}.marketplace-detail-stats>div:first-child{padding-left:0}.marketplace-detail-stats>div:last-child{border-right:0}.marketplace-detail-stats strong,.marketplace-detail-stats small{display:block}.marketplace-detail-stats small{color:#8a94a3;font-size:.72rem}.marketplace-detail-access{display:inline-flex;align-items:center;gap:10px;padding:10px 13px;border-radius:14px;background:#fff;border:1px solid #e2e7ee}.marketplace-detail-access>div{display:flex;flex-direction:column}.marketplace-detail-access small{color:#8993a1;font-size:.67rem}.marketplace-detail-access.unlocked{background:#effcf4;border-color:#bde6ca;color:#197344}.marketplace-detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.marketplace-reader-section{margin-top:38px}.marketplace-pdf-frame{height:min(78vh,900px);border:1px solid #dfe5ec;border-radius:20px;overflow:hidden;background:#3a3c40}.marketplace-pdf-frame iframe{width:100%;height:100%;border:0}.marketplace-docx-reader{max-width:850px;min-height:700px;margin:0 auto;padding:65px 72px;background:#fff;border:1px solid #e4e8ee;box-shadow:0 10px 32px rgba(28,46,68,.08);font-family:Georgia,'Times New Roman',serif;font-size:1.02rem;line-height:1.75}.marketplace-docx-reader p{margin:0 0 1em}.marketplace-locked-preview{display:flex;align-items:center;gap:20px;margin-top:36px;padding:25px;border-radius:22px;background:#fff;border:1px solid #e5e9ef}.marketplace-lock-illustration{width:70px;height:70px;flex:0 0 auto;display:grid;place-items:center;border-radius:22px;background:#f2efff;font-size:2rem}.marketplace-locked-preview h2{margin:0 0 6px}.marketplace-locked-preview p{margin:0 0 13px;color:#758093}
.developer-market-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.developer-market-card{display:grid;grid-template-columns:125px 1fr;gap:16px;padding:15px;border:1px solid #e6e9ef;border-radius:18px}.developer-market-cover{width:125px;height:125px;border-radius:21px}.developer-market-copy h3{margin:7px 0 4px}.developer-market-copy p{margin:0 0 5px;color:#717b8c}.developer-market-copy>small{color:#8b94a2}.developer-market-badges{display:flex;gap:7px}.marketplace-upload-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);gap:20px}.marketplace-upload-side{display:grid;align-content:start;gap:20px}.market-current-file{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#f4f7fb;margin-bottom:15px}.market-current-file>b{width:52px;height:52px;display:grid;place-items:center;border-radius:13px;background:#e6efff;color:#1769e0}.market-current-file>span,.market-current-file small{display:block}.market-current-file small{color:#8490a1;margin-top:3px}
@media(max-width:1050px){.marketplace-store-bar{grid-template-columns:auto 1fr}.marketplace-access-chip{display:none}.marketplace-app-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.role-teacher .marketplace-store-top{top:72px}.marketplace-store-bar{grid-template-columns:1fr;padding:12px 0 8px;gap:10px}.marketplace-store-brand{display:none}.marketplace-search{width:100%}.marketplace-category-tabs{gap:19px}.marketplace-content{padding-top:16px}.marketplace-hero-banner{grid-template-columns:1fr;padding:23px;border-radius:22px}.marketplace-hero-art{display:none}.marketplace-app-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.marketplace-app-card{grid-template-columns:72px 1fr;gap:10px}.marketplace-app-cover{width:72px;height:72px;border-radius:17px}.marketplace-featured-scroll{grid-auto-columns:minmax(260px,86vw)}.marketplace-featured-card{grid-template-columns:105px 1fr}.marketplace-cover-large{width:105px;height:105px}.marketplace-detail-hero{grid-template-columns:110px 1fr;gap:18px}.marketplace-detail-cover{width:110px;height:110px;border-radius:24px}.marketplace-detail-copy h1{font-size:1.65rem}.marketplace-detail-copy>p:not(.marketplace-detail-author){grid-column:1/-1}.marketplace-detail-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin:16px 0}.marketplace-detail-stats>div{min-width:0;padding:0 7px}.marketplace-detail-access,.marketplace-detail-actions{grid-column:1/-1}.marketplace-docx-reader{padding:35px 24px;min-height:520px}.marketplace-pdf-frame{height:72vh}.developer-market-grid{grid-template-columns:1fr}.marketplace-upload-layout{grid-template-columns:1fr}}
@media(max-width:480px){.marketplace-app-grid{grid-template-columns:1fr}.marketplace-app-card{grid-template-columns:76px 1fr}.marketplace-app-cover{width:76px;height:76px}.marketplace-detail-hero{grid-template-columns:90px 1fr}.marketplace-detail-cover{width:90px;height:90px;border-radius:20px}.marketplace-detail-copy h1{font-size:1.4rem}.marketplace-detail-stats{grid-template-columns:repeat(2,1fr);gap:12px}.marketplace-detail-stats>div{border:0!important;padding:7px;background:#f6f8fb;border-radius:12px}.marketplace-detail-actions .btn{flex:1}.marketplace-locked-preview{align-items:flex-start}.marketplace-lock-illustration{width:52px;height:52px;border-radius:16px}.developer-market-card{grid-template-columns:90px 1fr}.developer-market-cover{width:90px;height:90px}.developer-market-copy .card-actions{grid-column:1/-1}}


/* ================================================================
   V4.9.5 Marketplace contrast & visual polish
   ================================================================ */
.marketplace-hero-banner{
    position:relative;
    background:
        radial-gradient(circle at 86% 18%,rgba(255,255,255,.15),transparent 26%),
        linear-gradient(125deg,#075cc9 0%,#325de9 48%,#6838df 100%);
    box-shadow:0 18px 45px rgba(35,69,170,.16);
}
.marketplace-hero-banner::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(5,37,99,.16),transparent 58%);
}
.marketplace-hero-banner>div{position:relative;z-index:1}
.marketplace-hero-banner h1,
.marketplace-hero-banner h2,
.marketplace-hero-banner h3{
    color:#fff!important;
    text-shadow:0 2px 12px rgba(10,28,82,.18);
}
.marketplace-hero-banner p{
    color:#f7f9ff!important;
    text-shadow:0 1px 8px rgba(11,31,87,.14);
}
.marketplace-hero-banner .eyebrow{
    color:#fff!important;
    background:rgba(255,255,255,.17)!important;
    border:1px solid rgba(255,255,255,.34);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.marketplace-hero-banner .marketplace-hero-actions .btn-primary{
    background:#fff!important;
    border-color:#fff!important;
    color:#174da8!important;
    box-shadow:0 8px 22px rgba(5,29,86,.18);
}
.marketplace-hero-banner .marketplace-hero-actions .btn-primary:hover{
    background:#f1f6ff!important;
    color:#103d8c!important;
}
.marketplace-hero-banner .marketplace-hero-actions .btn-secondary{
    background:rgba(255,255,255,.13)!important;
    border-color:rgba(255,255,255,.62)!important;
    color:#fff!important;
    backdrop-filter:blur(8px);
}
.marketplace-hero-banner .marketplace-hero-actions .btn-secondary:hover{
    background:rgba(255,255,255,.22)!important;
    color:#fff!important;
}
.marketplace-premium-ready{
    color:#fff!important;
    border:1px solid rgba(255,255,255,.36);
    background:rgba(255,255,255,.15)!important;
}
.marketplace-hero-art span{
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 18px 42px rgba(8,24,67,.24)!important;
}
.marketplace-store-shell .marketplace-section-head h2,
.marketplace-store-shell .marketplace-result-head h1,
.marketplace-store-shell .marketplace-card-copy h3,
.marketplace-store-shell .marketplace-app-copy h3{
    color:#202631;
}
.marketplace-store-shell .marketplace-featured-card,
.marketplace-store-shell .marketplace-app-card{
    text-decoration:none;
}
.marketplace-access-chip.locked{
    color:#273044;
    background:#fff;
}
.marketplace-access-chip.locked strong{color:#202631}
.marketplace-search input::placeholder{color:#8994a7;opacity:1}

@media(max-width:780px){
    .marketplace-hero-banner{
        background:linear-gradient(145deg,#075bc6 0%,#3157dd 55%,#6537d8 100%);
    }
    .marketplace-hero-banner h1{font-size:clamp(1.75rem,8vw,2.4rem);line-height:1.08}
    .marketplace-hero-banner p{font-size:.96rem;line-height:1.55}
    .marketplace-hero-actions{display:grid;grid-template-columns:1fr 1fr}
    .marketplace-hero-actions .btn,.marketplace-premium-ready{width:100%;justify-content:center;text-align:center}
}
@media(max-width:430px){
    .marketplace-hero-actions{grid-template-columns:1fr}
}

/* ================================================================
   V4.9.6 Floating Ads — random promo on first app open
   ================================================================ */
.digitera-floating-ad{
    position:fixed;
    right:max(92px,calc(env(safe-area-inset-right) + 14px));
    bottom:max(20px,env(safe-area-inset-bottom));
    z-index:1440;
    width:min(360px,calc(100vw - 32px));
    overflow:visible;
    border:1px solid rgba(228,231,236,.96);
    border-radius:22px;
    background:#fff;
    box-shadow:0 22px 55px rgba(24,28,50,.2),0 6px 18px rgba(24,28,50,.09);
    opacity:0;
    transform:translate3d(0,20px,0) scale(.96);
    transition:opacity .23s ease,transform .23s ease;
    font-family:inherit;
}
.digitera-floating-ad[hidden]{display:none!important}.digitera-floating-ad.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}.digitera-floating-ad.is-leaving{opacity:0;transform:translate3d(0,12px,0) scale(.97)}
.floating-ad-close{position:absolute;right:-9px;top:-9px;z-index:2;width:31px;height:31px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:#202534;color:#fff;box-shadow:0 5px 14px rgba(22,27,42,.2);font:700 20px/1 system-ui;cursor:pointer}.floating-ad-close:hover{background:#111827}
.floating-ad-link{display:block;overflow:hidden;border-radius:21px;color:#202534;text-decoration:none}.floating-ad-link:hover{color:#202534}.floating-ad-media{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#f1f3f8}.floating-ad-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .28s ease}.floating-ad-link:hover .floating-ad-media img{transform:scale(1.025)}
.floating-ad-content{display:flex;flex-direction:column;padding:14px 16px 15px}.floating-ad-content>small{width:max-content;margin-bottom:5px;padding:3px 7px;border-radius:999px;background:#f1edff;color:#6941d8;font-size:.64rem;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.floating-ad-content>strong{color:#202534;font-size:1rem;line-height:1.25}.floating-ad-content>span{margin-top:5px;color:#697386;font-size:.78rem;line-height:1.42}.floating-ad-content>b{margin-top:10px;color:#5f38d4;font-size:.78rem}
.developer-ad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.developer-ad-card{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:15px;border:1px solid var(--border);border-radius:18px;background:#fff}.developer-ad-thumb{width:170px;aspect-ratio:16/10;overflow:hidden;border-radius:15px;background:#f2f4f8}.developer-ad-thumb img{width:100%;height:100%;object-fit:cover}.developer-ad-placeholder{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#ede8ff,#e5efff);color:#6841dc;font-size:1.5rem;font-weight:900}.developer-ad-copy{min-width:0}.developer-ad-copy h3{margin:8px 0 4px}.developer-ad-copy p{margin:0 0 7px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.developer-ad-copy>small{color:#8a94a5}.developer-ad-badges{display:flex;flex-wrap:wrap;gap:6px}.developer-ad-schedule{display:flex;flex-wrap:wrap;gap:7px 14px;margin:10px 0;color:#7a8495;font-size:.72rem}.developer-ad-copy .card-actions{margin-top:10px}.ad-editor-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:20px}.ad-editor-side{display:grid;align-content:start;gap:20px}.ad-form-preview-image{margin-bottom:14px;overflow:hidden;border-radius:16px;border:1px solid var(--border);background:#f4f6fa}.ad-form-preview-image img{width:100%;aspect-ratio:16/9;display:block;object-fit:cover}
@media(max-width:900px){.developer-ad-grid{grid-template-columns:1fr}.ad-editor-layout{grid-template-columns:1fr}.ad-editor-side{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.digitera-floating-ad{left:14px;right:14px;bottom:calc(94px + env(safe-area-inset-bottom));width:auto;border-radius:20px}.role-teacher .digitera-floating-ad{bottom:calc(82px + env(safe-area-inset-bottom))}.role-public .digitera-floating-ad,.role-developer .digitera-floating-ad{bottom:calc(82px + env(safe-area-inset-bottom))}.floating-ad-link{display:grid;grid-template-columns:116px minmax(0,1fr);border-radius:19px}.floating-ad-media{height:100%;aspect-ratio:auto}.floating-ad-content{padding:12px 13px}.floating-ad-content>strong{font-size:.9rem}.floating-ad-content>span{font-size:.7rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.floating-ad-content>b{margin-top:7px;font-size:.72rem}.ad-editor-side{grid-template-columns:1fr}.developer-ad-card{grid-template-columns:105px minmax(0,1fr)}.developer-ad-thumb{width:105px}.developer-ad-copy .card-actions{grid-column:1/-1}}
@media(max-width:410px){.floating-ad-link{grid-template-columns:96px minmax(0,1fr)}.floating-ad-content>span{display:none}.floating-ad-content{padding:10px 11px}.floating-ad-content>b{margin-top:5px}.developer-ad-card{grid-template-columns:82px minmax(0,1fr)}.developer-ad-thumb{width:82px}}
@media(prefers-reduced-motion:reduce){.digitera-floating-ad,.floating-ad-media img{transition:none!important}}
.floating-ad-open .pwa-install-button{opacity:0!important;pointer-events:none!important}

/* =========================================================
   V4.9.7 Tentang Aplikasi + profil pengembang
   ========================================================= */
.about-app-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 64px;
    background:
        radial-gradient(circle at 82% 20%, rgba(255,255,255,.18), transparent 28%),
        radial-gradient(circle at 10% 85%, rgba(101,214,255,.16), transparent 34%),
        linear-gradient(135deg, #5126c7 0%, #7047eb 46%, #4167f3 100%);
    color: #fff;
}
.about-app-hero::before,
.about-app-hero::after { content:""; position:absolute; border-radius:999px; background:rgba(255,255,255,.08); pointer-events:none; }
.about-app-hero::before { width:280px; height:280px; right:-95px; top:-130px; }
.about-app-hero::after { width:190px; height:190px; left:-70px; bottom:-110px; }
.about-app-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:56px; align-items:center; }
.about-app-copy { max-width:760px; }
.about-app-kicker { display:inline-flex; padding:8px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.12); color:#fff; font-weight:800; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; }
.about-app-hero h1 { margin:18px 0 8px; color:#fff !important; font-size:clamp(2.6rem,6vw,5.2rem); line-height:.96; letter-spacing:-.055em; }
.about-app-tagline { margin:0 0 20px; color:#fff; font-size:clamp(1.12rem,2vw,1.45rem); font-weight:800; }
.about-app-description { margin:0; max-width:760px; color:rgba(255,255,255,.88); font-size:1.04rem; line-height:1.8; }
.about-app-badges { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.about-app-badges span { padding:8px 11px; border-radius:11px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); color:#fff; font-size:.82rem; font-weight:800; backdrop-filter:blur(8px); }
.about-app-brand-card { position:relative; width:min(340px,100%); justify-self:end; display:grid; place-items:center; text-align:center; padding:36px 28px; border:1px solid rgba(255,255,255,.25); border-radius:32px; background:rgba(255,255,255,.12); backdrop-filter:blur(16px); box-shadow:0 24px 70px rgba(30,15,82,.25); }
.about-app-brand-card img { position:relative; z-index:1; width:124px; height:124px; object-fit:contain; border-radius:28px; background:#fff; padding:10px; box-shadow:0 18px 40px rgba(28,19,66,.24); }
.about-app-brand-card strong { position:relative; z-index:1; margin-top:20px; color:#fff; font-size:1.6rem; }
.about-app-brand-card small { position:relative; z-index:1; color:rgba(255,255,255,.75); }
.about-app-brand-glow { position:absolute; width:185px; height:185px; border-radius:50%; background:rgba(255,255,255,.14); filter:blur(4px); }
.about-app-section { background:linear-gradient(180deg,#f6f7fd,#fff); }
.about-app-content-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:22px; align-items:start; }
.about-app-story,.about-developer-card { border-color:#e7e2f5; box-shadow:0 18px 45px rgba(43,31,88,.07); }
.about-app-story h2 { max-width:680px; margin:12px 0 12px; }
.about-app-story > p { color:#656078; line-height:1.8; }
.about-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:26px; }
.about-feature-grid > div { min-height:126px; padding:17px; border:1px solid #e9e5f3; border-radius:18px; background:#faf9ff; }
.about-feature-grid > div > span { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#7047eb; background:#eee9ff; margin-bottom:11px; }
.about-feature-grid svg { width:23px; height:23px; }
.about-feature-grid strong,.about-feature-grid small { display:block; }
.about-feature-grid strong { color:#2e2940; }
.about-feature-grid small { margin-top:4px; color:#777189; line-height:1.45; }
.about-developer-card { text-align:center; position:sticky; top:90px; }
.about-developer-photo { width:132px; height:132px; margin:0 auto 15px; border-radius:34px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg,#7047eb,#477cf5); color:#fff; font-size:2.3rem; font-weight:900; box-shadow:0 18px 38px rgba(94,63,211,.23); border:5px solid #fff; }
.about-developer-photo img { width:100%; height:100%; object-fit:cover; }
.about-developer-label { display:inline-flex; padding:6px 10px; border-radius:999px; background:#eee9ff; color:#6338d7; font-size:.74rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.about-developer-card h2 { margin:12px 0 2px; }
.about-developer-role { color:#7047eb; font-size:.93rem; }
.about-developer-card > p { margin:15px 0 0; color:#6f697f; line-height:1.7; }
.about-developer-links { display:grid; gap:8px; margin-top:20px; text-align:left; }
.about-developer-links a { display:flex; align-items:center; gap:10px; min-width:0; padding:10px 12px; border:1px solid #e9e5f3; border-radius:12px; background:#faf9ff; color:#3f3951; font-weight:700; }
.about-developer-links a:hover { border-color:#cfc4f3; background:#f4f0ff; color:#6338d7; }
.about-developer-links svg { width:20px; height:20px; flex:0 0 auto; color:#7047eb; }
.about-developer-links span { min-width:0; overflow-wrap:anywhere; }

.developer-about-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr); gap:20px; align-items:start; padding-bottom:40px; }
.developer-about-form-card textarea { min-height:150px; }
.developer-about-side { position:sticky; top:88px; }
.developer-about-photo-preview { width:132px; height:132px; margin:0 auto 18px; display:grid; place-items:center; border-radius:32px; overflow:hidden; background:linear-gradient(135deg,#7047eb,#477cf5); color:#fff; font-weight:900; font-size:2.2rem; box-shadow:0 15px 32px rgba(88,61,194,.18); }
.developer-about-photo-preview img { width:100%; height:100%; object-fit:cover; }
.developer-about-remove { margin:-5px 0 17px; color:#756f84; font-size:.88rem; }

@media (max-width: 900px) {
    .about-app-hero { padding:54px 0 48px; }
    .about-app-hero-grid,.about-app-content-grid,.developer-about-grid { grid-template-columns:1fr; }
    .about-app-brand-card { justify-self:start; width:min(100%,360px); }
    .about-developer-card,.developer-about-side { position:static; }
}
@media (max-width: 560px) {
    .about-app-hero { padding:42px 0 38px; }
    .about-app-hero-grid { gap:30px; }
    .about-app-brand-card { width:100%; padding:26px 20px; border-radius:24px; }
    .about-app-brand-card img { width:100px; height:100px; border-radius:24px; }
    .about-feature-grid { grid-template-columns:1fr; }
    .about-app-content-grid { gap:14px; }
    .about-app-story,.about-developer-card { padding:18px; }
}

/* =========================================================
   Digitera V4.9.9 — Live Meeting Guru & Siswa (Zoom-style)
   ========================================================= */
.teacher-meeting-link .teacher-side-icon,
.student-sheet-meeting > span { color:#22c55e; }
.meeting-manager-page{padding-bottom:70px}.meeting-manager-page .page-head .btn svg{width:19px;height:19px}.meeting-active-banner{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 19px;margin-bottom:22px;border:1px solid #bbf7d0;border-radius:16px;background:#f0fdf4;color:#14532d}.meeting-active-banner>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.meeting-active-banner small{color:#4b5563}.meeting-live-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.12);animation:meetingLivePulse 1.7s infinite}.meeting-security-note{font-size:.84rem;color:#166534}.meeting-list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.meeting-list-card{padding:22px;border:1px solid #e5e7eb;border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(31,41,55,.07)}.meeting-list-card.is-active{border-color:#d8ccff}.meeting-list-card.is-ended{opacity:.72}.meeting-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.meeting-card-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#7047eb,#4f46e5)}.meeting-card-icon svg{width:25px;height:25px}.meeting-status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:.72rem;font-weight:900;letter-spacing:.05em}.meeting-status-pill.live{background:#dcfce7;color:#166534}.meeting-status-pill.lobby{background:#ede9fe;color:#5b21b6}.meeting-status-pill.ended{background:#f3f4f6;color:#6b7280}.meeting-list-card h3{margin:0 0 15px}.meeting-code-line{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:12px 14px;border:1px solid #e8e2ff;border-radius:13px;background:#faf8ff}.meeting-code-line span{font-size:.78rem;color:#6b7280}.meeting-code-line strong{font-size:1.05rem;letter-spacing:.08em;color:#4c1d95}.meeting-code-line button{border:0;border-radius:8px;padding:7px 9px;background:#ede9fe;color:#5b21b6;font-weight:800;cursor:pointer}.meeting-card-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin:14px 0;color:#6b7280;font-size:.82rem}.meeting-card-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.meeting-empty-state{text-align:center;padding:55px 24px}.meeting-empty-icon{width:72px;height:72px;margin:0 auto 16px;border-radius:22px;display:grid;place-items:center;color:#7047eb;background:#f0ebff}.meeting-empty-icon svg{width:38px;height:38px}
.meeting-create-backdrop{position:fixed;inset:0;z-index:80;background:rgba(15,23,42,.5);opacity:0;transition:.18s}.meeting-create-backdrop.open{opacity:1}.meeting-create-modal{position:fixed;z-index:81;top:50%;left:50%;width:min(520px,calc(100% - 28px));transform:translate(-50%,-46%) scale(.98);opacity:0;border-radius:24px;background:#fff;box-shadow:0 30px 90px rgba(15,23,42,.28);overflow:hidden;transition:.2s}.meeting-create-modal.open{transform:translate(-50%,-50%) scale(1);opacity:1}.meeting-create-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #eee}.meeting-create-head>div{display:flex;align-items:center;gap:12px}.meeting-create-head>div>div{display:flex;flex-direction:column}.meeting-create-head small{color:#6b7280}.meeting-create-head>button{width:36px;height:36px;border:0;border-radius:50%;font-size:1.4rem;background:#f3f4f6;cursor:pointer}.meeting-create-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#7047eb,#4f46e5)}.meeting-create-icon svg{width:24px}.meeting-create-form{padding:20px}.meeting-create-features{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.meeting-create-features span{padding:7px 10px;border-radius:999px;background:#f5f3ff;color:#5b21b6;font-size:.8rem;font-weight:700}
.student-meeting-page{padding:30px 0 70px}.student-meeting-hero{display:flex;align-items:center;gap:20px;padding:24px 26px;margin-bottom:18px;border-radius:24px;color:#fff;background:linear-gradient(135deg,#4f22c8,#7047eb 60%,#8b5cf6)}.student-meeting-hero h1{color:#fff;margin:5px 0}.student-meeting-hero p{margin:0;color:rgba(255,255,255,.85)}.student-meeting-hero-icon{flex:0 0 auto;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2)}.student-meeting-hero-icon svg{width:34px;height:34px}.student-meeting-code-form{padding:18px;margin-bottom:30px;border:1px solid #e5e7eb;border-radius:18px;background:#fff}.student-meeting-code-form label{display:block;margin-bottom:8px;font-weight:800}.student-meeting-code-form>div{display:grid;grid-template-columns:1fr auto;gap:10px}.student-meeting-code-form input{font-size:1.05rem;letter-spacing:.08em}.student-meeting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.student-meeting-card{padding:21px;border:1px solid #e5e7eb;border-radius:20px;background:#fff;box-shadow:0 10px 28px rgba(31,41,55,.06)}.student-meeting-card.live{border-color:#bbf7d0}.student-meeting-card-top{display:flex;justify-content:space-between;align-items:center}.student-meeting-card h3{margin:14px 0 7px}.student-meeting-card p{color:#6b7280;min-height:48px}.student-meeting-meta{display:flex;flex-wrap:wrap;gap:8px 12px;margin:14px 0;color:#6b7280;font-size:.82rem}.meeting-prejoin-wrap{padding:50px 0}.meeting-prejoin-card{display:grid;grid-template-columns:.9fr 1.1fr;width:min(900px,100%);margin:auto;border-radius:26px;overflow:hidden;background:#fff;border:1px solid #e5e7eb;box-shadow:0 24px 70px rgba(31,41,55,.12)}.meeting-prejoin-preview{min-height:440px;padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;background:radial-gradient(circle at 75% 15%,rgba(139,92,246,.55),transparent 35%),#111827}.meeting-prejoin-camera{width:112px;height:112px;border-radius:34px;display:grid;place-items:center;background:#7047eb;margin-bottom:22px}.meeting-prejoin-camera svg{width:58px;height:58px}.meeting-prejoin-preview>div{display:flex;flex-direction:column;gap:6px}.meeting-prejoin-preview strong{font-size:1.25rem}.meeting-prejoin-preview small{color:#cbd5e1}.meeting-prejoin-copy{padding:40px}.meeting-prejoin-copy h1{margin:10px 0}.meeting-prejoin-note{display:flex;flex-wrap:wrap;gap:7px;margin:5px 0 18px}.meeting-prejoin-note span{padding:7px 10px;border-radius:999px;background:#f5f3ff;color:#5b21b6;font-size:.8rem;font-weight:700}

.meeting-room-body{margin:0;background:#0b0d12;color:#f8fafc;overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.video-meeting-app{height:100dvh;min-height:540px;display:grid;grid-template-rows:62px minmax(0,1fr) 76px;background:#0b0d12}.video-meeting-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 18px;border-bottom:1px solid #252832;background:#17191f}.video-meeting-brand{display:flex;align-items:center;gap:11px;min-width:0}.video-meeting-logo{width:40px;height:40px;border-radius:12px;overflow:hidden;background:#fff;flex:0 0 auto}.video-meeting-logo img{width:100%;height:100%;object-fit:contain}.video-meeting-brand>div{min-width:0;display:flex;flex-direction:column}.video-meeting-brand strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-meeting-brand small{color:#a8adb8}.video-meeting-brand small b{color:#fff;letter-spacing:.06em}.video-meeting-top-actions{display:flex;align-items:center;gap:8px}.meeting-encryption-pill{padding:7px 10px;border-radius:999px;background:#1f2937;color:#bbf7d0;font-size:.76rem}.meeting-top-button{border:1px solid #3a3e49;background:#24262e;color:#fff;border-radius:9px;padding:8px 11px;cursor:pointer}.video-meeting-main{position:relative;min-height:0;display:flex}.video-meeting-stage{position:relative;flex:1;min-width:0;padding:14px;background:#0b0d12}.video-meeting-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(var(--meeting-cols,1),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px;align-content:center;justify-content:center}.meeting-video-tile{position:relative;min-height:0;overflow:hidden;border-radius:12px;background:#1a1d24;border:1px solid #2b2e37}.meeting-video-tile video{width:100%;height:100%;object-fit:cover;background:#111318}.meeting-video-tile.local video{transform:scaleX(-1)}.meeting-video-tile.camera-off video{display:none}.meeting-video-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#2b2f3a,#17191f 70%)}.meeting-video-placeholder[hidden]{display:none}.meeting-video-placeholder span{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#7047eb,#4f46e5);font-size:1.65rem;font-weight:900;color:#fff}.meeting-video-name{position:absolute;left:9px;bottom:8px;z-index:3;display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;background:rgba(0,0,0,.58);font-size:.78rem;backdrop-filter:blur(6px)}.meeting-video-name span{display:flex;align-items:center;gap:5px}.meeting-video-name b{padding:2px 5px;border-radius:4px;background:#2563eb;color:#fff;font-size:.62rem}.meeting-video-name i{font-style:normal}.meeting-hand-indicator{position:absolute;right:10px;top:10px;z-index:4;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fbbf24;color:#111827;box-shadow:0 7px 20px rgba(0,0,0,.3);animation:meetingHandPop .5s ease}.meeting-video-tile.connecting::after{content:"Menghubungkan…";position:absolute;inset:auto 50% 48% auto;translate:50% 50%;font-size:.74rem;color:#cbd5e1}.video-meeting-sidepanel{width:340px;flex:0 0 340px;border-left:1px solid #2a2d35;background:#17191f;display:flex;flex-direction:column;min-height:0}.video-meeting-sidepanel[hidden]{display:none!important}.meeting-panel-tabs{height:52px;display:flex;align-items:center;border-bottom:1px solid #2a2d35}.meeting-panel-tabs>button{height:100%;border:0;background:transparent;color:#9ca3af;padding:0 15px;font-weight:700;cursor:pointer}.meeting-panel-tabs>button.active{color:#fff;border-bottom:2px solid #7047eb}.meeting-panel-tabs .meeting-panel-close{margin-left:auto;font-size:1.4rem}.meeting-panel-view{display:none;min-height:0;flex:1;flex-direction:column}.meeting-panel-view.active{display:flex}.meeting-participant-list{padding:10px;overflow:auto;flex:1}.meeting-participant-item{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:9px;border-radius:10px}.meeting-participant-item:hover{background:#22252d}.meeting-participant-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#7047eb;color:#fff;font-size:.72rem;font-weight:900}.meeting-participant-item>div{display:flex;flex-direction:column;min-width:0}.meeting-participant-item strong{font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meeting-participant-item small{font-size:.7rem;color:#9ca3af}.meeting-participant-states{font-size:.75rem;white-space:nowrap}.meeting-host-panel-actions{padding:12px;border-top:1px solid #2a2d35}.meeting-host-panel-actions button{width:100%;padding:9px;border:1px solid #3a3e49;border-radius:9px;background:#24262e;color:#fff;cursor:pointer}.meeting-host-panel-actions small{display:block;margin-top:7px;color:#8f96a3;font-size:.68rem}.meeting-chat-list{flex:1;overflow:auto;padding:12px}.meeting-chat-message{padding:8px 0}.meeting-chat-message>div{display:flex;justify-content:space-between;gap:10px}.meeting-chat-message b{font-size:.76rem;color:#c4b5fd}.meeting-chat-message small{font-size:.65rem;color:#737987}.meeting-chat-message p{margin:4px 0 0;color:#f3f4f6;font-size:.82rem;white-space:pre-wrap;overflow-wrap:anywhere}.meeting-chat-message.mine b{color:#93c5fd}.meeting-chat-form{display:flex;gap:7px;padding:10px;border-top:1px solid #2a2d35}.meeting-chat-form input{height:40px;min-width:0;flex:1;border:1px solid #3a3e49;border-radius:9px;background:#22252d;color:#fff;padding:0 11px}.meeting-chat-form button{width:42px;border:0;border-radius:9px;background:#7047eb;color:#fff;cursor:pointer}.meeting-panel-tabs button span,.meeting-control-button small b{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;border-radius:999px;background:#2c3039;color:#fff;font-size:.65rem}.meeting-lobby-overlay,.meeting-ended-overlay{position:absolute;inset:14px;z-index:15;display:grid;place-items:center;border-radius:12px;background:rgba(11,13,18,.82);backdrop-filter:blur(8px)}.meeting-lobby-overlay[hidden],.meeting-ended-overlay[hidden]{display:none}.meeting-lobby-card{width:min(540px,calc(100% - 30px));padding:30px;border:1px solid #353945;border-radius:22px;text-align:center;background:#17191f;box-shadow:0 30px 80px rgba(0,0,0,.38)}.meeting-lobby-icon{width:70px;height:70px;margin:0 auto 14px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,#7047eb,#4f46e5);color:#fff}.meeting-lobby-icon svg{width:36px;height:36px}.meeting-lobby-card h2{color:#fff;margin:8px 0}.meeting-lobby-card p{color:#aab0bd}.meeting-lobby-code{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:18px 0;padding:12px;border-radius:12px;background:#20232b}.meeting-lobby-code small{color:#9ca3af}.meeting-lobby-code strong{font-size:1.25rem;letter-spacing:.08em}.meeting-lobby-code button{border:0;border-radius:8px;background:#7047eb;color:#fff;padding:7px 10px;cursor:pointer}.meeting-lobby-count{margin:12px 0;color:#d1d5db}.meeting-lobby-count span{font-weight:900;color:#fff}.meeting-start-button{margin-top:8px;border:0;border-radius:12px;padding:13px 28px;background:#2d8cff;color:#fff;font-weight:900;cursor:pointer;font-size:1rem}.meeting-wait-dots{display:flex;justify-content:center;gap:7px;margin-top:18px}.meeting-wait-dots i{width:8px;height:8px;border-radius:50%;background:#8b5cf6;animation:meetingWaitDots 1.1s infinite}.meeting-wait-dots i:nth-child(2){animation-delay:.15s}.meeting-wait-dots i:nth-child(3){animation-delay:.3s}.meeting-ended-overlay>div{text-align:center}.meeting-ended-overlay span{width:70px;height:70px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#22c55e;font-size:2rem}.meeting-ended-overlay h2{color:#fff}.meeting-ended-overlay p{color:#aab0bd}.video-meeting-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:8px 14px;background:#17191f;border-top:1px solid #252832}.meeting-control-left{color:#9ca3af;font-size:.75rem}.meeting-control-left span{display:flex;align-items:center;gap:6px}.meeting-control-left i{width:8px;height:8px;border-radius:50%;background:#22c55e}.meeting-control-left span.offline i{background:#ef4444}.meeting-control-center{display:flex;align-items:center;justify-content:center;gap:4px}.meeting-control-button{position:relative;min-width:72px;height:58px;border:0;border-radius:10px;background:transparent;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}.meeting-control-button:hover,.meeting-control-button.active{background:#272a33}.meeting-control-button.off{background:#3b1c23}.meeting-control-icon{font-size:1.3rem}.meeting-control-button small{font-size:.67rem;color:#e5e7eb}.meeting-share-control .meeting-control-icon{color:#22c55e}.meeting-control-right{display:flex;justify-content:flex-end}.meeting-end-button{border:0;border-radius:10px;padding:11px 18px;background:#ef4444;color:#fff;font-weight:900;cursor:pointer}.meeting-end-button.host{background:#b91c1c}.meeting-control-badge{position:absolute;right:12px;top:5px;min-width:18px;height:18px;border-radius:999px;background:#ef4444;color:#fff;font-size:.62rem;display:grid;place-items:center}.meeting-toast-stack{position:fixed;right:18px;top:78px;z-index:120;display:grid;gap:8px;width:min(330px,calc(100% - 36px));pointer-events:none}.meeting-toast{opacity:0;transform:translateY(-8px);transition:.2s;padding:11px 13px;border-radius:11px;background:#fff;color:#111827;box-shadow:0 14px 40px rgba(0,0,0,.28);font-size:.82rem}.meeting-toast.show{opacity:1;transform:none}.meeting-toast.success{border-left:4px solid #22c55e}.meeting-toast.warning{border-left:4px solid #f59e0b}.meeting-toast.danger{border-left:4px solid #ef4444}.meeting-speaking-ring{display:none}
@keyframes meetingLivePulse{50%{opacity:.45;box-shadow:0 0 0 9px rgba(34,197,94,.05)}}@keyframes meetingWaitDots{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-6px);opacity:1}}@keyframes meetingHandPop{0%{transform:scale(.5) rotate(-15deg)}70%{transform:scale(1.15) rotate(5deg)}100%{transform:none}}

@media(max-width:1050px){.video-meeting-sidepanel{position:absolute;right:0;top:0;bottom:0;z-index:25;width:min(360px,90vw);box-shadow:-20px 0 50px rgba(0,0,0,.35)}.video-meeting-app.panel-open .video-meeting-stage{margin-right:0}.meeting-list-grid,.student-meeting-grid{grid-template-columns:1fr}.student-desktop-nav a:nth-child(5){display:none}}
@media(max-width:720px){.meeting-manager-page{padding-left:4px;padding-right:4px}.meeting-active-banner{align-items:flex-start;flex-direction:column}.meeting-list-card{padding:17px}.meeting-code-line{grid-template-columns:1fr auto}.meeting-code-line span{grid-column:1/-1}.student-meeting-hero{padding:20px;align-items:flex-start}.student-meeting-hero-icon{width:54px;height:54px}.student-meeting-code-form>div{grid-template-columns:1fr}.meeting-prejoin-wrap{padding:22px 0 80px}.meeting-prejoin-card{grid-template-columns:1fr}.meeting-prejoin-preview{min-height:220px}.meeting-prejoin-camera{width:82px;height:82px;border-radius:24px}.meeting-prejoin-camera svg{width:42px}.meeting-prejoin-copy{padding:25px}.video-meeting-app{grid-template-rows:56px minmax(0,1fr) 72px}.video-meeting-topbar{padding:7px 10px}.video-meeting-logo{width:36px;height:36px}.video-meeting-brand small{font-size:.68rem}.meeting-encryption-pill,.meeting-top-button{display:none}.video-meeting-stage{padding:6px}.video-meeting-grid{gap:5px}.meeting-video-tile{border-radius:8px}.meeting-video-name{left:5px;bottom:5px;padding:4px 6px}.meeting-video-placeholder span{width:58px;height:58px;font-size:1.1rem}.meeting-lobby-overlay,.meeting-ended-overlay{inset:6px}.meeting-lobby-card{padding:22px 16px}.video-meeting-controls{grid-template-columns:1fr;display:flex;padding:5px 7px;gap:5px;overflow-x:auto;overflow-y:hidden;justify-content:space-between}.meeting-control-left{display:none}.meeting-control-center{justify-content:flex-start;gap:0;min-width:max-content}.meeting-control-button{min-width:61px;height:58px}.meeting-control-button small{font-size:.61rem}.meeting-control-right{flex:0 0 auto}.meeting-end-button{padding:10px 12px;font-size:.72rem}.video-meeting-grid{grid-template-columns:repeat(var(--meeting-cols,1),minmax(0,1fr))}.meeting-toast-stack{top:65px;right:10px;width:calc(100% - 20px)}}
@media(max-width:420px){.student-meeting-hero{display:block}.student-meeting-hero-icon{margin-bottom:12px}.meeting-prejoin-copy{padding:21px 18px}.video-meeting-brand strong{max-width:180px}.meeting-control-button{min-width:58px}.meeting-control-icon{font-size:1.15rem}.meeting-share-control{display:none}}

/* =========================================================
   Digitera V4.10.0 — Live Meeting sampai 30 peserta
   ========================================================= */
.video-meeting-grid.meeting-large-room .meeting-video-placeholder span{width:58px;height:58px;font-size:1.1rem}
.video-meeting-grid.meeting-large-room .meeting-video-name{font-size:.7rem;padding:4px 6px}
.video-meeting-grid.meeting-large-room .meeting-hand-indicator{width:28px;height:28px;font-size:.8rem}
@media(max-width:720px){
  .video-meeting-grid.meeting-large-room{overflow-y:auto;align-content:start;grid-auto-rows:minmax(118px,auto);padding-right:2px}
  .video-meeting-grid.meeting-large-room .meeting-video-tile{min-height:118px}
}

/* =========================================================
   Digitera V4.10.4 — WebRTC camera + Android meeting polish
   ========================================================= */
.meeting-room-body{
  min-height:100dvh;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
.video-meeting-app{
  height:100dvh;
  min-height:0;
}
.meeting-video-tile.local.screen-sharing video{transform:none}
.meeting-video-placeholder.local-placeholder{
  gap:10px;
  align-content:center;
}
.meeting-video-placeholder.local-placeholder small{
  display:block;
  max-width:220px;
  padding:0 12px;
  color:#cbd5e1;
  text-align:center;
  font-size:.72rem;
  line-height:1.35;
}
.meeting-peer-dot{
  position:absolute;
  top:10px;
  left:10px;
  z-index:5;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.13);
}
.meeting-peer-dot.connected{
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.13);
}
.meeting-video-tile.autoplay-blocked::before{
  content:"Ketuk untuk mengaktifkan audio";
  position:absolute;
  top:10px;
  left:50%;
  z-index:7;
  transform:translateX(-50%);
  padding:5px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.82);
  color:#fff;
  font-size:.65rem;
  white-space:nowrap;
  pointer-events:none;
}
.meeting-control-button.loading{
  opacity:.7;
  pointer-events:none;
}
.meeting-control-button.loading .meeting-control-icon{
  animation:meetingCameraWait .8s linear infinite;
}
@keyframes meetingCameraWait{to{transform:rotate(360deg)}}

@media(max-width:760px){
  .meeting-room-body{overflow:hidden}
  .video-meeting-app{
    grid-template-rows:52px minmax(0,1fr) calc(68px + env(safe-area-inset-bottom,0px));
    width:100%;
    max-width:100vw;
  }
  .video-meeting-topbar{
    min-width:0;
    padding:6px 9px;
    gap:8px;
  }
  .video-meeting-brand{gap:8px;min-width:0;flex:1}
  .video-meeting-logo{width:34px;height:34px;border-radius:10px}
  .video-meeting-brand>div{min-width:0;max-width:calc(100vw - 58px)}
  .video-meeting-brand strong{
    display:block;
    max-width:100%;
    font-size:.86rem;
    line-height:1.1;
  }
  .video-meeting-brand small{
    display:block;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:.61rem;
  }
  .video-meeting-top-actions{display:none}
  .video-meeting-main{min-width:0;overflow:hidden}
  .video-meeting-stage{
    min-width:0;
    width:100%;
    padding:4px;
    overflow:hidden;
  }
  .video-meeting-grid{
    min-width:0;
    gap:4px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    align-content:start;
    grid-auto-rows:minmax(132px,1fr);
    padding-bottom:2px;
  }
  .video-meeting-grid[data-count="1"]{
    overflow:hidden;
    align-content:stretch;
    grid-auto-rows:minmax(0,1fr);
  }
  .video-meeting-grid[data-count="2"],
  .video-meeting-grid[data-count="3"],
  .video-meeting-grid[data-count="4"]{
    align-content:stretch;
    grid-auto-rows:minmax(0,1fr);
  }
  .meeting-video-tile{
    min-width:0;
    min-height:126px;
    border-radius:9px;
  }
  .video-meeting-grid[data-count="1"] .meeting-video-tile{min-height:0}
  .meeting-video-tile video{object-fit:cover}
  .meeting-video-name{
    left:5px;
    right:5px;
    bottom:5px;
    width:max-content;
    max-width:calc(100% - 10px);
    padding:4px 6px;
    font-size:.66rem;
  }
  .meeting-video-name span{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .meeting-video-placeholder span{width:54px;height:54px;font-size:1rem}
  .meeting-video-placeholder.local-placeholder small{font-size:.64rem;max-width:150px}
  .meeting-peer-dot{top:7px;left:7px;width:7px;height:7px}
  .meeting-hand-indicator{top:6px;right:6px;width:29px;height:29px}

  /* Participants/chat becomes a bottom sheet on Android instead of covering
     the video area from the right. */
  .video-meeting-sidepanel{
    position:absolute;
    z-index:40;
    left:0;
    right:0;
    top:auto;
    bottom:0;
    width:100%;
    max-width:none;
    height:min(68dvh,620px);
    border-left:0;
    border-top:1px solid #343844;
    border-radius:18px 18px 0 0;
    box-shadow:0 -22px 55px rgba(0,0,0,.42);
  }
  .meeting-panel-tabs{height:48px}
  .meeting-panel-tabs>button{padding:0 13px;font-size:.78rem}
  .meeting-chat-form{padding:8px calc(8px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px))}
  .meeting-chat-form input{font-size:16px}

  .video-meeting-controls{
    display:flex;
    align-items:stretch;
    gap:3px;
    min-width:0;
    padding:4px 5px calc(4px + env(safe-area-inset-bottom,0px));
    overflow:visible;
  }
  .meeting-control-left{display:none}
  .meeting-control-center{
    flex:1 1 auto;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(48px,1fr));
    gap:1px;
  }
  .meeting-control-button{
    min-width:0;
    width:100%;
    height:58px;
    padding:2px 1px;
    border-radius:9px;
  }
  .meeting-control-icon{font-size:1.18rem}
  .meeting-control-button small{
    display:block;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:.57rem;
  }
  .meeting-share-control{display:none}
  .meeting-control-right{
    flex:0 0 62px;
    min-width:62px;
    align-items:center;
  }
  .meeting-end-button{
    width:100%;
    height:58px;
    padding:5px 4px;
    border-radius:10px;
    font-size:.62rem;
    line-height:1.05;
  }
  .meeting-control-badge{right:5px;top:3px}
  .meeting-lobby-overlay,.meeting-ended-overlay{inset:4px}
  .meeting-lobby-card{
    width:min(500px,calc(100% - 16px));
    max-height:calc(100% - 16px);
    overflow:auto;
    padding:18px 14px;
    border-radius:18px;
  }
  .meeting-lobby-icon{width:56px;height:56px;border-radius:17px;margin-bottom:8px}
  .meeting-lobby-icon svg{width:29px;height:29px}
  .meeting-lobby-card h2{font-size:1.15rem}
  .meeting-lobby-card p{font-size:.79rem}
  .meeting-lobby-code{margin:12px 0;padding:9px}
  .meeting-lobby-code strong{font-size:1.05rem}
  .meeting-start-button{padding:11px 20px;font-size:.9rem}
  .meeting-toast-stack{
    top:58px;
    right:7px;
    width:calc(100% - 14px);
  }
}

@media(max-width:390px){
  .video-meeting-app{grid-template-rows:48px minmax(0,1fr) calc(64px + env(safe-area-inset-bottom,0px))}
  .video-meeting-logo{width:30px;height:30px}
  .video-meeting-brand strong{font-size:.79rem}
  .video-meeting-brand small{font-size:.56rem}
  .meeting-control-button{height:54px}
  .meeting-control-right{flex-basis:58px;min-width:58px}
  .meeting-end-button{height:54px}
  .meeting-control-icon{font-size:1.08rem}
  .meeting-control-button small{font-size:.52rem}
  .video-meeting-grid{grid-auto-rows:minmax(122px,1fr)}
  .meeting-video-tile{min-height:118px}
}

@media(orientation:landscape) and (max-height:520px){
  .video-meeting-app{grid-template-rows:46px minmax(0,1fr) 58px}
  .video-meeting-topbar{padding:4px 8px}
  .video-meeting-logo{width:30px;height:30px}
  .meeting-control-button,.meeting-end-button{height:48px}
  .meeting-control-button small{display:none}
  .meeting-control-icon{font-size:1.1rem}
  .video-meeting-sidepanel{height:calc(100dvh - 46px);border-radius:14px 14px 0 0}
}


/* =========================================================
   Digitera V4.10.5 — automatic student meeting access + closable panels
   ========================================================= */
.meeting-auto-access{align-items:flex-start;gap:4px;flex-wrap:wrap}
.meeting-auto-access strong{font-size:.92rem;letter-spacing:0}
.meeting-auto-access small{display:block;width:100%;color:#8c8497;font-size:.72rem}
.meeting-lobby-auto{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0;padding:12px 14px;border:1px solid #353945;border-radius:12px;background:#20232b;text-align:left}
.meeting-lobby-auto>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#22c55e;color:#fff;font-weight:900;flex:0 0 auto}
.meeting-lobby-auto>div{display:flex;flex-direction:column;gap:2px}
.meeting-lobby-auto strong{color:#fff;font-size:.86rem}
.meeting-lobby-auto small{color:#aab0bd;font-size:.72rem}
.video-meeting-sidepanel[hidden]{display:none!important}
.meeting-panel-close{min-width:48px!important;font-size:1.55rem!important;color:#fff!important}
[data-open-participants][aria-expanded="true"],[data-open-chat][aria-expanded="true"]{background:#272a33}
@media(max-width:760px){
  .video-meeting-sidepanel[hidden]{display:none!important}
  .meeting-panel-close{width:48px!important;padding:0!important;font-size:1.7rem!important}
  .meeting-lobby-auto{justify-content:flex-start;margin:12px 0;padding:10px 11px}
  .meeting-lobby-auto>span{width:30px;height:30px}
}

/* =========================================================
   Digitera V4.10.6 — reliable meeting media + Android controls
   ========================================================= */
.meeting-audio-unlock{
  position:absolute;
  z-index:32;
  left:50%;
  top:12px;
  transform:translateX(-50%);
}
.meeting-audio-unlock[hidden]{display:none!important}
.meeting-audio-unlock button{
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:9px 14px;
  background:#2563eb;
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 28px rgba(0,0,0,.3);
  cursor:pointer;
}
.meeting-media-banner{
  position:absolute;
  z-index:31;
  left:50%;
  top:58px;
  transform:translateX(-50%);
  width:min(620px,calc(100% - 28px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  border:1px solid rgba(251,191,36,.38);
  border-radius:12px;
  background:rgba(30,25,16,.94);
  color:#fff;
  box-shadow:0 15px 36px rgba(0,0,0,.3);
}
.meeting-media-banner[hidden]{display:none!important}
.meeting-media-banner>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.meeting-media-banner strong{font-size:.82rem}
.meeting-media-banner small{color:#d1d5db;font-size:.7rem}
.meeting-media-banner button{
  flex:0 0 auto;
  border:0;
  border-radius:9px;
  padding:9px 11px;
  background:#f59e0b;
  color:#111827;
  font-weight:900;
  cursor:pointer;
}
.meeting-video-tile audio[data-remote-audio]{display:none!important}
.meeting-control-button:disabled{opacity:.55;cursor:wait}
.meeting-control-button[data-raise-hand].active{background:#5b4510;color:#fde68a}

@media(max-width:760px){
  .video-meeting-app{
    height:100svh;
    min-height:100svh;
    grid-template-rows:50px minmax(0,1fr) calc(70px + env(safe-area-inset-bottom,0px));
  }
  @supports(height:100dvh){
    .video-meeting-app{height:100dvh;min-height:100dvh}
  }
  .video-meeting-controls{
    display:flex!important;
    align-items:stretch;
    gap:3px;
    min-width:0;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));
    overflow:hidden;
  }
  .meeting-control-center{
    flex:1 1 auto;
    min-width:0;
    display:flex!important;
    align-items:stretch;
    justify-content:flex-start;
    gap:1px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .meeting-control-center::-webkit-scrollbar{display:none}
  .meeting-control-button{
    flex:1 0 49px;
    min-width:49px!important;
    width:auto!important;
    height:60px;
    padding:2px 1px;
    scroll-snap-align:start;
  }
  .meeting-control-icon{font-size:1.15rem}
  .meeting-control-button small{
    display:block!important;
    font-size:.50rem!important;
    line-height:1.05;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .meeting-share-control{display:flex!important}
  .meeting-control-right{flex:0 0 54px;min-width:54px;align-items:center}
  .meeting-end-button{height:60px!important;padding:4px 3px!important;font-size:.58rem!important}
  .meeting-audio-unlock{top:7px;max-width:calc(100% - 16px)}
  .meeting-audio-unlock button{padding:8px 11px;font-size:.72rem;white-space:nowrap}
  .meeting-media-banner{
    top:48px;
    width:calc(100% - 12px);
    padding:8px 9px;
    gap:8px;
  }
  .meeting-media-banner strong{font-size:.72rem}
  .meeting-media-banner small{font-size:.61rem}
  .meeting-media-banner button{padding:8px 9px;font-size:.66rem}
  .video-meeting-sidepanel{max-height:72dvh}
}

@media(max-width:360px){
  .video-meeting-app{grid-template-rows:48px minmax(0,1fr) calc(66px + env(safe-area-inset-bottom,0px))}
  .meeting-control-button{flex-basis:46px;min-width:46px!important;height:56px}
  .meeting-control-right{flex-basis:50px;min-width:50px}
  .meeting-end-button{height:56px!important;font-size:.54rem!important}
  .meeting-control-icon{font-size:1.05rem}
  .meeting-control-button small{font-size:.47rem!important}
}


/* =========================================================
   Digitera V4.10.7 — Android safe floating meeting controls
   ========================================================= */
:root{
  --meeting-viewport-height:100dvh;
  --meeting-bottom-inset:8px;
}
.meeting-room-body{
  height:var(--meeting-viewport-height,100dvh);
  min-height:var(--meeting-viewport-height,100dvh);
  max-height:var(--meeting-viewport-height,100dvh);
  overflow:hidden!important;
}
.video-meeting-app{
  height:var(--meeting-viewport-height,100dvh);
  min-height:0!important;
  max-height:var(--meeting-viewport-height,100dvh);
}
@media(max-width:760px){
  .video-meeting-app{
    grid-template-rows:50px minmax(0,1fr)!important;
    padding-bottom:0;
  }
  .video-meeting-main{
    min-height:0;
    box-sizing:border-box;
    padding-bottom:calc(78px + var(--meeting-bottom-inset,8px));
  }
  .video-meeting-stage{
    min-height:0;
    height:100%;
    box-sizing:border-box;
  }
  .video-meeting-controls{
    position:fixed!important;
    z-index:80!important;
    left:6px!important;
    right:6px!important;
    bottom:var(--meeting-bottom-inset,8px)!important;
    width:auto!important;
    min-height:68px;
    height:auto!important;
    box-sizing:border-box;
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    padding:5px 6px!important;
    border:1px solid rgba(255,255,255,.09)!important;
    border-radius:16px!important;
    background:rgba(23,25,31,.97)!important;
    box-shadow:0 14px 42px rgba(0,0,0,.52)!important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    overflow:hidden!important;
  }
  .meeting-control-center{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:2px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    touch-action:pan-x;
  }
  .meeting-control-center::-webkit-scrollbar{display:none!important}
  .meeting-control-button{
    flex:0 0 56px!important;
    min-width:56px!important;
    width:56px!important;
    height:58px!important;
    padding:2px!important;
    border-radius:11px!important;
    scroll-snap-align:start;
  }
  .meeting-control-icon{font-size:1.16rem!important;line-height:1}
  .meeting-control-button small{
    display:block!important;
    width:100%;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:.50rem!important;
    line-height:1.05!important;
  }
  .meeting-control-right{
    flex:0 0 58px!important;
    min-width:58px!important;
    width:58px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .meeting-end-button{
    display:block!important;
    width:58px!important;
    min-width:58px!important;
    height:58px!important;
    padding:4px 3px!important;
    border-radius:12px!important;
    font-size:.56rem!important;
    line-height:1.08!important;
  }
  .video-meeting-sidepanel{
    bottom:calc(78px + var(--meeting-bottom-inset,8px))!important;
    height:min(65vh,520px)!important;
    max-height:calc(var(--meeting-viewport-height,100dvh) - 140px)!important;
  }
  .meeting-lobby-overlay,.meeting-ended-overlay{
    bottom:calc(78px + var(--meeting-bottom-inset,8px))!important;
  }
  .meeting-toast-stack{
    max-height:calc(var(--meeting-viewport-height,100dvh) - 150px);
    overflow:hidden;
  }
}
@media(max-width:390px){
  .video-meeting-app{grid-template-rows:48px minmax(0,1fr)!important}
  .video-meeting-main{padding-bottom:calc(74px + var(--meeting-bottom-inset,8px))}
  .video-meeting-controls{left:4px!important;right:4px!important;border-radius:14px!important;padding:4px!important}
  .meeting-control-button{flex-basis:52px!important;min-width:52px!important;width:52px!important;height:54px!important}
  .meeting-control-right,.meeting-end-button{flex-basis:54px!important;min-width:54px!important;width:54px!important}
  .meeting-end-button{height:54px!important;font-size:.52rem!important}
  .meeting-control-button small{font-size:.47rem!important}
  .video-meeting-sidepanel{bottom:calc(74px + var(--meeting-bottom-inset,8px))!important}
  .meeting-lobby-overlay,.meeting-ended-overlay{bottom:calc(74px + var(--meeting-bottom-inset,8px))!important}
}
@media(orientation:landscape) and (max-height:520px){
  .video-meeting-main{padding-bottom:calc(62px + var(--meeting-bottom-inset,6px))}
  .video-meeting-controls{min-height:54px;padding:3px 5px!important}
  .meeting-control-button,.meeting-end-button{height:48px!important}
  .meeting-control-button{flex-basis:50px!important;min-width:50px!important;width:50px!important}
  .meeting-control-right,.meeting-end-button{min-width:52px!important;width:52px!important;flex-basis:52px!important}
  .video-meeting-sidepanel{bottom:calc(62px + var(--meeting-bottom-inset,6px))!important}
}


/* =========================================================
   Digitera V4.10.8 — Zoom-like spotlight layout + host focus
   ========================================================= */
.meeting-video-tile{cursor:pointer}
.meeting-video-tile.is-featured{border-color:#4f46e5;box-shadow:0 0 0 1px rgba(99,102,241,.35),0 16px 40px rgba(0,0,0,.32)}
.meeting-video-tile.is-thumbnail{border-color:rgba(255,255,255,.18);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.meeting-video-tile[data-participant-role="host"] .meeting-video-name b{background:#2563eb}
.meeting-spotlight-mode .meeting-video-tile{display:none}
.meeting-spotlight-mode .meeting-video-tile.is-featured,
.meeting-spotlight-mode .meeting-video-tile.is-thumbnail{display:block}
.meeting-spotlight-mode .meeting-video-tile.is-thumbnail::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events:none;
}
.meeting-spotlight-mode .meeting-video-tile.is-thumbnail.is-thumbnail-more::before{
  content:"+" attr(data-hidden-count);
  position:absolute;
  inset:auto 8px 8px auto;
  z-index:8;
  min-width:28px;
  height:28px;
  padding:0 8px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(15,23,42,.84);
  color:#fff;
  font-size:.72rem;
  font-weight:800;
}
@media(min-width:761px){
  .video-meeting-grid.meeting-spotlight-mode{
    grid-template-columns:minmax(0,1fr) minmax(150px,18vw);
    grid-template-rows:repeat(3,minmax(0,1fr));
    align-content:stretch;
    gap:10px;
  }
  .meeting-spotlight-mode .meeting-video-tile.is-featured{
    position:relative;
    grid-column:1;
    grid-row:1 / span 3;
    min-height:0;
  }
  .meeting-spotlight-mode .meeting-video-tile.is-thumbnail{
    position:relative;
    grid-column:2;
    grid-row:var(--meeting-thumb-index,1);
    min-height:120px;
    height:100%;
  }
}
@media(max-width:760px){
  .video-meeting-stage{padding:4px!important}
  .video-meeting-grid.meeting-spotlight-mode{
    display:block;
    position:relative;
    min-height:100%;
    height:100%;
    overflow:hidden;
    padding:0;
  }
  .meeting-spotlight-mode .meeting-video-tile.is-featured{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border-radius:14px;
  }
  .meeting-spotlight-mode .meeting-video-tile.is-featured video,
  .meeting-spotlight-mode .meeting-video-tile.is-featured .meeting-video-placeholder{border-radius:14px}
  .meeting-spotlight-mode .meeting-video-tile.is-thumbnail{
    position:absolute;
    right:8px;
    width:min(31vw,118px);
    height:min(22vw,96px);
    border-radius:12px;
    z-index:9;
    bottom:calc(84px + var(--meeting-bottom-inset,8px) + ((var(--meeting-thumb-index,1) - 1) * 104px));
    background:#111827;
  }
  .meeting-spotlight-mode .meeting-video-tile.is-thumbnail video,
  .meeting-spotlight-mode .meeting-video-tile.is-thumbnail .meeting-video-placeholder{border-radius:12px}
  .meeting-spotlight-mode .meeting-video-tile.is-thumbnail .meeting-video-name{
    left:4px;
    right:4px;
    bottom:4px;
    gap:4px;
    padding:4px 5px;
    font-size:.62rem;
  }
  .meeting-spotlight-mode .meeting-video-tile.is-thumbnail .meeting-video-name b{font-size:.54rem;padding:1px 4px}
  .meeting-spotlight-mode .meeting-video-tile.is-thumbnail .meeting-video-placeholder span{width:42px;height:42px;font-size:.92rem}
  .meeting-spotlight-mode .meeting-video-tile.is-thumbnail .meeting-hand-indicator{
    width:26px;height:26px;right:6px;top:6px;font-size:.8rem;
  }
  .meeting-spotlight-mode .meeting-video-tile.is-thumbnail .meeting-peer-dot{left:6px;top:6px}
}
@media(max-width:390px){
  .meeting-spotlight-mode .meeting-video-tile.is-thumbnail{
    width:min(30vw,104px);
    height:min(21vw,86px);
    bottom:calc(78px + var(--meeting-bottom-inset,8px) + ((var(--meeting-thumb-index,1) - 1) * 92px));
  }
}


/* =========================================================
   Digitera V4.10.9 — Sisipkan gambar/video yang lebih familiar
   ========================================================= */
.blogger-media-tool{color:#5f6368!important}
.blogger-media-tool svg{width:19px;height:19px;display:block;fill:currentColor}
.blogger-image-tool:hover,.blogger-image-tool:focus{color:#1a73e8!important}
.blogger-video-tool:hover,.blogger-video-tool:focus{color:#d93025!important}
.blog-inline-video-wrap{width:100%;max-width:900px;margin:18px auto;text-align:center}
.rich-editor-canvas .blog-inline-video,
.public-post-content .blog-inline-video,
.blog-content .blog-inline-video{
  display:block;width:min(100%,900px);max-width:100%;aspect-ratio:16/9;margin:14px auto;border:0;border-radius:12px;background:#111;box-shadow:0 8px 28px rgba(0,0,0,.12)
}
.rich-editor-canvas video.blog-inline-video,
.public-post-content video.blog-inline-video,
.blog-content video.blog-inline-video{height:auto;aspect-ratio:auto;max-height:70vh}
.blog-media-insert-overlay{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px;background:rgba(32,33,36,.52);backdrop-filter:blur(2px)}
.blog-media-insert-modal{width:min(620px,100%);overflow:hidden;border:1px solid #dadce0;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(32,33,36,.30);color:#202124}
.blog-media-insert-head{min-height:72px;display:grid;grid-template-columns:44px minmax(0,1fr) 38px;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #e8eaed}
.blog-media-modal-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#e8f0fe;color:#1967d2;font-size:1.15rem;font-weight:900}
.blog-media-modal-icon.video{background:#fce8e6;color:#d93025}
.blog-media-insert-head>div:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:3px}
.blog-media-insert-head strong{font-size:1rem}.blog-media-insert-head small{color:#5f6368;font-size:.76rem}
.blog-media-insert-head>button{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#5f6368;font-size:1.45rem;cursor:pointer}
.blog-media-insert-head>button:hover{background:#f1f3f4;color:#202124}
.blog-media-insert-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}
.blog-media-source-card,.blog-media-link-card{min-height:205px;border:1px solid #dadce0;border-radius:14px;background:#fff;padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;color:#202124}
button.blog-media-source-card{cursor:pointer;font:inherit}button.blog-media-source-card:hover{border-color:#1a73e8;background:#f8fbff;box-shadow:0 0 0 1px #1a73e8}
.blog-media-source-card>span,.blog-media-link-icon{font-size:1.55rem}.blog-media-source-card strong,.blog-media-link-card strong{font-size:.92rem}
.blog-media-source-card small,.blog-media-link-card small{color:#6b7280;font-size:.72rem;line-height:1.45}
.blog-media-link-card input{width:100%;height:42px;margin-top:auto;border:1px solid #cbd0d6;border-radius:9px;padding:0 10px;background:#fff;color:#202124;font-size:.78rem}
.blog-media-link-card input:focus{outline:none;border-color:#1a73e8;box-shadow:0 0 0 2px rgba(26,115,232,.13)}.blog-media-link-card input.invalid{border-color:#d93025;box-shadow:0 0 0 2px rgba(217,48,37,.1)}
.blog-media-link-card .btn{align-self:flex-end;margin-top:2px}
@media(max-width:620px){.blog-media-insert-overlay{padding:10px;align-items:end}.blog-media-insert-modal{border-radius:18px 18px 10px 10px;max-height:90dvh;overflow:auto}.blog-media-insert-options{grid-template-columns:1fr;padding:12px}.blog-media-source-card,.blog-media-link-card{min-height:auto;padding:14px}.blog-media-link-card input{margin-top:4px}.blogger-media-tool{min-width:36px!important}}
.article-rich-content .blog-inline-video{display:block;width:min(100%,900px);max-width:100%;aspect-ratio:16/9;margin:18px auto;border:0;border-radius:12px;background:#111;box-shadow:0 8px 28px rgba(0,0,0,.12)}
.article-rich-content video.blog-inline-video{height:auto;aspect-ratio:auto;max-height:70vh}


/* Digitera V4.11.2 — bulk delete quiz action */
.quiz-delete-all-form{margin:0;display:inline-flex}
.quiz-delete-all-form .btn-danger{white-space:nowrap}
@media(max-width:720px){.page-quizzes .page-head .actions,.quiz-delete-all-form{width:100%}.quiz-delete-all-form .btn-danger{width:100%;justify-content:center}}


/* =========================================================
   Digitera V4.11.3 — Simple icon statistics for Guru & Siswa
   ========================================================= */
.simple-stat-strip{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    width:100%;
    margin:16px 0 24px;
    padding:16px 10px;
    border:1px solid #eeeaf8;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(55,38,100,.05);
}
.simple-stat-item{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:5px;
    padding:5px 4px;
    text-align:center;
    color:#25213a;
    text-decoration:none;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transition:transform .16s ease,color .16s ease;
}
.simple-stat-item:hover{transform:translateY(-2px);color:#7047eb}
.simple-stat-icon{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    margin-bottom:2px;
    border-radius:50%;
    color:#7047eb;
    background:#f1edff;
}
.simple-stat-icon svg{
    width:28px;
    height:28px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.simple-stat-item strong{
    color:#242033!important;
    font-size:1.12rem!important;
    line-height:1.05;
    font-weight:850;
    letter-spacing:-.02em;
}
.simple-stat-item>span:last-child{
    max-width:100%;
    color:#6f6a7d;
    font-size:.78rem;
    line-height:1.2;
    font-weight:650;
    overflow-wrap:anywhere;
}
.teacher-simple-stats{margin-top:4px}
.student-simple-stat-section{padding:0;background:#fff}
.student-simple-stats{margin:0 auto 8px;border-top:0;border-radius:0 0 18px 18px;box-shadow:none}

@media(max-width:620px){
    .simple-stat-strip{
        gap:2px;
        margin:10px 0 18px!important;
        padding:12px 2px!important;
        border-radius:15px;
    }
    .simple-stat-item{padding:4px 1px;gap:4px}
    .simple-stat-icon{width:46px;height:46px;margin-bottom:1px}
    .simple-stat-icon svg{width:24px;height:24px}
    .simple-stat-item strong{font-size:1rem!important}
    .simple-stat-item>span:last-child{font-size:.66rem;font-weight:650;line-height:1.12}
    .teacher-simple-stats{margin-top:0!important}
    .student-simple-stats{margin-top:0!important}
}
@media(max-width:360px){
    .simple-stat-icon{width:42px;height:42px}
    .simple-stat-icon svg{width:22px;height:22px}
    .simple-stat-item>span:last-child{font-size:.61rem}
}

/* =========================================================
   Digitera V4.11.4 — Quiz HTML/CSS/JavaScript Interaktif
   ========================================================= */
.interactive-authoring-switch{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:0 0 18px;padding:14px 16px;border:1px solid #e4defb;border-radius:18px;
  background:linear-gradient(135deg,#fbfaff,#f5f2ff);box-shadow:0 8px 24px rgba(87,58,190,.06)
}
.interactive-authoring-switch>div:first-child{display:flex;flex-direction:column;gap:3px}
.interactive-authoring-switch strong{color:#27213c}.interactive-authoring-switch small{color:#7a748a;font-size:.78rem}
.interactive-authoring-tabs{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.interactive-authoring-tabs button{
  border:1px solid #ddd6fe;background:#fff;color:#5b5570;border-radius:12px;padding:9px 13px;font-weight:800;cursor:pointer;transition:.18s
}
.interactive-authoring-tabs button:hover{transform:translateY(-1px);border-color:#a78bfa}
.interactive-authoring-tabs button.active{background:#6d4aff;color:#fff;border-color:#6d4aff;box-shadow:0 8px 18px rgba(109,74,255,.22)}
.interactive-authoring-note{display:flex;align-items:center;gap:11px;margin:0 0 18px;padding:12px 14px;border-radius:14px;background:#f8f7fc;color:#6b647b}
.interactive-authoring-note>span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#ede9fe;color:#6d4aff;font-weight:900}
.interactive-authoring-note>div{display:flex;flex-direction:column;gap:2px}.interactive-authoring-note strong{color:#342f42}.interactive-authoring-note small{font-size:.75rem}
.interactive-code-studio{margin:18px 0 4px;border:1px solid #ddd6fe;border-radius:22px;background:#111827;overflow:hidden;box-shadow:0 18px 44px rgba(15,23,42,.16)}
.interactive-code-studio[hidden]{display:none!important}
.interactive-code-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#161b2a,#1d2340);border-bottom:1px solid rgba(255,255,255,.08)}
.interactive-code-head>div{display:flex;align-items:center;gap:11px;min-width:0}.interactive-code-head>div>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.interactive-code-head strong{color:#fff}.interactive-code-head small{color:#aab2c5;font-size:.72rem}
.interactive-code-badge{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;font-weight:1000;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.interactive-code-head .btn{border-color:#3d4767;background:#242b44;color:#fff;white-space:nowrap}
.interactive-code-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#30394f}
.interactive-code-panel{display:flex;flex-direction:column;background:#121827;min-width:0}
.interactive-code-panel>span{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;background:#192033;color:#fff}
.interactive-code-panel>span b{font:800 .74rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em}.interactive-code-panel>span small{color:#8791a8;font-size:.62rem}
.interactive-code-panel textarea{width:100%;height:260px;resize:vertical;border:0;border-radius:0;background:#0d1320;color:#d9e2f2;padding:13px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2;outline:none;box-sizing:border-box}
.interactive-code-panel textarea:focus{background:#0a101b;box-shadow:inset 0 0 0 2px #6d4aff}
.interactive-code-panel.html-panel b{color:#fb923c}.interactive-code-panel.css-panel b{color:#60a5fa}.interactive-code-panel.js-panel b{color:#facc15}
.interactive-answer-key-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,420px);align-items:center;gap:14px;padding:14px 16px;background:#161d2e;border-top:1px solid rgba(255,255,255,.07)}
.interactive-answer-key-card>div{display:flex;flex-direction:column;gap:3px}.interactive-answer-key-card strong{color:#fff}.interactive-answer-key-card small{color:#9ca6ba;font-size:.72rem;line-height:1.4}.interactive-answer-key-card code{padding:2px 5px;border-radius:5px;background:#0e1422;color:#c4b5fd}
.interactive-answer-key-card input{height:44px;border:1px solid #3a4561;border-radius:11px;background:#0d1320;color:#fff;padding:0 12px;font-weight:700;outline:none}.interactive-answer-key-card input:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.15)}
.interactive-preview-shell{margin:14px;border:1px solid #30394f;border-radius:16px;background:#f8fafc;overflow:hidden}
.interactive-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:#fff;border-bottom:1px solid #e5e7eb;color:#4b5563;font-size:.73rem}
.interactive-preview-head>div{display:flex;align-items:center;gap:7px}.interactive-preview-head strong{color:#1f2937}.interactive-preview-head .live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.interactive-preview-shell iframe{display:block;width:100%;height:360px;border:0;background:#f8fafc}
.interactive-api-help{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 14px 14px;color:#aab2c5;font-size:.7rem}.interactive-api-help strong{color:#fff}.interactive-api-help code{padding:5px 8px;border-radius:8px;background:#0c1220;color:#c4b5fd;border:1px solid #2b344c}.interactive-api-help span{margin-left:auto}
.interactive-add-code-btn span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:1000;color:#6d4aff}
.interactive-code-badge-builder{background:#ede9fe!important;color:#5b21b6!important;border:1px solid #ddd6fe!important}
[data-standard-answer-fields][hidden]{display:none!important}

/* Player siswa */
.interactive-player-shell{display:grid;gap:12px;margin-top:14px}
.interactive-player-label{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:13px;background:linear-gradient(135deg,#f5f3ff,#eef2ff);border:1px solid #e0e7ff}
.interactive-player-label>span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#6d4aff;color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:1000}.interactive-player-label>div{display:flex;flex-direction:column;gap:2px}.interactive-player-label strong{color:#332b55}.interactive-player-label small{color:#7c7495;font-size:.72rem}
.interactive-question-frame{display:block;width:100%;height:460px;border:1px solid #e2e8f0;border-radius:18px;background:#f8fafc;box-shadow:0 12px 32px rgba(30,41,59,.08)}
.interactive-answer-fallback{display:grid;grid-template-columns:minmax(160px,.8fr) minmax(220px,1.2fr) auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid #e8e4f6;border-radius:14px;background:#fbfaff}
.interactive-answer-fallback>div{display:flex;flex-direction:column;gap:2px}.interactive-answer-fallback strong{font-size:.78rem;color:#37304b}.interactive-answer-fallback small{font-size:.66rem;color:#8a8399}.interactive-answer-fallback input{height:42px;border:1px solid #ddd6fe;border-radius:10px;background:#fff;padding:0 11px;outline:none}.interactive-answer-fallback input:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.12)}.interactive-answer-fallback>span{font-size:.7rem;color:#5b21b6;font-weight:800;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:900px){
  .interactive-code-grid{grid-template-columns:1fr}.interactive-code-panel textarea{height:210px}.interactive-answer-key-card{grid-template-columns:1fr}.interactive-preview-shell iframe{height:330px}
}
@media(max-width:720px){
  .interactive-authoring-switch{align-items:stretch;flex-direction:column;padding:12px}.interactive-authoring-tabs{display:grid;grid-template-columns:1fr 1fr}.interactive-authoring-tabs button{padding:10px 8px;font-size:.72rem}
  .interactive-code-head{align-items:flex-start}.interactive-code-head>div{align-items:flex-start}.interactive-code-head .btn{padding:8px 9px;font-size:.68rem}
  .interactive-code-panel textarea{height:190px;font-size:12px}.interactive-preview-shell{margin:10px}.interactive-preview-shell iframe{height:300px}
  .interactive-api-help span{width:100%;margin-left:0}.interactive-question-frame{height:390px;border-radius:14px}
  .interactive-answer-fallback{grid-template-columns:1fr}.interactive-answer-fallback>span{max-width:100%}
}
@media(max-width:420px){
  .interactive-authoring-tabs{grid-template-columns:1fr}.interactive-code-head{flex-direction:column}.interactive-code-head .btn{width:100%}.interactive-preview-shell iframe{height:270px}.interactive-question-frame{height:350px}
}


/* =========================================================
   Digitera V4.11.5 — Standalone Quiz HTML Interaktif
   ========================================================= */
.html-quiz-page-head code,.html-code-help code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#f1efff;color:#5b21b6;border-radius:7px;padding:2px 6px}
.html-quiz-mini-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 22px;padding:18px 22px;border:1px solid #ece8fb;border-radius:22px;background:#fff;box-shadow:0 12px 32px rgba(76,29,149,.06)}
.html-quiz-mini-stats>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;min-width:0}.html-quiz-mini-stats>div>span{width:46px;height:46px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#f3efff,#e8e1ff);font-size:1.25rem}.html-quiz-mini-stats strong{font-size:1.35rem;color:#1f2937}.html-quiz-mini-stats small{color:#7c8596;font-weight:700}
.html-quiz-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.html-quiz-card{position:relative;overflow:hidden;border:1px solid #e9e4f8;border-radius:24px;background:#fff;padding:22px;box-shadow:0 12px 34px rgba(58,31,112,.07)}.html-quiz-card:before{content:"";position:absolute;right:-38px;top:-42px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#ede9fe,transparent 70%)}.html-quiz-card-icon{position:relative;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#7047eb,#8b5cf6);color:#fff;font-family:ui-monospace,monospace;font-size:1rem;font-weight:900;box-shadow:0 10px 25px rgba(112,71,235,.24)}.html-quiz-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;color:#8a93a3;font-size:.72rem}.html-quiz-card h3{margin:12px 0 7px;color:#1f2937}.html-quiz-card p{min-height:42px;margin:0;color:#6b7280;font-size:.82rem;line-height:1.5}.html-quiz-card-meta{display:grid;gap:7px;margin:16px 0;padding:13px 0;border-top:1px solid #f0edf7;border-bottom:1px solid #f0edf7;color:#626b7a;font-size:.76rem}.html-quiz-card-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.html-quiz-card-actions form{margin:0}.html-empty-icon{width:74px;height:74px;margin:0 auto 14px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,#7047eb,#8b5cf6);color:#fff;font:900 1.2rem ui-monospace,monospace;box-shadow:0 16px 36px rgba(112,71,235,.22)}
.html-quiz-editor-form{display:grid;gap:18px}.html-quiz-meta-card,.html-single-code-card,.html-preview-card{border-radius:24px}.html-code-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}.html-code-toolbar>div:first-child{display:flex;align-items:center;gap:12px}.html-code-toolbar>div:first-child>div{display:flex;flex-direction:column}.html-code-toolbar small{color:#7c8596}.html-code-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#18181b;color:#c4b5fd;font:900 .92rem ui-monospace,monospace}.html-single-code-editor{width:100%;min-height:520px;resize:vertical;border:1px solid #2f3340!important;border-radius:18px!important;background:#101218!important;color:#e5e7eb!important;padding:18px!important;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;tab-size:2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}.html-single-code-editor:focus{outline:3px solid rgba(112,71,235,.16)!important;border-color:#8b5cf6!important}.html-code-help{margin-top:12px;padding:11px 13px;border-radius:13px;background:#f8f7ff;color:#667085;font-size:.78rem}.html-preview-card iframe{display:block;width:100%;height:520px;border:1px solid #e5e7eb;border-radius:18px;background:#fff}.html-quiz-savebar{position:sticky;bottom:10px;z-index:15;display:flex;justify-content:flex-end;gap:10px;padding:10px;border:1px solid rgba(229,231,235,.9);border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 18px 44px rgba(17,24,39,.12);backdrop-filter:blur(12px)}
.html-student-hero{padding:44px 0;background:radial-gradient(circle at 86% 10%,rgba(255,255,255,.18),transparent 26%),linear-gradient(135deg,#5b36df,#8b5cf6);color:#fff}.html-student-hero h1{max-width:720px;margin:7px 0 8px;color:#fff}.html-student-hero p{margin:0;color:#ede9fe}.html-student-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.html-student-card{display:flex;flex-direction:column;border:1px solid #ece8f7;border-radius:24px;padding:21px;background:#fff;box-shadow:0 12px 34px rgba(58,31,112,.06)}.html-student-card-code{width:52px;height:52px;display:grid;place-items:center;border-radius:17px;background:#17171c;color:#c4b5fd;font:900 .92rem ui-monospace,monospace}.html-student-subject{display:inline-flex;align-self:flex-start;margin-top:15px;padding:5px 9px;border-radius:999px;background:#f3f0ff;color:#6d4ce5;font-size:.68rem;font-weight:800}.html-student-card h3{margin:10px 0 7px}.html-student-card p{flex:1;color:#6b7280;font-size:.82rem}.html-student-meta{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0;color:#70798a;font-size:.72rem}
.html-quiz-join-wrap{min-height:calc(100vh - 160px);display:grid;place-items:center;padding:34px 14px}.html-quiz-join-card{width:min(620px,100%);padding:30px;border:1px solid #ece8f7;border-radius:28px;background:#fff;box-shadow:0 22px 60px rgba(76,29,149,.12);text-align:center}.html-quiz-join-icon{width:72px;height:72px;margin:0 auto 14px;border-radius:23px;display:grid;place-items:center;background:linear-gradient(135deg,#7047eb,#8b5cf6);color:#fff;font:900 1.12rem ui-monospace,monospace}.html-quiz-join-card h1{margin:7px 0}.html-quiz-join-card>p{color:#6b7280}.html-quiz-join-meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0 20px}.html-quiz-join-meta span{padding:7px 9px;border-radius:999px;background:#f7f5ff;color:#655c75;font-size:.72rem}.html-quiz-join-card form{text-align:left}
.html-quiz-player-body{margin:0;overflow:hidden;background:#111318;color:#fff;font-family:Inter,system-ui,-apple-system,sans-serif}.html-quiz-player{height:100dvh;display:grid;grid-template-rows:60px minmax(0,1fr) 58px;background:#111318}.html-quiz-player>header{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:9px;padding:7px 12px;border-bottom:1px solid #2b2e36;background:#17191f}.html-quiz-player>header>a{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#242730;color:#fff;text-decoration:none;font-size:1.2rem}.html-quiz-player>header>div{min-width:0;display:flex;flex-direction:column}.html-quiz-player>header strong,.html-quiz-player>header small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.html-quiz-player>header small{color:#9ca3af;font-size:.68rem}.html-quiz-player>header>span{color:#c4b5fd;font:900 .78rem ui-monospace,monospace;text-align:center}.html-quiz-player>main{position:relative;min-height:0;padding:6px}.html-quiz-player iframe{width:100%;height:100%;display:block;border:0;border-radius:16px;background:#fff}.html-quiz-player>footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 12px;border-top:1px solid #2b2e36;background:#17191f}.html-quiz-player>footer span{color:#a4aab5;font-size:.7rem}.html-player-result{position:absolute;inset:6px;z-index:10;display:grid;place-items:center;border-radius:16px;background:rgba(15,17,22,.84);backdrop-filter:blur(10px)}.html-player-result[hidden]{display:none}.html-player-result>div{width:min(430px,calc(100% - 30px));padding:30px;border:1px solid #343844;border-radius:24px;background:#1a1d24;text-align:center}.html-player-result span{width:68px;height:68px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#22c55e;font-size:1.8rem}.html-player-result h2{color:#fff}.html-player-result p{color:#cbd5e1}
@media(max-width:1050px){.html-quiz-card-grid,.html-student-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.student-desktop-nav a[href*="html_quizzes"] span:last-child{display:none}}
@media(max-width:720px){.html-quiz-mini-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:12px 6px;border-radius:18px}.html-quiz-mini-stats>div>span{width:38px;height:38px;border-radius:13px;font-size:1rem}.html-quiz-mini-stats strong{font-size:1.05rem}.html-quiz-mini-stats small{font-size:.56rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.html-quiz-card-grid,.html-student-grid{grid-template-columns:1fr}.html-code-toolbar{align-items:flex-start;flex-direction:column}.html-code-toolbar .actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.html-single-code-editor{min-height:420px;font-size:12px!important;padding:13px!important;border-radius:14px!important}.html-preview-card iframe{height:420px}.html-quiz-savebar{bottom:74px;display:grid;grid-template-columns:1fr 1.4fr}.html-quiz-savebar .btn{width:100%}.html-student-hero{padding:30px 0}.html-quiz-player{grid-template-rows:54px minmax(0,1fr) 58px}.html-quiz-player>main{padding:3px}.html-quiz-player iframe{border-radius:10px}.html-quiz-player>footer{padding:5px 7px}.html-quiz-player>footer span{display:none}.html-quiz-player>footer .btn{width:100%}.html-quiz-join-card{padding:24px 18px;border-radius:22px}}
@media(max-width:1050px){
  .student-desktop-nav a:nth-child(5){display:flex}
  .student-desktop-nav a:nth-child(7){display:none}
}


/* =========================================================
   Digitera V4.11.6 — Prompt Otomatis Quiz HTML
   ========================================================= */
.html-prompt-generator-card{position:relative;overflow:hidden;border:1px solid #e9e2ff!important;border-radius:24px!important;background:linear-gradient(145deg,#fff,#fbfaff)!important}
.html-prompt-generator-card:after{content:"";position:absolute;right:-70px;top:-80px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.14),transparent 70%);pointer-events:none}
.html-prompt-head{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin-bottom:18px}.html-prompt-head-icon{width:54px;height:54px;flex:0 0 54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#7047eb,#9b5cff);color:#fff;font-size:1.35rem;box-shadow:0 12px 26px rgba(112,71,235,.24)}.html-prompt-head h2{margin:2px 0 3px;color:#241d35}.html-prompt-head p{margin:0;color:#7a7388;font-size:.8rem}.html-prompt-grid{position:relative;z-index:1;display:grid;grid-template-columns:2fr 1fr 1.2fr 1.5fr;gap:12px}.html-prompt-grid .form-group{margin:0}.html-prompt-output-wrap{position:relative;z-index:1;margin-top:16px;padding:14px;border:1px solid #ddd6fe;border-radius:18px;background:#f8f7ff}.html-prompt-output-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.html-prompt-output-head>div{display:flex;flex-direction:column;gap:2px}.html-prompt-output-head strong{color:#33265d}.html-prompt-output-head small{color:#847c98;font-size:.7rem}.html-prompt-output{width:100%;min-height:265px;resize:vertical;border:1px solid #d9d3eb!important;border-radius:14px!important;background:#fff!important;color:#353044!important;padding:14px!important;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important}.html-prompt-output:focus{outline:3px solid rgba(112,71,235,.11)!important;border-color:#8b5cf6!important}.html-prompt-copy-status{margin-top:8px;color:#6d5f82;font-size:.7rem;font-weight:700}
@media(max-width:980px){.html-prompt-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.html-prompt-generator-card{border-radius:20px!important}.html-prompt-head{align-items:flex-start}.html-prompt-head-icon{width:46px;height:46px;flex-basis:46px;border-radius:15px}.html-prompt-head h2{font-size:1rem}.html-prompt-grid{grid-template-columns:1fr}.html-prompt-output-head{align-items:stretch;flex-direction:column}.html-prompt-output-head .btn{width:100%}.html-prompt-output{min-height:330px;font-size:11.5px!important;padding:11px!important}}

/* =========================================================
   Digitera V4.11.8 — student all-menu grid + Android notifications
   ========================================================= */
@media (max-width:850px){
  .student-all-menu-sheet{
    max-height:min(76vh,610px)!important;
    padding:10px 14px 18px!important;
  }
  .student-all-menu-head{margin-bottom:8px}
  .student-sheet-code-compact{
    margin:8px 0 13px!important;
    padding:9px 13px!important;
    border-radius:14px!important;
    box-shadow:none!important;
  }
  .student-sheet-code-compact span{font-size:.62rem!important}
  .student-sheet-code-compact strong{font-size:.82rem!important}
  .student-all-menu-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .student-all-menu-grid a{
    min-width:0!important;
    min-height:86px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    padding:9px 3px 7px!important;
    border:0!important;
    border-radius:16px!important;
    color:#5e5669!important;
    background:transparent!important;
    text-align:center!important;
    box-shadow:none!important;
  }
  .student-all-menu-grid a>span{
    position:relative!important;
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:16px!important;
    color:#7047eb!important;
    background:linear-gradient(145deg,#f0ebff,#faf8ff)!important;
    box-shadow:0 7px 17px rgba(93,63,183,.09)!important;
  }
  .student-all-menu-grid a:nth-child(4n+2)>span{color:#4f6fe8!important;background:linear-gradient(145deg,#eaf0ff,#f8faff)!important}
  .student-all-menu-grid a:nth-child(4n+3)>span{color:#a14fca!important;background:linear-gradient(145deg,#f7eaff,#fff8ff)!important}
  .student-all-menu-grid a:nth-child(4n+4)>span{color:#d47932!important;background:linear-gradient(145deg,#fff0e4,#fffaf5)!important}
  .student-all-menu-grid a svg{width:24px!important;height:24px!important}
  .student-all-menu-grid a>strong{
    width:100%;
    min-height:28px;
    display:flex!important;
    align-items:flex-start;
    justify-content:center;
    color:inherit!important;
    font-size:.66rem!important;
    font-weight:800!important;
    line-height:1.16!important;
    overflow-wrap:anywhere;
  }
  .student-all-menu-grid a.active{color:#6842dc!important}
  .student-all-menu-grid a.active>span{
    color:#fff!important;
    background:linear-gradient(135deg,#7047eb,#9d56e8)!important;
    box-shadow:0 9px 20px rgba(112,71,235,.24)!important;
    transform:translateY(-1px);
  }
  .student-all-menu-grid .student-sheet-logout{color:#a44555!important;background:transparent!important}
  .student-all-menu-grid .student-sheet-logout>span{color:#c34c5f!important;background:#ffecef!important}
  .student-all-menu-grid .student-sheet-notification-icon>b{
    position:absolute!important;
    top:-6px!important;
    right:-8px!important;
    min-width:20px!important;
    height:20px!important;
    padding:0 5px!important;
    display:grid!important;
    place-items:center!important;
    border:2px solid #fff!important;
    border-radius:999px!important;
    background:#ef4444!important;
    color:#fff!important;
    font-size:.56rem!important;
    line-height:1!important;
    box-shadow:0 4px 10px rgba(239,68,68,.25)!important;
  }
  .student-all-menu-grid .student-sheet-notification-icon>b[hidden]{display:none!important}
}
@media (max-width:370px){
  .student-all-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .student-all-menu-grid a{min-height:82px!important}
}

/* Floating in-app notification follows Android heads-up card proportions. */
.floating-notification-icon{position:relative;overflow:visible}
.floating-notification-icon img{width:100%;height:100%;object-fit:contain;border-radius:inherit;background:#fff}
.floating-notification-icon em{
  position:absolute;right:-4px;bottom:-4px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;
  border:2px solid #fff;border-radius:999px;background:var(--toast-accent);color:#fff;font-size:.52rem;font-style:normal;font-weight:900;
}
@media(max-width:700px){
  .floating-notification-stack{
    left:10px!important;
    right:10px!important;
    top:calc(8px + env(safe-area-inset-top))!important;
    width:auto!important;
    gap:8px!important;
  }
  .floating-notification-toast{
    grid-template-columns:44px minmax(0,1fr) 30px!important;
    gap:11px!important;
    padding:11px 11px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-left:0!important;
    border-radius:20px!important;
    background:rgba(55,55,58,.97)!important;
    color:#fff!important;
    box-shadow:0 16px 38px rgba(0,0,0,.32)!important;
    backdrop-filter:blur(20px)!important;
    -webkit-backdrop-filter:blur(20px)!important;
    transform:translate3d(0,-18px,0) scale(.98)!important;
  }
  .floating-notification-toast.is-visible{transform:translate3d(0,0,0) scale(1)!important}
  .floating-notification-toast.is-leaving{transform:translate3d(0,-14px,0) scale(.98)!important}
  .floating-notification-icon{width:42px!important;height:42px!important;border-radius:13px!important;background:#fff!important;padding:2px!important}
  .floating-notification-icon em{border-color:#37373a!important}
  .floating-notification-top{display:flex!important;align-items:center!important}
  .floating-notification-top strong{color:#fff!important;font-size:.88rem!important}
  .floating-notification-top small{display:block!important;margin:0!important;color:#c8c8cc!important;font-size:.65rem!important}
  .floating-notification-copy p{margin-top:4px!important;color:#e6e6e9!important;font-size:.78rem!important;line-height:1.35!important}
  .floating-notification-actions{margin-top:7px!important;gap:14px!important}
  .floating-notification-actions a{color:#d8c9ff!important;font-size:.72rem!important}
  .floating-notification-close{width:28px!important;height:28px!important;background:rgba(255,255,255,.08)!important;color:#f1f1f3!important}
  .push-permission-prompt{bottom:calc(96px + env(safe-area-inset-bottom))!important}
}

.notification-device-actions [data-push-test]{white-space:nowrap}
@media(max-width:700px){
  .notification-device-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%}
  .notification-device-actions .btn{width:100%!important}
  .notification-device-actions [data-push-disable]{grid-column:1/-1}
}

/* =========================================================
   Digitera V4.11.9 — Multi Kelas + Kode Kelas + Kartu Akses
   ========================================================= */
.teacher-classes-page{padding-bottom:88px}
.teacher-class-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:18px;align-items:stretch;margin-bottom:26px}
.teacher-class-form-card{margin:0!important;padding:24px}
.teacher-class-form-card h2{margin:6px 0 5px}
.teacher-code-overview{position:relative;overflow:hidden;border-radius:24px;padding:26px;background:linear-gradient(145deg,#6337e6 0%,#7d4ef0 52%,#9a67f3 100%);color:#fff;box-shadow:0 18px 42px rgba(91,53,213,.18);display:flex;flex-direction:column;justify-content:space-between;min-height:220px}
.teacher-code-overview:before,.teacher-code-overview:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.10);pointer-events:none}.teacher-code-overview:before{width:190px;height:190px;right:-55px;top:-75px}.teacher-code-overview:after{width:110px;height:110px;right:90px;bottom:-70px}
.teacher-code-overview>div,.teacher-code-overview>a{position:relative;z-index:1}.teacher-code-overview small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:#e9ddff;font-weight:800}.teacher-code-overview strong{display:block;margin:10px 0 8px;font-size:clamp(1.7rem,4vw,2.45rem);letter-spacing:.08em}.teacher-code-overview span{display:block;color:#eee8ff;font-size:.82rem;line-height:1.55}.teacher-code-overview>a{align-self:flex-start;color:#fff;text-decoration:none;font-weight:800;font-size:.82rem;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.14)}
.teacher-class-section-head{margin-top:8px;margin-bottom:14px}.teacher-class-section-head h2{margin:4px 0 0}
.teacher-class-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.teacher-class-card{position:relative;overflow:hidden;border:1px solid #e8e1f8;border-radius:24px;background:linear-gradient(180deg,#fff 0%,#fcfaff 100%);padding:21px;box-shadow:0 10px 30px rgba(67,44,120,.07)}
.teacher-class-card:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-70px;top:-80px;background:linear-gradient(145deg,rgba(124,77,240,.11),rgba(124,77,240,.02));pointer-events:none}.teacher-class-card.is-inactive{opacity:.72;filter:saturate(.75)}
.teacher-class-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;position:relative;z-index:1}.teacher-class-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#f2edff;color:#7144e7}.teacher-class-icon svg{width:26px;height:26px}.teacher-class-card h3{margin:0;color:#272233;font-size:1.18rem}.teacher-class-card>p{margin:5px 0 15px;color:#817b8c;font-size:.78rem;min-height:1.2em}
.teacher-class-code{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:14px 15px;border:1px solid #e8e0fb;border-radius:17px;background:#f7f3ff}.teacher-class-code small{grid-column:1/-1;color:#84789c;text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-size:.63rem}.teacher-class-code strong{color:#5c35d5;font-size:1.28rem;letter-spacing:.07em}.teacher-class-code button{border:0;border-radius:9px;background:#7047eb;color:#fff;font-weight:800;font-size:.72rem;padding:8px 10px;cursor:pointer}
.teacher-class-card-codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.teacher-class-card-codes>span{min-width:0;padding:10px 11px;border-radius:13px;background:#fbfaff;border:1px solid #eee9f8}.teacher-class-card-codes small{display:block;color:#8a8493;font-size:.6rem;font-weight:800;text-transform:uppercase}.teacher-class-card-codes b{display:block;margin-top:4px;color:#302a3a;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.teacher-class-card-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.teacher-class-card-actions .btn{min-height:34px;padding:7px 10px}.teacher-class-card-actions .inline-form{margin:0}

.student-class-select-page{min-height:100dvh;background:linear-gradient(180deg,#f6f1ff 0,#fbf9ff 35%,#fff 100%);padding-bottom:96px}.student-class-select-hero{position:relative;overflow:hidden;padding:22px 0 28px;background:linear-gradient(135deg,#6135de,#7b47ed 58%,#955af2);color:#fff}.student-class-select-hero:after{content:"";position:absolute;width:240px;height:240px;right:-80px;top:-125px;border-radius:50%;background:rgba(255,255,255,.08)}.student-class-select-hero>.container{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px}.student-class-select-teacher{display:flex;align-items:center;gap:13px;min-width:0}.student-class-teacher-photo{width:62px;height:62px;border-radius:20px;overflow:hidden;background:#fff;border:3px solid rgba(255,255,255,.78);box-shadow:0 8px 25px rgba(37,18,88,.2);display:grid;place-items:center;flex:0 0 auto}.student-class-teacher-photo img{width:100%;height:100%;object-fit:cover}.student-class-teacher-photo span{color:#6538de;font-size:1.1rem;font-weight:900}.student-class-select-teacher>div:last-child{min-width:0}.student-class-select-teacher h1{margin:3px 0 2px;color:#fff;font-size:clamp(1.2rem,4vw,1.65rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.student-class-select-teacher p{margin:0;color:#e9ddff;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.student-change-teacher{flex:0 0 auto;color:#fff;text-decoration:none;font-size:.72rem;font-weight:800;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);border-radius:999px;padding:9px 12px}.student-class-select-content{margin-top:2px}.class-picker-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin:6px 0 17px}.class-picker-head h2{margin:5px 0 4px;font-size:clamp(1.45rem,5vw,2rem)}.class-picker-head p{margin:0;color:#817a8c;max-width:620px}.class-picker-summary{width:64px;height:64px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#eee7ff;color:#5f38d5;flex:0 0 auto}.class-picker-summary strong{font-size:1.35rem;line-height:1}.class-picker-summary span{font-size:.65rem;font-weight:800;margin-top:4px}
.student-room-class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.student-room-class-card{position:relative;min-width:0;border:1px solid #e9e3f4;border-radius:22px;background:#fff;padding:16px;display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:12px;text-align:left;box-shadow:0 8px 24px rgba(60,38,104,.06);cursor:pointer;color:#292333;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.student-room-class-card:hover,.student-room-class-card:focus-visible{transform:translateY(-2px);box-shadow:0 13px 30px rgba(74,43,141,.12);border-color:#cfc0f5;outline:none}.student-room-class-icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#7144e8,#8e5bf0);color:#fff}.student-room-class-icon svg{width:27px;height:27px}.student-room-class-copy{display:flex;min-width:0;flex-direction:column;gap:2px}.student-room-class-copy small{color:#91899d;text-transform:uppercase;font-size:.59rem;letter-spacing:.09em;font-weight:900}.student-room-class-copy strong{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.student-room-class-copy em{font-style:normal;color:#81798d;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.student-room-class-card>b{color:#7548e8;font-size:1.15rem}.class-tone-2 .student-room-class-icon{background:linear-gradient(145deg,#4f70e9,#7055ed)}.class-tone-3 .student-room-class-icon{background:linear-gradient(145deg,#9d4ee3,#7846e7)}.class-tone-4 .student-room-class-icon{background:linear-gradient(145deg,#4c83dc,#6a55e8)}.class-tone-5 .student-room-class-icon{background:linear-gradient(145deg,#7a46df,#a257ea)}.class-tone-6 .student-room-class-icon{background:linear-gradient(145deg,#5a5ce0,#854be6)}
.student-class-code-backdrop{position:fixed;inset:0;z-index:230;background:rgba(19,13,32,.45);backdrop-filter:blur(5px);opacity:0;transition:.16s}.student-class-code-backdrop[hidden]{display:none!important}.student-class-code-backdrop.open{opacity:1}.student-class-code-modal{position:fixed;z-index:231;left:50%;top:50%;width:min(430px,calc(100% - 28px));transform:translate(-50%,-46%) scale(.98);opacity:0;border:1px solid #e7e0f5;border-radius:25px;background:#fff;padding:20px;box-shadow:0 26px 80px rgba(31,20,52,.28);transition:.18s}.student-class-code-modal[hidden]{display:none!important}.student-class-code-modal.open{transform:translate(-50%,-50%) scale(1);opacity:1}.student-class-code-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.student-class-code-head>div{display:flex;align-items:center;gap:10px}.student-class-code-head>div>span{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#f0eaff;color:#6f43e5}.student-class-code-head>div>span svg{width:22px;height:22px}.student-class-code-head small{display:block;color:#91899c;font-size:.62rem;text-transform:uppercase;font-weight:800}.student-class-code-head strong{display:block;margin-top:2px;color:#2d2736}.student-class-code-head>button{width:38px;height:38px;border:0;border-radius:12px;background:#f5f3f8;color:#625b6a;font-size:1.35rem;cursor:pointer}.student-class-code-modal .join-code{text-transform:uppercase;letter-spacing:.08em;text-align:center;font-size:1.2rem;font-weight:900;color:#5e38d5}
.teacher-public-class-switch{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:.69rem;font-weight:800;color:#6940dd;text-decoration:none;padding:6px 9px;border-radius:999px;background:#f0eaff}.meeting-class-target{display:inline-flex;margin-top:7px;padding:4px 7px;border-radius:999px;background:#f0eaff;color:#623bd8;font-size:.64rem;font-weight:800}

@media(max-width:760px){
  .teacher-class-layout{grid-template-columns:1fr}.teacher-code-overview{min-height:180px;padding:22px}.teacher-class-card-grid{grid-template-columns:1fr}
  .student-class-select-hero{padding:16px 0 21px}.student-class-select-hero>.container{align-items:flex-start}.student-class-teacher-photo{width:54px;height:54px;border-radius:17px}.student-change-teacher{padding:7px 9px;font-size:.63rem}.class-picker-head{align-items:flex-start}.class-picker-head p{font-size:.78rem;line-height:1.55}.student-room-class-grid{grid-template-columns:1fr}.student-room-class-card{padding:14px;border-radius:19px;grid-template-columns:50px minmax(0,1fr) auto}.student-room-class-icon{width:50px;height:50px;border-radius:15px}.student-class-code-modal{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translate(-50%,24px);border-radius:26px;padding:19px}.student-class-code-modal.open{transform:translate(-50%,0)}
}
@media(max-width:390px){.student-class-select-teacher h1{max-width:180px}.student-change-teacher{font-size:0;width:36px;height:36px;padding:0;display:grid;place-items:center}.student-change-teacher:after{content:"↔";font-size:.95rem}.class-picker-summary{width:56px;height:56px;border-radius:17px}.teacher-class-card{padding:17px}.teacher-class-card-codes{grid-template-columns:1fr}.teacher-class-code strong{font-size:1.08rem}}


/* Digitera V4.12.0 — automatic code submit */
.auto-code-status{margin:-2px 0 10px;color:#7c6f96;font-size:.72rem;text-align:center;min-height:1.05rem}.student-class-code-modal .auto-code-status{text-align:left;margin-top:-3px}.join-code[readonly]{opacity:.78;cursor:wait}


/* =========================================================
   Digitera V4.12.1 — student footer menu as full app grid
   ========================================================= */
@media (max-width:850px){
  .student-all-menu-sheet{
    left:10px!important;
    right:10px!important;
    bottom:calc(92px + env(safe-area-inset-bottom))!important;
    max-height:min(79vh,680px)!important;
    padding:10px 14px 18px!important;
    border:1px solid #e3e5ee!important;
    border-radius:28px!important;
    background:#f7f8fc!important;
    box-shadow:0 26px 70px rgba(31,36,55,.28)!important;
  }
  .student-all-menu-sheet .student-sheet-handle{background:#d9dce6!important;margin-bottom:8px!important}
  .student-all-menu-head{padding:0 2px 8px!important;margin:0!important}
  .student-all-menu-head small{color:#8d93a2!important;font-size:.64rem!important}
  .student-all-menu-head strong{color:#202634!important;font-size:1.05rem!important;font-weight:900!important}
  .student-all-menu-head button{
    width:38px!important;height:38px!important;border:1px solid #e1e4ec!important;border-radius:13px!important;
    background:#fff!important;color:#717886!important;box-shadow:0 4px 12px rgba(31,36,55,.05)!important;
  }
  .student-sheet-code-compact{display:none!important}
  .student-menu-context{
    display:flex;align-items:center;gap:10px;margin:2px 2px 13px;padding:10px 12px;border:1px solid #e5e7ef;border-radius:16px;
    background:#fff;box-shadow:0 4px 14px rgba(31,36,55,.04);
  }
  .student-menu-context-icon{
    width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;color:#7047eb;background:#f0ebff;
  }
  .student-menu-context-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .student-menu-context>div{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px}
  .student-menu-context small{grid-column:1/-1;color:#969cab;font-size:.58rem;font-weight:800}
  .student-menu-context strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2a3040;font-size:.78rem;font-weight:900}
  .student-menu-context em{font-style:normal;color:#7047eb;background:#f2eeff;border-radius:999px;padding:3px 7px;font-size:.56rem;font-weight:900;letter-spacing:.04em}
  .student-all-menu-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
    padding:1px 1px 3px!important;
  }
  .student-all-menu-grid a{
    min-width:0!important;
    min-height:102px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    padding:10px 5px 9px!important;
    border:1px solid #e0e3eb!important;
    border-radius:20px!important;
    background:#fff!important;
    color:#242a37!important;
    text-align:center!important;
    box-shadow:0 5px 15px rgba(31,36,55,.045)!important;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
  }
  .student-all-menu-grid a:active{transform:scale(.965)!important}
  .student-all-menu-grid a>span{
    position:relative!important;
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:15px!important;
    color:#7047eb!important;
    background:#f0ebff!important;
    box-shadow:none!important;
  }
  .student-all-menu-grid a svg{width:25px!important;height:25px!important;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .student-all-menu-grid a>strong{
    width:100%!important;
    min-height:28px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    color:#252b38!important;
    font-size:.67rem!important;
    font-weight:850!important;
    line-height:1.15!important;
    overflow-wrap:anywhere!important;
  }
  .student-all-menu-grid a[data-tone="blue"]>span{color:#2574da!important;background:#eaf3ff!important}
  .student-all-menu-grid a[data-tone="purple"]>span{color:#7c3aed!important;background:#f2eaff!important}
  .student-all-menu-grid a[data-tone="cyan"]>span{color:#0891b2!important;background:#e8faff!important}
  .student-all-menu-grid a[data-tone="orange"]>span{color:#e27619!important;background:#fff1e4!important}
  .student-all-menu-grid a[data-tone="pink"]>span{color:#db3f8e!important;background:#ffeaf5!important}
  .student-all-menu-grid a[data-tone="green"]>span{color:#169b62!important;background:#e8f8ef!important}
  .student-all-menu-grid a[data-tone="indigo"]>span{color:#4f5fd6!important;background:#eceeff!important}
  .student-all-menu-grid a[data-tone="amber"]>span{color:#c88a0a!important;background:#fff6db!important}
  .student-all-menu-grid a[data-tone="red"]>span{color:#dc4d4d!important;background:#ffeded!important}
  .student-all-menu-grid a[data-tone="teal"]>span{color:#0f9b94!important;background:#e5f9f7!important}
  .student-all-menu-grid a[data-tone="rose"]>span{color:#e24d70!important;background:#ffedf2!important}
  .student-all-menu-grid a[data-tone="slate"]>span{color:#677084!important;background:#eef1f5!important}
  .student-all-menu-grid a[data-tone="logout"]>span{color:#c64255!important;background:#ffecef!important}
  .student-all-menu-grid a.active{border-color:#cfc4ff!important;background:#fbf9ff!important;color:#6842dc!important}
  .student-all-menu-grid a.active>span{color:#fff!important;background:linear-gradient(135deg,#7047eb,#9d56e8)!important;box-shadow:0 8px 18px rgba(112,71,235,.22)!important;transform:none!important}
  .student-all-menu-grid a.active>strong{color:#6842dc!important}
  .student-all-menu-grid .student-sheet-logout{color:#a44555!important;background:#fff!important}
  .student-all-menu-grid .student-sheet-notification-icon>b{
    position:absolute!important;top:-7px!important;right:-8px!important;min-width:21px!important;height:21px!important;padding:0 5px!important;
    display:grid!important;place-items:center!important;border:2px solid #fff!important;border-radius:999px!important;background:#ef4444!important;color:#fff!important;
    font-size:.55rem!important;line-height:1!important;font-weight:900!important;box-shadow:0 4px 10px rgba(239,68,68,.25)!important;
  }
  .student-all-menu-grid .student-sheet-notification-icon>b[hidden]{display:none!important}
  .student-bottom-nav button[data-student-more-toggle] .student-nav-icon{border-radius:12px}
}
@media (max-width:390px){
  .student-all-menu-sheet{left:6px!important;right:6px!important;padding-left:9px!important;padding-right:9px!important}
  .student-all-menu-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
  .student-all-menu-grid a{min-height:94px!important;border-radius:17px!important;padding:8px 2px!important}
  .student-all-menu-grid a>span{width:44px!important;height:44px!important;flex-basis:44px!important;border-radius:14px!important}
  .student-all-menu-grid a svg{width:22px!important;height:22px!important}
  .student-all-menu-grid a>strong{font-size:.60rem!important;min-height:25px!important}
}

/* =========================================================
   Digitera V4.12.1 — Footer siswa model grid ala marketplace
   ========================================================= */
@media (max-width: 850px) {
    body.role-student {
        padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    }

    .student-bottom-nav {
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 10px calc(12px + env(safe-area-inset-bottom));
        border: 0;
        border-top: 1px solid rgba(30, 78, 164, .10);
        border-radius: 22px 22px 0 0;
        background: rgba(255,255,255,.995);
        box-shadow: 0 -10px 34px rgba(19, 40, 86, .12);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        gap: 0;
    }

    .student-bottom-nav a,
    .student-bottom-nav button {
        min-height: 56px;
        gap: 7px;
        padding: 4px 2px;
        border-radius: 14px;
        color: #8a90a3;
        font-weight: 700;
    }

    .student-bottom-nav a::after,
    .student-bottom-nav button::after {
        display: none;
    }

    .student-nav-icon {
        width: 24px;
        height: 24px;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        color: currentColor;
    }

    .student-nav-icon svg {
        width: 23px;
        height: 23px;
        stroke-width: 1.9;
    }

    .student-bottom-nav small {
        font-size: .73rem;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    .student-bottom-nav a.active,
    .student-bottom-nav button.active,
    .student-bottom-nav a:active,
    .student-bottom-nav button:active,
    .student-bottom-nav button.is-open {
        color: #1763d8;
    }

    .student-bottom-nav a.active .student-nav-icon,
    .student-bottom-nav button.active .student-nav-icon,
    .student-bottom-nav a:active .student-nav-icon,
    .student-bottom-nav button:active .student-nav-icon,
    .student-bottom-nav button.is-open .student-nav-icon,
    .student-bottom-nav .student-nav-home .student-nav-icon {
        background: transparent !important;
        color: currentColor;
        box-shadow: none !important;
        transform: none !important;
    }

    .student-more-backdrop {
        background: rgba(17, 24, 39, .34);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .student-more-sheet {
        left: 10px;
        right: 10px;
        bottom: calc(82px + env(safe-area-inset-bottom));
        max-height: min(74vh, 600px);
        padding: 12px 14px 18px;
        border: 1px solid rgba(25, 84, 176, .10);
        border-radius: 28px;
        background: #f8fafc;
        box-shadow: 0 24px 60px rgba(17, 24, 39, .18);
    }

    .student-all-menu-head {
        align-items: center;
        padding-inline: 4px;
        margin-bottom: 12px;
    }

    .student-all-menu-head small {
        color: #1763d8;
        font-weight: 800;
        letter-spacing: .01em;
    }

    .student-all-menu-head strong {
        color: #16213f;
        font-size: 1.16rem;
    }

    .student-sheet-code.student-sheet-code-compact {
        margin-bottom: 14px;
        padding: 14px 16px;
        border-radius: 18px;
        border: 1px solid rgba(23, 99, 216, .08);
        background: linear-gradient(135deg, rgba(33, 115, 233, .12), rgba(94, 160, 255, .08));
        box-shadow: none;
    }

    .student-sheet-code.student-sheet-code-compact span,
    .student-sheet-code.student-sheet-code-compact small {
        color: #5f6880;
    }

    .student-sheet-code.student-sheet-code-compact strong {
        color: #102249;
    }

    .student-sheet-grid.student-all-menu-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .student-sheet-grid.student-all-menu-grid a {
        min-height: 104px;
        padding: 14px 8px 12px;
        border-radius: 20px;
        border: 1px solid rgba(148, 163, 184, .16);
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
        box-shadow: 0 10px 24px rgba(148, 163, 184, .14);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .student-sheet-grid.student-all-menu-grid a:hover,
    .student-sheet-grid.student-all-menu-grid a:active,
    .student-sheet-grid.student-all-menu-grid a.active {
        transform: translateY(-1px);
        border-color: rgba(23, 99, 216, .30);
        box-shadow: 0 12px 28px rgba(59, 130, 246, .18);
    }

    .student-sheet-grid.student-all-menu-grid a > span,
    .student-sheet-grid.student-all-menu-grid .student-sheet-notification-icon {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: rgba(23, 99, 216, .08);
        color: #1763d8;
    }

    .student-sheet-grid.student-all-menu-grid a > span svg,
    .student-sheet-grid.student-all-menu-grid .student-sheet-notification-icon svg {
        width: 22px;
        height: 22px;
        stroke-width: 1.9;
    }

    .student-sheet-grid.student-all-menu-grid a strong {
        color: #20283a;
        font-size: .82rem;
        line-height: 1.18;
        font-weight: 800;
    }
}

@media (max-width: 430px) {
    .student-bottom-nav {
        padding: 9px 8px calc(11px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
    }

    .student-bottom-nav a,
    .student-bottom-nav button {
        min-height: 54px;
        gap: 6px;
    }

    .student-nav-icon {
        width: 22px;
        height: 22px;
    }

    .student-nav-icon svg {
        width: 21px;
        height: 21px;
    }

    .student-bottom-nav small {
        font-size: .68rem;
    }

    .student-more-sheet {
        left: 8px;
        right: 8px;
        bottom: calc(78px + env(safe-area-inset-bottom));
        padding-inline: 12px;
    }

    .student-sheet-grid.student-all-menu-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .student-sheet-grid.student-all-menu-grid a {
        min-height: 96px;
        padding: 12px 6px 10px;
        border-radius: 18px;
    }

    .student-sheet-grid.student-all-menu-grid a strong {
        font-size: .76rem;
    }
}

@media (max-width: 360px) {
    .student-sheet-grid.student-all-menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================
   Digitera V4.12.2 — Menu grid lengkap dipindah ke Beranda siswa
   ========================================================= */
.student-home-menu-section {
    padding: 18px 0 34px;
    background: #f8f9fd;
}
.student-home-menu-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
.student-home-menu-head h2 {
    margin: 5px 0 4px;
    color: #20263a;
    font-size: clamp(1.5rem, 3vw, 2rem);
}
.student-home-menu-head p { margin: 0; }
.student-home-menu-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}
.student-home-menu-item {
    position: relative;
    min-width: 0;
    min-height: 112px;
    padding: 14px 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: center;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 22px;
    background: #fff;
    color: #20283a;
    box-shadow: 0 10px 28px rgba(71,85,105,.07);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.student-home-menu-item:hover,
.student-home-menu-item:focus-visible {
    color: #20283a;
    transform: translateY(-2px);
    border-color: rgba(112,71,235,.26);
    box-shadow: 0 14px 32px rgba(112,71,235,.12);
}
.student-home-menu-item.active { border-color: rgba(112,71,235,.22); }
.student-home-menu-icon {
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #7047eb;
    background: #f0ebff;
}
.student-home-menu-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.student-home-menu-item:nth-child(4n+2) .student-home-menu-icon { color: #1479d7; background: #e9f4ff; }
.student-home-menu-item:nth-child(4n+3) .student-home-menu-icon { color: #0b9b77; background: #e8faf4; }
.student-home-menu-item:nth-child(4n+4) .student-home-menu-icon { color: #d97706; background: #fff4df; }
.student-home-menu-item strong {
    max-width: 100%;
    color: inherit;
    font-size: .83rem;
    line-height: 1.18;
    font-weight: 850;
    overflow-wrap: anywhere;
}
.student-home-menu-badge,
.student-footer-notification-badge {
    position: absolute;
    top: -6px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: .62rem;
    font-weight: 900;
    line-height: 1;
}
.student-home-menu-badge[hidden],
.student-footer-notification-badge[hidden] { display: none !important; }
.student-footer-notification-icon { position: relative; }
.student-home-menu-logout .student-home-menu-icon { color: #dc475b; background: #fff0f2; }

@media (max-width: 1000px) {
    .student-home-menu-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
    .student-home-menu-section {
        padding: 14px 0 26px;
        background: #f7f8fc;
    }
    .student-home-menu-head { margin-bottom: 14px; }
    .student-home-menu-head h2 { font-size: 1.52rem; }
    .student-home-menu-head p { font-size: .82rem; }
    .student-home-menu-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }
    .student-home-menu-item {
        min-height: 102px;
        padding: 12px 5px 10px;
        gap: 8px;
        border-radius: 19px;
        box-shadow: 0 7px 20px rgba(71,85,105,.065);
    }
    .student-home-menu-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }
    .student-home-menu-icon svg { width: 23px; height: 23px; }
    .student-home-menu-item strong { font-size: .76rem; }

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

@media (max-width: 390px) {
    .student-home-menu-grid { gap: 8px; }
    .student-home-menu-item {
        min-height: 94px;
        padding: 10px 4px 9px;
        border-radius: 17px;
    }
    .student-home-menu-icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }
    .student-home-menu-icon svg { width: 21px; height: 21px; }
    .student-home-menu-item strong { font-size: .70rem; }
}

/* =========================================================
   Digitera V4.12.3 — Student class isolation + Android fit
   ========================================================= */
body.role-student {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}
body.role-student .student-app-topbar,
body.role-student .student-app-main,
body.role-student .student-desktop-footer,
body.role-student .student-bottom-nav,
body.role-student .student-app-main > section,
body.role-student .student-app-main > div {
    max-width: 100%;
    min-width: 0;
}
body.role-student .student-app-main,
body.role-student .student-app-main section,
body.role-student .student-app-main article,
body.role-student .student-app-main div,
body.role-student .student-app-main a,
body.role-student .student-app-main form,
body.role-student .student-app-main label {
    box-sizing: border-box;
    min-width: 0;
}
body.role-student .container,
body.role-student .narrow-container {
    width: min(100% - 24px, 1180px) !important;
    max-width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.role-student img,
body.role-student video,
body.role-student iframe,
body.role-student canvas,
body.role-student svg {
    max-width: 100%;
}
body.role-student img,
body.role-student video {
    height: auto;
}
body.role-student iframe {
    width: 100%;
}
body.role-student .student-app-brand,
body.role-student .student-app-brand > span:last-child,
body.role-student .student-page-title,
body.role-student .student-hero-grid > *,
body.role-student .section-head > *,
body.role-student .page-head > *,
body.role-student .resource-card > *,
body.role-student .card > * {
    min-width: 0;
}
body.role-student h1,
body.role-student h2,
body.role-student h3,
body.role-student p,
body.role-student small,
body.role-student strong,
body.role-student .code-pill,
body.role-student .badge,
body.role-student .meta,
body.role-student .muted {
    overflow-wrap: anywhere;
    word-break: normal;
}
body.role-student .actions,
body.role-student .page-head .actions,
body.role-student .section-head,
body.role-student .filter-bar,
body.role-student .form-grid {
    max-width: 100%;
}
body.role-student input,
body.role-student select,
body.role-student textarea,
body.role-student button,
body.role-student .btn {
    max-width: 100%;
}
body.role-student .table-wrap,
body.role-student .code-block,
body.role-student pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 850px) {
    body.role-student .student-app-topbar-inner {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }
    body.role-student .student-app-brand {
        flex: 1 1 auto;
        max-width: calc(100% - 64px);
        overflow: hidden;
    }
    body.role-student .student-app-brand > span:last-child {
        overflow: hidden;
    }
    body.role-student .student-app-brand strong,
    body.role-student .student-app-brand small {
        display: block;
        max-width: 100% !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.role-student .student-app-actions {
        flex: 0 0 auto;
        min-width: 0;
    }
    body.role-student .student-top-code {
        display: none !important;
    }

    body.role-student .student-hero-grid,
    body.role-student .meeting-prejoin-card,
    body.role-student .student-quiz-hero-inner,
    body.role-student .subject-hub-layout,
    body.role-student .assignment-detail-grid,
    body.role-student .form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body.role-student .student-hero .actions {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        width: 100%;
    }
    body.role-student .student-hero .actions .btn {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }
    body.role-student .teacher-public-card {
        width: 100%;
        max-width: 100%;
    }
    body.role-student .teacher-public-card .code-pill.large {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.role-student .simple-stat-strip,
    body.role-student .student-home-menu-grid,
    body.role-student .student-subject-grid,
    body.role-student .quiz-subject-grid,
    body.role-student .student-home-quiz-grid,
    body.role-student .student-quiz-card-grid,
    body.role-student .assignment-public-grid,
    body.role-student .public-video-grid,
    body.role-student .public-post-grid,
    body.role-student .student-meeting-grid,
    body.role-student .subject-material-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    body.role-student .student-home-menu-grid {
        grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    }
    body.role-student .student-home-menu-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    body.role-student .student-home-menu-item strong {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.role-student .student-bottom-nav.student-bottom-nav-simple {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        grid-template-columns: repeat(5,minmax(0,1fr)) !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        border-radius: 20px 20px 0 0 !important;
        overflow: hidden;
    }
    body.role-student .student-bottom-nav a {
        min-width: 0 !important;
        width: 100%;
        padding-left: 1px !important;
        padding-right: 1px !important;
    }
    body.role-student .student-bottom-nav small {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.role-student .section-head,
    body.role-student .page-head {
        flex-wrap: wrap;
        width: 100%;
    }
    body.role-student .section-head > a,
    body.role-student .page-head > a,
    body.role-student .page-head .actions {
        max-width: 100%;
    }
    body.role-student .filter-bar {
        display: grid;
        grid-template-columns: minmax(0,1fr) !important;
    }
    body.role-student .filter-bar > * {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 430px) {
    body.role-student .container,
    body.role-student .narrow-container {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
    }
    body.role-student .student-home-menu-grid {
        gap: 7px !important;
    }
    body.role-student .student-home-menu-item {
        min-height: 88px;
        padding: 9px 3px 8px;
        border-radius: 16px;
    }
    body.role-student .student-home-menu-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
    body.role-student .student-home-menu-icon svg {
        width: 20px;
        height: 20px;
    }
    body.role-student .student-home-menu-item strong {
        font-size: .67rem;
        line-height: 1.1;
    }
    body.role-student .simple-stat-strip {
        gap: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.role-student .simple-stat-item {
        min-width: 0;
        overflow: hidden;
    }
    body.role-student .simple-stat-icon {
        width: 42px;
        height: 42px;
    }
    body.role-student .student-hero .actions {
        grid-template-columns: minmax(0,1fr) !important;
    }
}

/* =========================================================
   Digitera V4.12.6 — Rekap Nilai & Nilai Ulangan Harian
   ========================================================= */
.daily-assessment-toggle {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    padding: 16px 18px;
    border: 1px solid rgba(112,71,235,.16);
    border-radius: 20px;
    background: linear-gradient(135deg,rgba(112,71,235,.08),rgba(112,71,235,.02));
}
.daily-assessment-icon {
    width: 48px;height:48px;display:grid;place-items:center;border-radius:15px;
    color:#7047eb;background:#fff;box-shadow:0 10px 24px rgba(112,71,235,.13);
}
.daily-assessment-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.daily-assessment-copy strong{display:block;color:#2d2147;font-size:.98rem}
.daily-assessment-copy p{margin:4px 0 0;color:#756d83;font-size:.82rem;line-height:1.45}
.daily-assessment-switch{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.daily-assessment-switch input{position:absolute;opacity:0;pointer-events:none}
.daily-assessment-switch span{position:relative;width:48px;height:27px;border-radius:999px;background:#d9d5e3;transition:.18s ease;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.daily-assessment-switch span::after{content:"";position:absolute;top:4px;left:4px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(32,21,59,.24);transition:.18s ease}
.daily-assessment-switch input:checked + span{background:#7047eb}
.daily-assessment-switch input:checked + span::after{transform:translateX(21px)}
.daily-assessment-switch em{min-width:38px;color:#5f5870;font-style:normal;font-size:.78rem;font-weight:900}
.quiz-daily-mini{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#fff4d8;color:#9a6200;font-size:.68rem;font-weight:900}

.daily-grades-page .page-head{align-items:flex-end}
.daily-grade-filter{margin:18px 0 24px}
.daily-grade-filter .form-grid{margin-bottom:10px}
.daily-grade-class-card{margin-top:18px;padding:0;overflow:hidden}
.daily-grade-class-card .section-head{padding:20px 22px 12px;margin:0}
.daily-grade-class-kicker{display:inline-block;margin-bottom:4px;color:#7047eb;font-size:.7rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase}
.daily-grade-class-card h2{margin:0;color:#2e2341}
.daily-grade-table-wrap{border:0;border-radius:0}
.daily-grade-table{min-width:820px}
.daily-grade-table th{vertical-align:bottom;white-space:normal}
.daily-grade-table th span{display:block;min-width:120px;max-width:190px;font-weight:900;line-height:1.25}
.daily-grade-table th small{display:block;margin-top:4px;color:#8b8497;font-weight:700;line-height:1.2}
.daily-grade-table .daily-no{width:54px;min-width:54px}
.daily-grade-table .daily-student{position:sticky;left:0;z-index:2;min-width:180px;background:#faf9fc}
.daily-grade-table tbody .daily-student,.daily-grade-table tbody td:nth-child(2){position:sticky;left:0;z-index:1;background:#fff}
.daily-score-cell{display:flex;min-width:82px;flex-direction:column;gap:2px;text-decoration:none}
.daily-score-cell strong{font-size:1rem}
.daily-score-cell small{color:#9990a5;font-size:.62rem;white-space:nowrap}
.daily-score-cell.is-pass strong{color:#13815c}
.daily-score-cell.is-low strong{color:#c0444d}
.daily-score-empty{color:#bbb4c5;font-weight:800}

.analytics-filter-v4126{display:grid;grid-template-columns:minmax(210px,1fr) minmax(210px,1fr) auto;align-items:end;gap:14px}
.analytics-filter-v4126>div>label{display:block;margin-bottom:6px;font-size:.78rem;font-weight:850;color:#5f5870}
.all-grade-results{margin-top:28px}
.grade-class-group{margin-top:16px;padding:0;overflow:hidden}
.grade-class-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid rgba(112,71,235,.09);background:linear-gradient(135deg,rgba(112,71,235,.065),transparent)}
.grade-class-head span{display:block;color:#7047eb;font-size:.66rem;font-weight:950;letter-spacing:.12em}
.grade-class-head h3{margin:2px 0 0;color:#2f2542;font-size:1.18rem}
.grade-class-head b{padding:6px 10px;border-radius:999px;background:#fff;color:#6d6478;font-size:.73rem;box-shadow:0 5px 16px rgba(42,25,88,.08)}
.all-grade-table td:nth-child(2) strong{white-space:nowrap}

@media (max-width:850px){
    .daily-assessment-toggle{grid-template-columns:44px minmax(0,1fr);padding:14px;gap:11px}
    .daily-assessment-icon{width:42px;height:42px;border-radius:13px}
    .daily-assessment-switch{grid-column:1/-1;justify-self:stretch;justify-content:flex-end;padding-top:3px}
    .daily-grade-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .analytics-filter-v4126{grid-template-columns:1fr}
    .analytics-filter-v4126 .actions{width:100%}
    .analytics-filter-v4126 .actions .btn{flex:1}
    .daily-grades-page .page-head{align-items:flex-start}
    .daily-grades-page .page-head .actions{width:100%}
    .daily-grades-page .page-head .actions .btn{flex:1}
}

/* V4.14.3 - Jenis kelamin siswa untuk Buat Kelompok Random */
.attendance-gender-badge{display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:4px 7px;border-radius:999px;font-size:.72rem;font-weight:900;line-height:1.1}
.attendance-gender-badge.male{background:#eaf2ff;color:#1d4ed8}
.attendance-gender-badge.female{background:#fce7f3;color:#be185d}
.attendance-gender-badge.unknown{background:#f2f4f7;color:#667085}
.attendance-inline-student-form-gender{grid-template-columns:minmax(180px,1.4fr) minmax(130px,.8fr) minmax(130px,.8fr) auto!important}
.attendance-student-edit-form select{width:100%;border:1px solid var(--border,#d8dce6);border-radius:10px;padding:8px 10px;background:#fff;color:#172033;font:inherit}
@media(max-width:760px){.attendance-inline-student-form-gender{grid-template-columns:1fr!important}}

/* Digitera V4.17.3 — Ulangan Harian PG + Isian Singkat + Uraian */
.daily-test-settings-card{max-width:980px;margin:0 auto;padding:24px}.daily-score-policy{margin:18px 0;padding:18px;border:1px solid rgba(109,82,224,.2);border-radius:18px;background:linear-gradient(135deg,rgba(109,82,224,.08),rgba(43,191,176,.08))}.daily-score-policy-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}.daily-score-policy-head>span{font-size:28px}.daily-score-policy-head strong{display:block;font-size:17px}.daily-score-policy-head p{margin:3px 0 0;color:var(--muted);font-size:12px}.form-grid-four{grid-template-columns:repeat(4,minmax(0,1fr))}.form-grid-four label{display:grid;gap:6px;font-weight:800;font-size:12px}.form-grid-four small{color:var(--muted);font-weight:600}.daily-test-card .daily-policy-inline{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.daily-policy-inline span{padding:6px 9px;border-radius:999px;background:rgba(108,78,219,.08);border:1px solid rgba(108,78,219,.13);font-size:10px}.daily-pending-mini{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;background:#fff1c7;color:#805d00;font-size:9px;font-weight:900}.daily-response-badge{margin-left:5px;background:#e9f6ff!important;color:#155e84!important}.btn-warning{background:linear-gradient(135deg,#ffb62d,#f08b20)!important;color:#fff!important;border-color:transparent!important}
.daily-question-editor{padding:22px}.daily-question-type-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.daily-type-card{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:15px;border:2px solid #e6e2f3;border-radius:16px;background:#fff;cursor:pointer;transition:.18s}.daily-type-card input{position:absolute;opacity:0}.daily-type-card>span{grid-row:1/3;font-size:28px}.daily-type-card strong{font-size:14px}.daily-type-card small{color:#7c768b;font-size:10px}.daily-type-card:has(input:checked),.daily-type-card.active{border-color:#7b5ee7;background:linear-gradient(135deg,#f4f0ff,#effbf9);box-shadow:0 8px 24px rgba(95,69,189,.12)}.daily-choice-editor,.daily-manual-editor,.daily-question-score{margin-top:18px;padding:18px;border-radius:18px;background:#faf9ff;border:1px solid #ebe7f7}.daily-option-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.daily-option-row{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;padding:9px;border:1px solid #e6e2ef;border-radius:13px;background:#fff}.daily-option-row>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#6c52dc;color:#fff;font-weight:900}.daily-option-row input[type=text],.daily-option-row input:not([type]){width:100%}.daily-manual-note{display:flex;gap:12px;padding:13px;border-radius:14px;background:#fff7da;border:1px solid #f3d786;margin-bottom:14px}.daily-manual-note>span{font-size:26px}.daily-manual-note strong{display:block}.daily-manual-note p{margin:4px 0 0;font-size:12px;color:#725d20}.daily-question-current-image{margin-top:10px;display:flex;align-items:center;gap:12px}.daily-question-current-image img{max-width:180px;max-height:120px;border-radius:12px}.daily-question-score>div:first-child{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.daily-question-score small{color:var(--muted)}
.daily-grading-student{margin-bottom:18px;overflow:hidden}.daily-grading-student.is-pending{border-color:#f0c66f}.daily-grading-student-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding-bottom:15px;border-bottom:1px solid #ece8f4}.daily-grading-student-head h2{margin:8px 0 2px}.daily-grading-score{text-align:right}.daily-grading-score small,.daily-grading-score span{display:block;color:var(--muted);font-size:10px}.daily-grading-score strong{display:block;font-size:28px;color:#5a42c5}.daily-manual-answer-list{display:grid;gap:14px;margin-top:15px}.daily-manual-answer{padding:16px;border:1px solid #e7e2f2;border-radius:16px;background:#fcfbff}.daily-manual-answer-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.daily-manual-answer-head>span{font-size:21px}.daily-manual-answer-head small{color:#716a82}.manual-status{margin-left:auto;padding:5px 8px;border-radius:999px;font-size:10px;background:#eee}.manual-status.status-benar{background:#dff8e8;color:#146b36}.manual-status.status-setengah{background:#fff1c7;color:#795700}.manual-status.status-salah{background:#ffe1e1;color:#9b2525}.manual-status.status-belum-dikoreksi{background:#eee9ff;color:#583ca8}.daily-student-answer,.daily-answer-guide{margin-top:12px;padding:13px;border-radius:13px}.daily-student-answer{background:#f2f8ff;border:1px solid #d9ebfb}.daily-answer-guide{background:#f7f3ff;border:1px solid #e7dcff}.daily-student-answer span,.daily-answer-guide span{display:block;font-size:10px;font-weight:900;color:#6d5ba1;text-transform:uppercase;letter-spacing:.05em}.daily-student-answer p,.daily-answer-guide p{margin:5px 0 0;line-height:1.55}.daily-answer-score-info{margin:12px 0;font-size:11px;color:#777}.daily-grade-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.daily-grade-buttons button{border:0;border-radius:12px;padding:11px;font-weight:900;cursor:pointer;color:#fff}.grade-correct{background:#20a660}.grade-half{background:#e6a313}.grade-wrong{background:#df4b55}.daily-score-cell.is-pending{background:#fff8df;border-color:#f1d27c;color:#7b5c00}.daily-pending-value{color:#8a6500}.daily-result-pending{display:flex;gap:14px;align-items:flex-start;padding:18px;margin:18px 0;border-radius:16px;background:linear-gradient(135deg,#fff8df,#f7f1ff);border:1px solid #edd287;text-align:left}.daily-result-pending>span{font-size:32px}.daily-result-pending strong{display:block;font-size:16px}.daily-result-pending p{margin:5px 0 0;color:#6f6680;line-height:1.5}.daily-result-pending.compact{max-width:620px;margin:15px auto}
.daily-student-manual-note{display:flex;gap:11px;align-items:flex-start;padding:13px;margin-bottom:14px;border-radius:14px;background:linear-gradient(135deg,#fff7dc,#f1edff);border:1px solid #edd692}.daily-student-manual-note>span{font-size:25px}.daily-student-manual-note strong{display:block}.daily-student-manual-note small{display:block;margin-top:3px;color:#776a5a}.daily-student-answer-wrap{display:grid;gap:7px}.daily-student-text-answer{width:100%;min-height:56px;padding:15px;border:2px solid #dcd6ef;border-radius:14px;background:#fff;font:inherit;font-size:16px;outline:0}.daily-student-text-answer:focus{border-color:#7056df;box-shadow:0 0 0 4px rgba(112,86,223,.1)}textarea.daily-student-text-answer{resize:vertical;line-height:1.6}.daily-student-answer-wrap>small{color:#8b8399}
@media(max-width:780px){.form-grid-four{grid-template-columns:1fr 1fr}.daily-question-type-tabs{grid-template-columns:1fr}.daily-option-grid{grid-template-columns:1fr}.daily-grading-student-head{flex-direction:column}.daily-grading-score{text-align:left}.daily-grade-buttons{grid-template-columns:1fr}.daily-question-score>div:first-child{display:block}}
@media(max-width:480px){.form-grid-four{grid-template-columns:1fr}.daily-test-settings-card,.daily-question-editor{padding:15px}}

/* Digitera V4.17.4 — AI Ulangan Harian */
.daily-ai-page .user-guide-ai{margin-bottom:18px}
.daily-ai-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 18px}
.daily-ai-counts label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border-radius:16px;border:1px solid rgba(109,87,255,.18);background:linear-gradient(135deg,rgba(109,87,255,.08),rgba(23,199,196,.05));font-weight:800}
.daily-ai-counts input{width:88px;text-align:center;font-weight:900}
.daily-ai-weight-preview{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:12px 0 18px;padding:12px 14px;border-radius:14px;background:rgba(109,87,255,.07);border:1px solid rgba(109,87,255,.14)}
.daily-ai-weight-preview span{font-weight:700;color:var(--muted)}
.daily-ai-weight-preview b{padding:6px 9px;border-radius:999px;background:var(--card);border:1px solid var(--border)}
.daily-ai-preview-list .daily-ai-edit-card{border-left:4px solid rgba(109,87,255,.7)}
.daily-ai-options{display:grid;gap:8px;margin:12px 0}
.daily-ai-options>label:first-child{font-weight:800}
.daily-ai-builder-btn{box-shadow:0 10px 22px rgba(109,87,255,.16)}
@media(max-width:760px){.daily-ai-counts{grid-template-columns:1fr}.daily-ai-counts label{padding:12px}.daily-ai-counts input{width:100px}}

/* V4.17.6 student account center */
.teacher-student-center-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}.student-credential-result{margin-bottom:18px;border:1px solid rgba(113,83,236,.25);background:linear-gradient(135deg,rgba(116,76,235,.09),rgba(38,170,220,.06))}.student-action-pop{position:absolute;right:0;z-index:25;width:min(360px,90vw);padding:14px;border-radius:16px;background:var(--surface,#fff);box-shadow:0 22px 60px rgba(24,20,55,.22);border:1px solid rgba(110,94,180,.15)}.student-action-pop form{display:grid;gap:8px}.student-action-pop form+form{margin-top:10px;padding-top:10px;border-top:1px solid rgba(120,120,150,.12)}.teacher-student-center-page details{position:relative}.teacher-student-center-page code{font-weight:800}.student-login-identity{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.12)}@media(max-width:800px){.teacher-student-center-grid{grid-template-columns:1fr}.student-action-pop{position:fixed;left:5vw;right:5vw;bottom:18px;width:90vw;max-height:70vh;overflow:auto}}