/**** styles.css - Mojo ID (loads after core.css; same layer order, see C-26) ****/
@font-face{font-family:'Dana';src:url('../fonts/Dana-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Dana';src:url('../fonts/Dana-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Dana';src:url('../fonts/Dana-DemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Dana';src:url('../fonts/Dana-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@layer base {
    /**** Palette ****/
    :root {
        color-scheme: light dark;
        --bg: light-dark(#F8F7FA, #171322);
        --text: light-dark(#453F55, #CFC9DD);
        --heading: light-dark(#1C1730, #F3F1F8);
        --sub: light-dark(#7E7791, #9C94B3);
        --desc: light-dark(#7E7791, #9C94B3);
        --gray: light-dark(#7E7791, #9C94B3);
        --primary: light-dark(#4C2795, #7B5BC0);
        --link: light-dark(#4C2795, #B3A0DE);
        --box: light-dark(#FFFFFF, #2A2340);
        --box-bg: light-dark(#FFFFFF, #211B31);
        --box-muted: light-dark(#F1EFF5, #2C2640);
        --box-selected: light-dark(#EAE4F6, #3A2E63);
        --box-tint: light-dark(#F5F2FB, #261F3B);
        --selected: light-dark(#3E1F7C, #D5C9ED);
        --overlay: light-dark(rgba(28, 23, 48, .5), rgba(10, 8, 18, .65));
        --border: light-dark(#D4D0DE, #4A4066);
        --border-soft: light-dark(#E5E2EB, #332C48);
        --border-selected: light-dark(#8A6BC9, #B3A0DE);
        --focus: light-dark(rgba(76, 39, 149, .35), rgba(179, 160, 222, .45));
        --done: light-dark(#2E9E5B, #66C592);
        --done-bg: light-dark(#E3F5EA, #1E3F2B);
        --done-fg: light-dark(#1F7A43, #8FD9B0);
        --warn: light-dark(#F0A31C, #F0B95A);
        --warn-bg: light-dark(#FCF1DB, #3D2F14);
        --warn-fg: light-dark(#8F5F0C, #F0C070);
        --error: light-dark(#D23B3B, #F08585);
        --error-bg: light-dark(#FBE7E7, #411D1D);
        --error-fg: light-dark(#B32F2F, #F49B9B);
        --info: light-dark(#2B6CB0, #7FB3E8);
        --info-bg: light-dark(#E4EEF8, #16304A);
        --info-fg: light-dark(#245C96, #9CC5F0);
        --pending: light-dark(#6E6398, #A99FC6);
        --pending-bg: light-dark(#F1EFF5, #2E2846);
        --pending-fg: light-dark(#5C5480, #B8AFD6);
        --tier-plus: light-dark(#4C2795, #C9B8F0);
        --tier-plus-bg: light-dark(#EAE4F6, #342A52);
        --tier-elite: light-dark(#FFFFFF, #EAE4F6);
        --tier-elite-bg: light-dark(#331A66, #3E1F7C);
        --verify-none: light-dark(#5C556E, #9C94B3);
        --verify-none-bg: light-dark(#F1EFF5, #251F38);
        --verify-silver: light-dark(#5F6774, #A8B0BE);
        --verify-silver-bg: light-dark(#EFF1F4, #2A2D35);
        --verify-gold: light-dark(#8F5F0C, #E8B54A);
        --verify-gold-bg: light-dark(#FCF3E0, #3B2E12);
        --shadow: light-dark(rgba(28, 23, 48, .12), rgba(0, 0, 0, .4));
        --shadow-sm: 0 1px 3px rgba(28, 23, 48, .07), 0 1px 2px rgba(28, 23, 48, .04);
        --shadow-md: 0 4px 12px rgba(28, 23, 48, .08);
        --shadow-lg: 0 12px 32px rgba(28, 23, 48, .12);
        --radius: 10px;
        --radius-lg: 14px
    }
    [data-theme="light"] { color-scheme: light }
    [data-theme="dark"] { color-scheme: dark }
    @media (prefers-contrast: more) {
        :root {
            --sub: var(--text);
            --desc: var(--text);
            --gray: var(--text);
            --border: light-dark(#7E7791, #9C94B3);
            --border-soft: light-dark(#A9A3B8, #5C556E)
        }
    }
    /**** Main tags ****/
    body { line-height: 1.7 }
    h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1, .title, label, .label { color: var(--heading) }
    a, .link { --text: var(--link) }
    button, input, select, textarea { font-family: inherit }
    hgroup > :last-child { margin-bottom: 0 }
    b, strong { color: var(--heading) }
    /**** Skip link ****/
    .sr:focus { position: fixed; top: 8px; right: 8px; z-index: 300; width: auto; height: auto; margin: 0; padding: 8px 14px; overflow: visible; clip: auto; background: var(--box); border-radius: var(--radius); box-shadow: var(--shadow-md) }
    /**** Header ****/
    #header { display: flex; align-items: center; gap: 12px; min-height: 56px; }
    #header .brand { margin-inline-end: auto }
    #header .tap { font-size: 13px; white-space: nowrap }
    /**** Main ****/
    #page { padding: 8px 0 48px }
    /**** Brand ****/
    .brand { display: inline-flex; align-items: center; gap: 8px }
    .brand .icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--primary); color: var(--white) }
    .brand .title { margin: 0; font-size: 16px; direction: ltr; letter-spacing: -.01em }
    .brand .title b { color: var(--primary) }
    /**** Tap target ****/
    .tap { display: inline-flex; align-items: center; gap: 4px; min-height: 44px }
    /**** Box ****/
    .box { display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 4vw, 32px) clamp(16px, 4vw, 28px); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm) }
    .box > * { margin: 0 }
    .box.narrow { width: 100%; max-width: 440px; margin-inline: auto }
    .box.locked::before { border-radius: inherit }
    /**** Chip ****/
    .chip { display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 5px 14px 5px 6px; border: 1px solid var(--border-soft); border-radius: 999px; font-size: 13px }
    .chip img { flex: none; width: 24px; height: 24px; object-fit: contain; border-radius: 50%; background: var(--box-bg) }
    .chip.tint { background: var(--box-tint) }
    /**** Form ****/
    .formGroup { margin-bottom: 15px }
    .formControl.large { min-height: 48px }
    .otp { display: flex; justify-content: center; gap: clamp(6px, 2vw, 10px); direction: ltr }
    .otp input { flex: 1; min-width: 0; max-width: 56px; height: 56px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--box-bg); color: var(--heading); font-size: 22px; font-weight: 600; text-align: center; outline: none }
    .otp input:focus { border-color: var(--border-selected); box-shadow: 0 0 0 3px var(--focus) }
    .otp.error input { border-color: var(--error) }
    .formGroup .hint { display: block; margin-top: 6px; font-size: 12px; color: var(--desc) }
    .formGroup .hint.error { color: var(--error) }
    /**** Button ****/
    .btn { font-weight: 600 }
    .btn.large { min-height: 48px; font-size: 16px }
    .btn.square { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0 }
    /**** Theme icons ****/
    [data-theme="light"] .sun, [data-theme="dark"] .moon { display: none }
    /**** Note ****/
    .note { --text: var(--desc); font-size: 12px; line-height: 1.9 }


    .reveal{min-width:64px;justify-content:center}
    .reveal::after{content:"Show"}
    .reveal.show::after{content:"Hide"}


    .price span {
        margin-right: 5px;
        font-size: 11px;
    }

    /**** Footer ****/
    #footer > .container { max-width: 1170px }
    #footer { padding: 48px 0 24px; background: var(--box-bg); border-top: 1px solid var(--border-soft) }
    #footer .row > [class*="col-"] { margin-bottom: 0 }
    #footer h2 { margin: 0 0 8px; font-size: 13px; font-weight: 600 }
    #footer .brand + p { margin: 10px 0 0 }
    #footer .links { margin: 0; padding: 0; list-style: none }
    #footer .links a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: 13px; text-decoration: none }
    #footer .links a:hover { color: var(--primary) }
    #footer .bottom { --text: var(--desc); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border-soft); font-size: 12px }


}