/* Généré depuis resources/assets/css/okaria-da.css — ne pas éditer ici. */










@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap");



:root {
    



















    --bg:            #0C1822;
    --bg-deep:       #09131B;   
    --card:          #10212E;   
    --card-active:   #0A1925;
    --surface:       #0B1D2A;   
    --secondary-hi:  #437388;   
    --primary:       #A2DBE6;   
    --primary-fg:    #102B36;   
    --accent:        #C7EDF6;   
    --secondary:     #224053;   
    --blue:          #A2DBE6;
    --blue-light:    #C7EDF6;
    --green-light:   #9FD6BA;   
    --text:          #E0EDF2;
    --text-muted:    #A6BBC7;
    --text-dim:      #8DA6B4;
    --text-off:      #9AAFBB;   
    --danger:        #E58C8C;
    

    --warning:       #EFA632;
    --gold:          #F1C388;   
    --discord:       #8F9DF0;

    


    --primary-rgb:      162, 219, 230;
    --accent-rgb:       199, 237, 246;
    --secondary-rgb:    34, 64, 83;
    --blue-rgb:         162, 219, 230;
    --blue-light-rgb:   199, 237, 246;
    --green-light-rgb:  159, 214, 186;
    --muted-rgb:        113, 140, 153;
    --danger-rgb:       229, 140, 140;
    --warning-rgb:      239, 166, 50;
    --gold-rgb:         241, 195, 136;
    --discord-rgb:      143, 157, 240;
    --bg-rgb:           12, 24, 34;
    --card-rgb:         16, 33, 46;
    --glow-rgb:         146, 217, 238;

    
    --glass:          rgba(var(--card-rgb), .80);
    --glass-strong:   rgba(var(--card-rgb), .90);
    --glass-blur:     18px;
    


    --veil:           rgba(0, 0, 0, .24);
    --row:            rgba(10, 25, 37, .55);
    --row-hover:      rgba(40, 65, 82, .72);
    --row-selected:   rgba(51, 86, 107, .82);
    --field:          rgba(11, 29, 42, .88);
    --field-border:   rgba(117, 143, 157, .41);
    --field-focus:    rgba(166, 213, 230, .88);
    --btn-bg:         linear-gradient(#284659, #1D3B4E);
    --btn-border:     rgba(124, 171, 185, .55);
    --btn-hi-bg:      linear-gradient(#49798E, #3E6E83);
    --btn-hi-border:  rgba(199, 237, 246, .93);
    --tab-bg:         linear-gradient(rgba(40, 70, 89, .72), rgba(29, 59, 78, .72));
    --bar-bg:         rgba(var(--card-rgb), .50);   
    --pill-live:      rgba(38, 91, 84, .85);         
    --btn-top-bg:     linear-gradient(#5689A0, #467A90);   
    --btn-off-bg:     rgba(24, 43, 57, .82);                
    --btn-off-border: rgba(96, 121, 134, .32);              
    --btn-off-text:   #82949F;
    --title-halo:     0 0 14px rgba(0, 0, 0, .4), 0 0 34px rgba(0, 0, 0, .25);
    --heading-halo:   0 0 10px rgba(0, 0, 0, .45), 0 0 26px rgba(0, 0, 0, .3);
    --shadow-btn:     0 8px 18px rgba(3, 10, 16, .22);
    --shadow-btn-top: 0 10px 22px rgba(3, 10, 16, .3);

    --border:        rgba(var(--muted-rgb), .42);
    --border-strong: rgba(var(--muted-rgb), .62);
    --radius:        16px;      
    --radius-sm:     11px;      
    --radius-xs:     8px;       
    --shadow-cold:   0 18px 44px rgba(3, 10, 16, .32);
    --shadow-modal:  0 32px 80px rgba(0, 0, 0, .50);
    --glow-primary:  0 0 0 6px rgba(var(--glow-rgb), .07), 0 0 26px rgba(var(--glow-rgb), .28);
    --font-title:    'Outfit', 'Nunito', sans-serif;
    --font-body:     'Nunito', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:     ui-monospace, SFMono-Regular, Menlo, monospace;
    --ease:          cubic-bezier(.4, 0, .2, 1);
}










html {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
}



body {
    background: transparent;
    color: var(--text);
    

    font-family: var(--font-body) !important;
}



.absbg { display: none !important; }




body .body { background: transparent; }





































.page-bg {
    position: fixed;
    inset: 0;
    

    overflow: hidden;
    







    z-index: -1;
    pointer-events: none;
}
.page-bg-shot,
.page-bg-veil,
.page-bg-glow { position: absolute; }






.page-bg-shot {
    inset: 0;
    background: var(--bg) url('/img/okaria/fond-flou.webp') center 40% / cover no-repeat;
}






.page-bg-veil {
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--bg-rgb), .38) 0%, rgba(var(--bg-rgb), .58) 55%, rgba(var(--bg-rgb), .82) 100%);
}



.page-bg-glow { display: none; }





h1, h2, h3, h4, h5,
.ui.header,
.ui.header .content {
    font-family: var(--font-title);
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0;
}
.ui.header .sub.header {
    font-family: var(--font-body);
    color: var(--text-muted);
    letter-spacing: 0;
}
p, li, td, label, .ui.form label { color: var(--text-muted); }





button, a:not(.fa):not(i) { font-family: inherit; }
.ui.grid, .ui.steps, .ui.message, .ui.card, .ui.cards, .shop-card, .card, p, span, small { font-family: inherit; }
.ui.header, .title { font-family: var(--font-title); }
a { color: var(--primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }
code, pre, .ip, .mono { font-family: var(--font-mono); }

.ui.container.body-content {
    background: transparent;
    border: 0 !important;
}
.ui.divider, .ui.clearing.divider {
    border-top: 1px solid var(--border);
    border-bottom: 0;
}











.ui.horizontal.divider { border-top: 0; }
.ui.horizontal.divider::before,
.ui.horizontal.divider::after {
    background-image: linear-gradient(var(--border), var(--border));
    background-size: calc(100% - 1em) 1px;
}
.ui.horizontal.divider:not(.header) {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--text-muted);
}




.section-label {
    display: inline-block;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .035em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-shadow: var(--heading-halo);
    margin: 0 0 12px 6px;
}







.ui.button {
    
    font-family: 'Outfit', 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .035em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    box-shadow: var(--shadow-btn);
    transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.ui.button:hover,
.ui.button:focus {
    background: var(--btn-hi-bg);
    border-color: var(--btn-hi-border);
    color: var(--text);
    box-shadow: 0 0 18px rgba(var(--glow-rgb), .22), var(--shadow-btn);
    transform: translateY(-1px) scale(1.035);
}





.ui.primary.button,
.ui.orange.button,
.ui.green.button,
.ui.teal.button,
.ui.okaria.button {
    background: var(--btn-hi-bg);
    border-color: var(--btn-hi-border);
    color: var(--text);
    box-shadow: var(--glow-primary), var(--shadow-btn-top);
}
.ui.primary.button:hover,
.ui.orange.button:hover,
.ui.green.button:hover,
.ui.teal.button:hover,
.ui.okaria.button:hover {
    background: var(--btn-top-bg);
    border-color: var(--btn-hi-border);
    color: var(--text);
}

.ui.basic.button,
.ui.secondary.button {
    background: rgba(var(--card-rgb), .55) !important;
    border: 1.5px solid var(--btn-border);
    

    color: var(--text) !important;
    box-shadow: none !important;
}
.ui.basic.button:hover,
.ui.secondary.button:hover {
    background: var(--btn-hi-bg) !important;
    border-color: var(--btn-hi-border);
    color: var(--text) !important;
}


.ui.blue.button,
.ui.yellow.button,
.ui.olive.button,
.ui.violet.button,
.ui.purple.button,
.ui.pink.button,
.ui.brown.button,
.ui.grey.button,
.ui.black.button { background: var(--btn-bg); color: var(--text); border-color: var(--btn-border); }
.ui.blue.button:hover,
.ui.yellow.button:hover,
.ui.olive.button:hover,
.ui.violet.button:hover,
.ui.purple.button:hover,
.ui.pink.button:hover,
.ui.brown.button:hover,
.ui.grey.button:hover,
.ui.black.button:hover { background: var(--btn-hi-bg); color: var(--text); border-color: var(--btn-hi-border); }

.ui.red.button {
    background: rgba(var(--danger-rgb), .12);
    border: 1.5px solid rgba(var(--danger-rgb), .55);
    color: var(--danger);
}
.ui.red.button:hover { background: rgba(var(--danger-rgb), .22); border-color: var(--danger); color: var(--text); }

.ui.button.disabled,
.ui.disabled.button {
    background: var(--btn-off-bg) !important;
    border: 1.5px solid var(--btn-off-border) !important;
    color: var(--btn-off-text) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
}
.ui.bottom.attached.button { border-radius: 0 0 var(--radius) var(--radius); }


.btn-breathe { animation: breathe 2.8s ease-in-out infinite; }



.ui.button.is-loading { pointer-events: none; }
.ui.button.is-loading::before {
    content: "";
    display: inline-block;
    width: 13px; height: 13px;
    margin-right: 9px;
    vertical-align: -2px;
    border: 2px solid rgba(var(--bg-rgb), .3);
    border-top-color: var(--primary-fg);
    border-radius: 50%;
    animation: zm-spin .8s linear infinite;
}

.login-button,
.register-button {
    display: inline-block;
    padding: 4px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: .04em;
    transition: background .2s, border-color .2s, color .2s;
}





#loginBar .right.menu > .hide-on-small-only {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 !important;
}


.register-button { border: 1px solid transparent; }





#loginBar .right.menu .ui.menu {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 0;
    margin: 0;
}
































#loginBar #popupMember {
    display: flex;
    align-items: center;
    gap: 10px;
    

    width: auto !important;
    padding: 4px 12px !important;
    







    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    transition: background .2s;
}
#loginBar #popupMember:hover { background: rgba(var(--primary-rgb), .08) !important; }
#loginBar #popupMember .site-header-user-profile-picture {
    



    position: static;
    transform: none;
    left: auto;
    flex-shrink: 0;
    





    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    


    border-radius: 5px;
    object-fit: cover;
}
#loginBar #usernameHeader {
    font-size: 14.5px !important;
    font-weight: 600;
    margin: 0 !important;
    line-height: 1;
    



    white-space: nowrap;
}

.login-button { border: 1px solid var(--border-strong); color: var(--text-muted); }
.login-button:hover { border-color: var(--primary); color: var(--primary); }
.register-button { background: var(--primary); color: var(--primary-fg); font-weight: 700; }
.register-button:hover { background: var(--accent); color: var(--primary-fg); }










#loginBar .register-button,
#loginBar .register-button:hover { color: var(--primary-fg); }

























#loginBar .acct-menu {
    --acct-inset:  14px;   
    --acct-gutter: 22px;   
    --acct-gap:    12px;   
    --acct-row:    34px;   

    










    width: auto !important;
    min-width: 232px;

    


    padding: 6px 0;
}














#loginBar .acct-menu .acct-item {
    display: grid;
    grid-template-columns: var(--acct-gutter) minmax(0, 1fr) auto;
    column-gap: var(--acct-gap);
    align-items: center;
    box-sizing: border-box;
    min-height: var(--acct-row);
    padding: 0 var(--acct-inset);
    margin: 0;
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.25;
    color: var(--text);
    





    transition: background-color .18s var(--ease), color .18s var(--ease);
}


































#loginBar .acct-menu .acct-item:hover,
#loginBar .acct-menu .acct-item:focus-visible {
    background: rgba(var(--primary-rgb), .12);
}







#loginBar .acct-menu .acct-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

















#loginBar .acct-menu .acct-item.is-logout:hover,
#loginBar .acct-menu .acct-item.is-logout:focus-visible {
    background: rgba(var(--danger-rgb), .12);
    color: var(--text);
}
#loginBar .acct-menu .acct-item.is-logout:hover .acct-ico,
#loginBar .acct-menu .acct-item.is-logout:focus-visible .acct-ico {
    color: var(--danger);
}
#loginBar .acct-menu .acct-item.is-logout:focus-visible {
    outline-color: var(--danger);
}




#loginBar .acct-menu .acct-ico {
    width: var(--acct-gutter);
    height: 1em;
    margin: 0;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    opacity: 1;
    color: inherit;
}

#loginBar .acct-menu .acct-label {
    min-width: 0;
    

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}






#loginBar .acct-menu .acct-count { font-size: 11px; }









#loginBar .acct-menu .acct-item.is-logout { color: var(--danger); }








html, body { height: auto; min-height: 100%; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
}




.okh {
    background: var(--bar-bg);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid rgba(var(--muted-rgb), .22);
    transition: background .3s var(--ease);
}
.okh.is-scrolled { background: rgba(var(--bg-rgb), .86); }
.okh-row {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1320px;
    height: 76px;
    margin: 0 auto;
    padding: 0 32px;
}
.okh-brand { flex: none; display: block; }
.okh-brand img { display: block; height: 42px; width: auto; }







.okh-tabs {
    display: flex;
    flex: none;
    gap: 6px;
}
.okh-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 40px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1.5px solid var(--btn-border);
    background: var(--tab-bg);
    font-family: var(--font-title);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text);
    transition: background .18s, border-color .18s;
}
.okh-tab:hover { background: var(--btn-hi-bg); border-color: var(--btn-hi-border); color: var(--text); }
.okh-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.okh-tab.is-current::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 6px;
    height: 3px;
    border-radius: 2px;
    background: var(--primary);
}


.okh-right,
#loginBar.okh-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; background: transparent; }


.okh-online {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--row);
    border: 1px solid rgba(var(--muted-rgb), .3);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.okh-online .player-number { color: var(--text) !important; font-weight: 800; }
.okh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green-light);
    box-shadow: 0 0 8px var(--green-light);
}

.okh-auth, .okh-account { display: flex; align-items: center; gap: 10px; }
.okh-auth .ui.button {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0 16px;
    font-size: 13.5px;
}




.okh-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 14px 0 6px;
    border-radius: 999px;
    border: 1.5px solid var(--btn-border);
    background: var(--tab-bg);
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    transition: border-color .18s;
}
.okh-chip:hover { border-color: var(--btn-hi-border); color: var(--text); }
.okh-money { padding-left: 8px; color: var(--gold); }
.okh-money:hover { color: var(--gold); }
.okh-money img { width: 26px; height: 26px; }
#loginBar #popupMember.okh-chip {
    height: 40px;
    font-family: var(--font-body) !important;   
    padding: 0 14px 0 6px !important;
    border-radius: 999px !important;
    background: var(--tab-bg) !important;
}
#loginBar #popupMember.okh-chip:hover { background: var(--btn-hi-bg) !important; }
#loginBar #popupMember.okh-chip .site-header-user-profile-picture {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px;
    image-rendering: pixelated;
}





@media (max-width: 1400px) { .okh-online-label { display: none; } }
@media (max-width: 1240px) { .okh-online { display: none; } .okh-row { padding: 0 24px; } }
@media (max-width: 1180px) {
    .okh-row { gap: 12px; }
    .okh-brand img { height: 36px; }
    .okh-tabs { gap: 4px; }
    .okh-tab { padding: 0 10px; font-size: 12.5px; letter-spacing: .02em; }
    .okh-chip, .okh-auth .ui.button { font-size: 13px; }
}





@media (max-width: 1080px) {
    .site-header .okh { display: none !important; }
    .site-header .show-on-small-only { display: revert !important; }
}





.conn-line { display: flex; align-items: center; }
.conn-icon {
    flex-shrink: 0;
    width: 11px;
    height: 12px;
    


    color: var(--primary);
}
.conn-count { margin-left: 8px; }
.player-number { color: var(--primary) !important; }
.player-number.text { color: var(--text-muted) !important; }


.status-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green-light);
    flex-shrink: 0;
    animation: pulse-dot 2s ease-in-out infinite;
}


.menu-head.ui.inverted.menu { background: var(--bg-deep); border-radius: 0; }
.menu-head .item { min-height: 44px; color: var(--text-muted) !important; font-weight: 600; }
.menu-head .item:hover { background: rgba(var(--primary-rgb), .08) !important; color: var(--primary) !important; }
.okh-mlogo { height: 34px !important; width: auto !important; }








.okx-glass {
    background: var(--glass);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
    box-shadow: var(--shadow-cold);
}
.okx-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }



.okx-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-family: var(--font-title);
    font-size: 38px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--text);
    text-shadow: var(--title-halo);
}
.okx-title img { width: 48px; height: 48px; }


.ui.button.okx-btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 58px;
    margin: 0;
    padding: 0 26px;
    border-radius: 13px;
    font-size: 17px;
}
.ui.button.okx-btn-lg img { width: 34px; height: 34px; }
.ui.button.okx-block { display: flex; width: 100%; }



.okx-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), .2);
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.okx-tag.is-xs { height: 21px; padding: 0 9px; font-size: 11px; }
.okx-tag.is-gold { background: rgba(var(--gold-rgb), .22); color: var(--gold); }
.okx-tag.is-green { background: rgba(var(--green-light-rgb), .22); color: var(--green-light); }
.okx-tag.is-red { background: rgba(var(--danger-rgb), .2); color: var(--danger); }
.okx-tag img { width: 16px; height: 16px; }

.okx-col { display: flex; flex-direction: column; min-width: 0; }
.okx-fine { margin: 0; font-size: 13px; color: var(--text-muted); }


.okx-steps { display: grid; gap: 8px; padding: 10px; }
.okx-step { display: flex; gap: 16px; padding: 16px 18px; border-radius: 10px; background: var(--row); }
.okx-step-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--row-selected);
    border: 1.5px solid rgba(var(--primary-rgb), .6);
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}
.okx-step-num img { width: 24px; height: 24px; }
.okx-step h4 { margin: 3px 0 5px; font-family: var(--font-title); font-size: 20px; font-weight: 500; line-height: 1.2; color: var(--text); }
.okx-step p { margin: 0; font-size: 15px; color: var(--text-muted); }




.okx-top { padding: 22px 0 34px; }
.okx-top-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.okx-top-lead {
    max-width: 580px;
    margin: 12px 0 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 0 24px rgba(0, 0, 0, .5);
}
.okx-top-side { flex: none; display: flex; align-items: center; gap: 10px; }




.okx-form-card { padding: 24px 24px 22px; }
.okx-form { display: grid; gap: 16px; }
.okx-field { display: grid; gap: 7px; }
.okx-field > label { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; color: var(--text-muted); }
.okx-input {
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    border-radius: var(--radius-xs);
    background: var(--field);
    border: 1.5px solid var(--field-border);
    transition: border-color .18s;
}
.okx-input:focus-within { border-color: var(--field-focus); }
.okx-input > i.icon { width: 42px; margin: 0; font-size: 16px; text-align: center; color: var(--text-dim); }
.okx-input:focus-within > i.icon { color: var(--accent); }
.ui.form .okx-input input[type] {
    flex: 1;
    height: 100%;
    padding: 0 14px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}
.ui.form .okx-input input[type]::placeholder { color: var(--text-dim); font-weight: 500; }
.okx-field.has-error .okx-input { border-color: rgba(var(--danger-rgb), .8); }
.okx-field-error { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--danger); }
.okx-advice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 9px; background: var(--row); }
.okx-advice > i.icon { flex: none; margin: 0; font-size: 20px; color: var(--text-dim); }
.okx-advice p { margin: 0; font-size: 14px; color: var(--text-muted); }
.okx-check .ui.checkbox label { font-size: 14.5px; color: var(--text-muted); }
.okx-check .ui.checkbox label a { color: var(--primary); }
.okx-captcha { display: flex; flex-direction: column; align-items: center; }
.okx-captcha:empty { display: none; }
.okx-form-foot { margin: 0; text-align: center; font-size: 13.5px; color: var(--text-muted); }
.okx-form-foot a { color: var(--primary); font-weight: 700; }



.okx-play {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-areas: "dl account" "launch account";
    gap: 34px 28px;
    align-items: start;
    padding-bottom: 72px;
}
.okx-play-dl { grid-area: dl; }
.okx-play-account { grid-area: account; }
.okx-play-launch { grid-area: launch; }
.okx-play-licence { margin: 12px 0 0 6px; }
.okx-dl-list { display: grid; gap: 8px; padding: 10px; }
.okx-dlrow { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px 20px; border-radius: 9px; background: var(--row); }
.okx-dlrow.is-selected { background: var(--row-selected); }
.okx-dlrow.is-selected::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 16px; width: 3px; border-radius: 2px; background: var(--primary); }
.okx-dlrow-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--row); border: 1px solid rgba(var(--muted-rgb), .28); color: var(--text); }
.okx-dlrow-icon svg { width: 26px; height: 26px; }
.okx-dlrow-info { flex: 1; min-width: 0; }
.okx-dlrow-name { display: block; font-family: var(--font-title); font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--text); }
.okx-dlrow-file { display: block; margin-top: 3px; font-size: 13.5px; color: var(--text-muted); }
.okx-dlrow .ui.button { margin: 0; }
.okx-play-me { display: grid; justify-items: center; gap: 12px; text-align: center; }
.okx-play-avatar { width: 72px; height: 72px; border-radius: 16px; image-rendering: pixelated; border: 2px solid rgba(var(--gold-rgb), .6); }
.okx-play-hello { margin: 0; font-size: 16px; color: var(--text); }


.okx-auth { max-width: 560px; padding-bottom: 72px; }
.okx-auth-alt { margin: 16px 0 0; text-align: center; color: var(--text-muted); }







.okx-passkey { display: grid; gap: 10px; }
.okx-passkey .ui.button {
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    margin: 0;
    padding: 8px 18px;
    line-height: 1.25;
    white-space: normal;
}
.okx-passkey .ui.button img { flex: none; width: 26px; height: 26px; }




.okx-passkey .ui.button:disabled {
    background: var(--btn-off-bg) !important;
    border-color: var(--btn-off-border);
    color: var(--btn-off-text);
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none;
}
.okx-passkey-status { margin: 0; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.okx-passkey-status:empty { display: none; }
.okx-form-card > .ui.horizontal.divider { margin: 18px 0; }






.okx-form-intro { margin: 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--text-muted); }
.okx-qr { justify-self: center; line-height: 0; }
.okx-qr img { display: block; width: 200px; height: 200px; border-radius: var(--radius-xs); }

@media (max-width: 900px) {
    .okx-wrap { padding: 0 16px; }
    .okx-title { font-size: 27px; gap: 10px; }
    .okx-title img { width: 36px; height: 36px; }
    .okx-top { padding: 8px 0 24px; }
    .okx-top-row { flex-direction: column; align-items: stretch; gap: 18px; }
    .okx-top-lead { font-size: 15.5px; }
    .okx-play { grid-template-columns: minmax(0, 1fr); grid-template-areas: "dl" "account" "launch"; gap: 26px; padding-bottom: 48px; }
    .okx-dlrow { flex-wrap: wrap; }
    .okx-dlrow .ui.button { width: 100%; }
    .okx-form-card { padding: 18px 16px; }
}


.ui.segment,
.ui.segments,
.ui.raised.segments,
.main-card,
.categoryshop,
.descrp-shop,
.shop-emotes,
.vote-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--text-muted);
}
.ui.segment.active.stepp { background: var(--glass); }
.categoryshop { overflow: hidden; margin-bottom: 16px; }
.categoryshop > div:first-child {
    font-family: var(--font-title);
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--text-muted);
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border);
}

.ui.cards > .card,
.ui.card,
.shop-product {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.ui.cards > .card:hover,
.shop-product:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--primary-rgb), .4);
    box-shadow: var(--glow-primary);
}
.ui.card > .content > .header,
.ui.cards > .card > .content > .header {
    font-family: var(--font-title) !important;
    font-weight: 700;
    color: var(--text) !important;
}
.ui.cards > .card.disabled { opacity: .55; }
.ui.cards > .card.disabled:hover { transform: none; border-color: var(--border); box-shadow: none; }






.news {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
    transition: border-color .35s, box-shadow .35s;
}
.news.is-active { border-color: rgba(var(--primary-rgb), .5); box-shadow: var(--glow-primary); }
.news .news-bg { display: none; }           
.news h2, .news h3 { color: var(--text) !important; text-align: left !important; }
.news.is-idle h3 { color: var(--text-off) !important; }
.news-grid { align-items: stretch; }




.news-category {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    background: rgba(var(--primary-rgb), .14);
    color: var(--accent);
    font-family: var(--font-title);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
}
.news-date { color: var(--text-muted); font-size: 12px; }


.markdown-excerpt { position: relative; max-height: 132px; overflow: hidden; }
.markdown-excerpt::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(var(--card-rgb), 0), var(--card));
    pointer-events: none;
}






.ui.table,
.shop-table {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--text-muted);
    border-collapse: separate;
    border-spacing: 0 6px;
}
.shop-table th,
.shop-table td { padding-left: 12px; padding-right: 12px; }
.ui.table thead th,
.shop-table thead th {
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-title);
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 0;
}
.shop-table thead th span {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
}
.ui.table tbody td,
.shop-table tbody td {
    background: var(--row);
    border: 0;
    color: var(--text);
}
.ui.table tbody td:first-child,
.shop-table tbody td:first-child { border-radius: 9px 0 0 9px; }
.ui.table tbody td:last-child,
.shop-table tbody td:last-child { border-radius: 0 9px 9px 0; }
.ui.table tbody tr:hover td { background: var(--row-hover); }
.ui.table tbody tr:nth-child(even) td { background: var(--row); }
.ui.table tbody tr:nth-child(even):hover td { background: var(--row-hover); }





.shop-table { margin-top: 0; }
.shop-table thead th { padding-top: 0; padding-bottom: 0; }


.shop-table .price-line td { background: transparent; vertical-align: middle; padding-top: 0; padding-bottom: 2px; }
.shop-table .price-line td span {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(var(--gold-rgb), .22);
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--gold);
}
.shop-table .price-line td small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }
.shop-table .advantage-title td {
    background: transparent;
    padding-top: 4px;
    padding-bottom: 2px;
    color: var(--primary);
    font-family: var(--font-title);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.shop-table .enabled-property { text-align: center; }



.shop-table td.enabled-property:first-child { text-align: left; }
.shop-table .okx-yes { display: inline-block; width: 22px; height: 22px; vertical-align: middle; }


.okx-swipe-hint { display: none; align-items: center; gap: 8px; margin: 0 4px 10px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.okx-swipe-hint::after { content: "→"; color: var(--primary); }
.okx-no { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--text-muted); opacity: .45; vertical-align: middle; }
.shop-table tfoot th { background: transparent; border-top: 0; padding-top: 12px; }



.shop-table tr:not(.advantage-title) td:nth-child(2n) { background: var(--row); }
.shop-table thead th:nth-child(2n),
.shop-table tfoot th:nth-child(2n),
.shop-table tbody tr.price-line td,
.shop-table tbody tr.price-line td:nth-child(n) { background: transparent; }
.shop-table tbody tr:not(.advantage-title):not(.price-line):hover td { background: var(--row-hover); }


.zpass-kit,
.zpass-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 4px;
    background: rgba(var(--blue-light-rgb), .14);
    border: 1px solid rgba(var(--blue-light-rgb), .35);
    color: var(--blue-light);
    font-family: var(--font-title);
    font-size: 10px;
    font-weight: 700;
}
.zpass-on .zpass-property .zpass.hidden-property { display: block; }
.zpass-on .zpass-property .basic { display: none; }
.scroll-y { overflow-x: auto; }



.ui.input > input,
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="number"],
.ui.form textarea,
.ui.selection.dropdown {
    background: var(--surface);
    border: 1px solid rgba(var(--muted-rgb), .14);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14.5px;
    padding: 13px 16px;
    transition: border-color .2s, box-shadow .2s;
}
.ui.input > input::placeholder,
.ui.form textarea::placeholder { color: var(--text-dim); }
.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .14);
}
.ui.form .field.error input,
.ui.form .field.error textarea,
.ui.form input.error {
    background: rgba(var(--danger-rgb), .06);
    border-color: var(--danger);
    color: var(--text);
}
.ui.form .field.error label,
.field-error-text { color: var(--danger) !important; font-size: 12.5px; }
.ui.form .field.success input,
.ui.form input.success {
    background: rgba(var(--primary-rgb), .06);
    border-color: var(--accent);
}
.ui.form .field.success label,
.field-success-text { color: var(--green-light) !important; font-size: 12.5px; }
.ui.form .disabled.field input,
.ui.form input:disabled { opacity: .5; }
.ui.checkbox label::before,
.ui.radio.checkbox label::before {
    background: var(--surface);
    border-color: var(--border-strong);
}
.ui.checkbox input:checked ~ label::before,
.ui.radio.checkbox input:checked ~ label::before {
    background: var(--primary);
    border-color: var(--primary);
}
.ui.checkbox input:checked ~ label::after { color: var(--primary-fg); }
.ui.dropdown .menu,
.ui.dropdown .menu.offers {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-cold);
}
.ui.dropdown .menu > .item { color: var(--text) !important; border-top: 1px solid rgba(var(--muted-rgb), .08); }
.ui.dropdown .menu > .item:hover { background: rgba(var(--primary-rgb), .08) !important; }
.ui.dropdown .menu > .item .description { color: var(--text-muted) !important; }







.ui.message {
    position: relative;
    background: var(--glass-strong);
    border: 1px solid rgba(var(--muted-rgb), .26);
    border-left: 3px solid var(--primary);
    border-radius: 12px;
    box-shadow: var(--shadow-cold);
    color: var(--text-muted);
}
.ui.message .header { font-family: var(--font-title); font-weight: 500; color: var(--text); }
.ui.success.message,
.ui.positive.message { background: var(--glass-strong); border-color: rgba(var(--muted-rgb), .26); border-left-color: var(--green-light); color: var(--text-muted); }
.ui.success.message .header,
.ui.positive.message .header { color: var(--green-light); }
.ui.error.message,
.ui.negative.message { background: var(--glass-strong); border-color: rgba(var(--muted-rgb), .26); border-left-color: var(--danger); color: var(--text-muted); }
.ui.error.message .header,
.ui.negative.message .header { color: var(--danger); }
.ui.info.message { background: var(--glass-strong); border-color: rgba(var(--muted-rgb), .26); border-left-color: var(--primary); }
.ui.info.message .header { color: var(--primary); }
.ui.warning.message,
.ui.orange.message { background: var(--glass-strong); border-color: rgba(var(--muted-rgb), .26); border-left-color: var(--warning); }
.ui.warning.message .header,
.ui.orange.message .header { color: var(--warning); }



































.ui.message.top-message {
    


    background: var(--card);
    



    border: 1px solid var(--border) !important;
    border-left: 3px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    

    box-shadow: none;
    color: var(--text);
    
    padding: .9em 1.35em .9em 2.85em;
    position: relative;
}




.ui.message.top-message::before {
    position: absolute;
    left: 1.15em;
    top: .9em;
    font-family: var(--font-title), sans-serif;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.45;
}




.ui.error.message.top-message {
    background: var(--card);
    border-left-color: var(--danger) !important;
}
.ui.error.message.top-message::before { content: "\2715"; color: var(--danger); }
.ui.error.message.top-message .header { color: var(--danger) !important; }

.ui.warning.message.top-message {
    background: var(--card);
    border-left-color: var(--warning) !important;
}
.ui.warning.message.top-message::before { content: "!"; color: var(--warning); }
.ui.warning.message.top-message .header { color: var(--warning) !important; }

.ui.success.message.top-message {
    background: var(--card);
    border-left-color: var(--green-light) !important;
}
.ui.success.message.top-message::before { content: "\2713"; color: var(--green-light); }
.ui.success.message.top-message .header { color: var(--green-light) !important; }

.ui.info.message.top-message {
    background: var(--card);
    border-left-color: var(--blue-light) !important;
}
.ui.info.message.top-message::before { content: "i"; color: var(--blue-light); }
.ui.info.message.top-message .header { color: var(--blue-light) !important; }




.ui.message.top-message .header {
    font-family: var(--font-title);
    letter-spacing: .01em;
    margin-bottom: .35em;
}















.top-message p,
.top-message ul,
.top-message li { color: var(--text); }
#messages-id .top-message p,
#messages-id .top-message ul,
#messages-id .top-message li { color: var(--text) !important; }


.top-message .list:not(.ui) { opacity: 1; }
.top-message ul.list { margin: .3em 0 0; padding-left: 1.1em; list-style-position: outside; }
.top-message ul.list li { margin-top: .2em; }
.top-message p:last-child { margin-bottom: 0; }





#messages-id .top-message {
    
    padding-right: 3.2em;
}
#messages-id .top-message .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: color .15s var(--ease), background-color .15s var(--ease);
}
#messages-id .top-message .close:hover,
#messages-id .top-message .close:focus-visible {
    background: rgba(var(--muted-rgb), .10);
    color: var(--text);
}
#messages-id .top-message .close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
}








@media (min-width: 768px) {
    #messages-id { pointer-events: none; }
    #messages-id .top-message { pointer-events: auto; }
}

.ui.label,
.ui.okaria.label {
    background: rgba(var(--primary-rgb), .12);
    border: 1px solid rgba(var(--primary-rgb), .30);
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-family: var(--font-title);
    font-weight: 700;
}





.ui.okaria.label,
.item-price .ui.label {
    background: rgba(var(--gold-rgb), .12);
    border-color: rgba(var(--gold-rgb), .32);
    color: var(--gold);
}
.ui.gray.label,
.ui.grey.label {
    background: rgba(var(--muted-rgb), .08);
    border-color: rgba(var(--muted-rgb), .18);
    color: var(--text-muted);
}
.ui.green.label { background: rgba(var(--accent-rgb), .14); border-color: rgba(var(--accent-rgb), .4); color: var(--accent); }



.ui.red.label,
.ui.negative.label {
    background: rgba(var(--danger-rgb), .14) !important;
    border-color: rgba(var(--danger-rgb), .45) !important;
    color: var(--danger) !important;
}
.ui.orange.label,
.ui.yellow.label {
    background: rgba(var(--warning-rgb), .14) !important;
    border-color: rgba(var(--warning-rgb), .42) !important;
    color: var(--warning) !important;
}
.ui.blue.label,
.ui.teal.label {
    background: rgba(var(--blue-light-rgb), .14) !important;
    border-color: rgba(var(--blue-light-rgb), .38) !important;
    color: var(--blue-light) !important;
}
.ui.olive.label {
    background: rgba(var(--green-light-rgb), .12) !important;
    border-color: rgba(var(--green-light-rgb), .35) !important;
    color: var(--green-light) !important;
}
.top-left, .top-right {
    background: var(--accent);
    color: var(--primary-fg);
    font-family: var(--font-title);
    font-weight: 700;
    border-radius: var(--radius-sm);
}


.rank-badge {
    display: inline-block;
    padding: 5px 13px;
    border-radius: var(--radius-sm);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .04em;
}
.rank-badge.is-createur     { background: rgba(var(--danger-rgb), .14);  border: 1px solid rgba(var(--danger-rgb), .45);  color: var(--danger); }
.rank-badge.is-admin        { background: rgba(var(--warning-rgb), .14);  border: 1px solid rgba(var(--warning-rgb), .42);  color: var(--warning); }
.rank-badge.is-responsable  { background: rgba(var(--blue-rgb), .14);  border: 1px solid rgba(var(--blue-rgb), .42);  color: var(--blue-light); }
.rank-badge.is-moderateur   { background: rgba(var(--primary-rgb), .14);  border: 1px solid rgba(var(--primary-rgb), .42);  color: var(--primary); }
.rank-badge.is-helper       { background: rgba(var(--green-light-rgb), .12); border: 1px solid rgba(var(--green-light-rgb), .35); color: var(--green-light); }
.rank-badge.is-guide        { background: rgba(var(--muted-rgb), .10); border: 1px solid var(--border-strong);      color: var(--text-muted); }
.rank-badge.is-test         { background: rgba(var(--muted-rgb), .06); border: 1px dashed rgba(var(--muted-rgb), .30); color: var(--text-dim); }



.ui.modal {
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-modal);
    color: var(--text-muted);
}
.ui.modal > .header {
    background: var(--card) !important;
    color: var(--text) !important;
    font-family: var(--font-title);
    font-weight: 700;
    border-bottom: 1px solid var(--border);
}
.ui.modal > .content { background: var(--card) !important; color: var(--text-muted) !important; }
.ui.modal > .actions {
    background: var(--card-active) !important;
    border-top: 1px solid var(--border);
}
.ui.dimmer { background: rgba(var(--bg-rgb), .72) !important; }







.ui.modal > .header,
.ui.modal > :first-child:not(.icon) {
    border-top-left-radius: calc(var(--radius) - 1px);
    border-top-right-radius: calc(var(--radius) - 1px);
}
.ui.modal > .actions,
.ui.modal > :last-child {
    border-bottom-left-radius: calc(var(--radius) - 1px);
    border-bottom-right-radius: calc(var(--radius) - 1px);
}



.ui.modal.okx-confirm { width: 440px; margin-left: -220px; }
.ui.modal.okx-confirm > .content p { margin: 0 0 10px; line-height: 1.55; }
.ui.modal.okx-confirm > .content p:last-child { margin-bottom: 0; }
@media (max-width: 479px) {
    .ui.modal.okx-confirm { width: calc(100% - 32px); margin-left: calc(16px - 50%); }
}






.okf {
    background: rgba(var(--bg-rgb), .92);
    border-top: 1px solid rgba(var(--muted-rgb), .22);
    padding: 46px 0 26px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.okf-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}
.okf-brand img { display: block; width: 176px; height: auto; margin-bottom: 14px; }
.okf-brand p { color: var(--text-muted); font-size: 15px; max-width: 280px; margin: 0 0 16px; }
.okf-social { display: flex; flex-wrap: wrap; gap: 8px; }
.okf-social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1.5px solid var(--btn-border);
    background: var(--tab-bg);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.okf-social-link i { margin: 0; font-size: 16px; }
.okf-social-link:hover { border-color: var(--btn-hi-border); color: var(--text); }
.okf-social-link.is-discord i { color: var(--discord); }


.okf-col h5 {
    margin: 0 0 14px;
    text-align: left;
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.okf-col a {
    display: block;
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
    opacity: .86;
}
.okf-col a:hover { color: var(--primary); opacity: 1; }
.okf-legal {
    max-width: 1200px;
    margin: 30px auto 0;
    padding: 20px 32px 0;
    border-top: 1px solid rgba(var(--muted-rgb), .16);
    font-size: 13.5px;
    color: var(--text-dim);
}
@media (max-width: 900px) {
    .okf { padding: 34px 0 22px; }
    .okf-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 0 16px; }
    .okf-brand { grid-column: 1 / -1; }
    .okf-col a { display: flex; align-items: center; min-height: 40px; margin: 0; }
    .okf-legal { padding: 18px 16px 0; margin-top: 22px; }
}






















body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}
body > .okf { margin-top: auto; }














@media (max-width: 767px) {
    body > #messages-id { margin-bottom: 0 !important; }
}
.body > #mustache:first-child + .ui.segments { margin-top: 0; }










body > .body:has(.p404) {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.body .p404 { height: auto !important; }




@media (min-width: 768px) {
    body > .body:has(.p404) { padding-bottom: 35px; }
}


.okx-404 {
    max-width: 460px;
    margin: 0 auto;
    padding: 34px 32px 32px;
    text-align: center;
}
.okx-404 img { display: block; width: 64px; height: 64px; margin: 0 auto 14px; }
.okx-404 h1 {
    margin: 0 0 8px;
    font-family: var(--font-title) !important;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
}
.okx-404 p { margin: 0 0 24px; color: var(--text-muted); font-size: 16px; line-height: 1.6; }









.body .main-card {
    display: block;
    background: var(--glass);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
    box-shadow: var(--shadow-cold);
    color: var(--text-muted);
    

    padding: 0;
    text-align: left;
}
.body .main-card-header {
    padding: 20px 28px 0;
    text-align: left;
    line-height: normal;
    margin-bottom: 0;
}
.body .main-card-header .ui.header { margin-bottom: 0; }
.body .main-card-content { padding: 0 28px 24px; text-align: left; }




















.body .main-card > .card-action {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 28px 24px;
}

.body .main-card a { color: var(--primary); }
.body .main-card a:hover { color: var(--accent); }










.ui.pagination.menu,
.paginator {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    gap: 8px;
}
.ui.pagination.menu .item,
.paginator a, .paginator span {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(var(--muted-rgb), .16);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    
    font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
}
.ui.pagination.menu .active.item,
.paginator .active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-fg);
}
.ui.pagination.menu .disabled.item { color: var(--text-dim); border-color: var(--border); }



.vote-wrapper { display: flex; gap: 20px; }
.vote-card {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
    text-align: left;
}
.vote-card.is-available { border-color: rgba(var(--primary-rgb), .35); }
.vote-card.is-rewarded { border-color: rgba(var(--accent-rgb), .45); box-shadow: var(--glow-primary); }
.vote-card .vote-body { padding: 20px 20px 18px; }
.vote-card .vote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-radius: 0;
    
    font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
}
.vote-countdown {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    background: rgba(var(--blue-light-rgb), .08);
    border: 1px solid rgba(var(--blue-light-rgb), .28);
    color: var(--blue-light);
    font-family: var(--font-mono);
    font-size: 15px;
}
.vote-progress { height: 3px; border-radius: 2px; background: rgba(var(--muted-rgb), .12); overflow: hidden; }
.vote-progress > span { display: block; height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-light)); }








.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-list.is-page { margin-top: 8px; }

.faq-item {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .2s;
}
.faq-item[open] { border-color: rgba(var(--primary-rgb), .32); }
.faq-item:hover { border-color: var(--border-strong); }

.faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 20px;
    cursor: pointer;
    list-style: none;          
    user-select: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }   
.faq-item > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.faq-q {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 15.5px;
    color: var(--text);
    line-height: 1.4;
}
.faq-item[open] .faq-q { color: var(--primary); }



.faq-sign { position: relative; width: 13px; height: 13px; flex-shrink: 0; }
.faq-sign::before,
.faq-sign::after {
    content: "";
    position: absolute;
    top: 50%; left: 0;
    width: 13px; height: 1.5px;
    margin-top: -.75px;
    background: var(--text-muted);
    transition: opacity .2s, background .2s;
}
.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::before { background: var(--primary); }
.faq-item[open] .faq-sign::after { opacity: 0; }

.faq-a { padding: 0 20px 18px; }
.faq-a p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.7; max-width: 68ch; }
.faq-a a { font-weight: 600; }

.faq-foot { margin-top: 26px; }
.faq-foot p { color: var(--text-dim); font-size: 13.5px; }

@media (max-width: 768px) {
    .faq-item > summary { padding: 14px 16px; }
    .faq-q { font-size: 14.5px; }
    .faq-a { padding: 0 16px 15px; }
    .faq-a p { font-size: 13.5px; line-height: 1.65; }
}




.shot-slot {
    position: relative;
    background: repeating-linear-gradient(135deg, var(--card-active), var(--card-active) 14px, var(--card) 14px, var(--card) 28px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-align: center;
}



@keyframes breathe {
    0%, 100% { box-shadow: 0 0 18px rgba(var(--primary-rgb), .45), 0 0 48px rgba(var(--primary-rgb), .18); }
    50%      { box-shadow: 0 0 32px rgba(var(--primary-rgb), .75), 0 0 80px rgba(var(--primary-rgb), .32); }
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.8); }
}
@keyframes scroll-hint {
    0%, 100% { transform: translateY(0); opacity: .5; }
    50%      { transform: translateY(6px); opacity: .9; }
}
@keyframes zm-spin { to { transform: rotate(360deg); } }



.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s ease, transform .65s ease;
    will-change: opacity, transform;
}
.fade-up.is-visible { opacity: 1; transform: none; }






.no-js .fade-up { opacity: 1; transform: none; }
.fade-up[data-delay="1"] { transition-delay: 60ms; }
.fade-up[data-delay="2"] { transition-delay: 120ms; }
.fade-up[data-delay="3"] { transition-delay: 180ms; }
.fade-up[data-delay="4"] { transition-delay: 240ms; }

.scroll-hint { animation: scroll-hint 2s ease-in-out infinite; }
.parallax-layer { will-change: transform; }









.hide-on-small-only { }
.show-on-small-only { display: none !important; }

@media (max-width: 768px) {
    .hide-on-small-only { display: none !important; }
    .show-on-small-only { display: revert !important; }

    .vote-wrapper { flex-direction: column; }
    .vote-card { flex: 0 0 100%; width: 100%; box-sizing: border-box; }

    .ui.stackable.padded.grid > .column { padding-left: 16px !important; padding-right: 16px !important; }
    .ui.cards > .card { width: 100% !important; }

    
    .scroll-y { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .shop-table { min-width: 640px; }
    .shop-table thead th:first-child,
    .shop-table tbody td:first-child {
        position: sticky;
        left: 0;
        background: var(--card);
        z-index: 2;
    }
    .shop-table thead th:first-child { background: var(--card); }
    .okx-swipe-hint { display: flex; }

    












    .ui.button, .menu-head .item, .ui.pagination.menu .item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .ui.button { padding: 14px 20px; }

    h1, .ui.header { font-size: 23px !important; }
    .main-logo { max-width: 200px; }

    







    .page-bg-glow { display: none; }
}










@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
    .fade-up { opacity: 1 !important; transform: none !important; }
    .parallax-layer { transform: none !important; }
}