html{
    font-size:16px !important;
    scroll-behavior:smooth;
}

body{
    font-family:'DM Sans', system-ui, -apple-system, sans-serif !important;
    background:#050508 !important;
    color:#dbdbe3 !important;
    overflow-x:hidden;
}

.ra-main-container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}

.ra-navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:9999;
    background:rgba(5,5,8,.80);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.05);
    padding:16px 0;
}

.ra-navbar *,
.ra-navbar *::before,
.ra-navbar *::after{
    box-sizing:border-box;
}

.ra-navbar a{
    text-decoration:none !important;
}

.ra-navbar-container{
    max-width:1280px;
    margin:0 auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:56px;
}

.ra-logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none !important;
    position:relative;
}

.ra-logo::before{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:9999px;
    background:rgba(245,158,11,.10);
    filter:blur(8px);
    opacity:.60;
    transition:opacity .5s ease;
    pointer-events:none;
}

.ra-logo:hover::before{
    opacity:1;
}

.ra-logo-icon{
    width:36px;
    height:36px;
    border-radius:4px;
    background:#0a0a0f;
    border:1px solid rgba(245,158,11,.40);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#f59e0b;
    font-family:'Cinzel',serif;
    font-size:18px;
    font-weight:900;
    flex-shrink:0;
    position:relative;
    z-index:1;
}

.ra-logo-text{
    display:flex;
    flex-direction:column;
    position:relative;
    z-index:1;
}

.ra-logo-title{
    font-family:'Cinzel',serif;
    font-size:16px;
    font-weight:900;
    letter-spacing:.18em;
    color:#fefce8;
    line-height:1;
    text-decoration:none;
}

.ra-logo:hover .ra-logo-title{
    color:#fcd34d !important;
}

.ra-logo-sub{
    font-family:'JetBrains Mono',monospace;
    font-size:9px;
    color:#f59e0b;
    letter-spacing:.20em;
    text-transform:uppercase;
    margin-top:2px;
    line-height:1;
}

.ra-nav-menu{
    display:flex;
    align-items:center;
    gap:0;
    margin-left:auto;
    margin-right:auto;
}

.ra-nav-menu > a,
.ra-dropdown-btn,
.ra-nav-link-btn{
    font-family:'Cinzel',serif !important;
    font-size:12px;
    font-weight:700;
    color:#d4d4d8 !important;
    padding:8px 16px;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none !important;
    background:none;
    border:none;
    line-height:1;
    transition:color .2s ease;
    cursor:pointer;
}

.ra-nav-menu > a:hover,
.ra-dropdown-btn:hover,
.ra-nav-link-btn:hover{
    color:#f59e0b !important;
}

.ra-dropdown{
    position:relative;
}

.ra-dropdown{
    position:relative;
}

.ra-dropdown::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:12px;
}

.ra-dropdown-content{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);

    width:256px;
    margin-top:0;
    padding:12px;

    background:#0a0a0f;
    border:1px solid rgba(255,255,255,.10);
    border-radius:8px;

    display:none;

    box-shadow:0 25px 50px rgba(0,0,0,.55);
    overflow:hidden;
}

.ra-dropdown:hover .ra-dropdown-content{
    display:block;
}

.ra-account-dropdown{
    position:relative;
}

.ra-account-dropdown .ra-dropdown-content a{
    display:block;
    width:100%;
}

.ra-account-dropdown .ra-dropdown-content{
    right:0;
    left:auto;
    transform:none;
    min-width:220px;
}

.ra-dropdown-content::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(to right, transparent, #f59e0b, transparent);
}

.ra-dropdown-content a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px;
    margin-top:4px;
    border-radius:4px;
    color:#d4d4d8 !important;
    text-decoration:none !important;
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    text-transform:none;
    letter-spacing:0;
    transition:.2s;
}

.ra-dropdown-content a:first-child{
    margin-top:0;
}

.ra-dropdown-content a:hover{
    background:rgba(255,255,255,.05);
    color:#f59e0b !important;
}

.ra-dropdown-content a strong{
    display:block;
    font-family:'Cinzel',serif;
    font-size:11px;
    font-weight:900;
    color:#e5e5e5;
    text-transform:uppercase;
    letter-spacing:.08em;
    line-height:1.2;
}

.ra-dropdown-content a small{
    display:block;
    font-size:10px;
    color:#71717a;
    margin-top:2px;
    line-height:1.2;
}

.ra-dropdown-content a:hover strong{
    color:#f59e0b;
}

.ra-dd-icon{
    color:#f59e0b;
    font-size:14px;
    width:18px;
    flex-shrink:0;
}

.ra-navbar-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.ra-btn-outline,
button.ra-btn-outline{
    font-family:'Cinzel',serif !important;
    padding:6px 16px;
    min-width:90px;
    text-align:center;
    background:transparent !important;
    color:#d4d4d8 !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:4px;
    text-decoration:none !important;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    line-height:1.5;
    transition:.25s;
    cursor:pointer;
}

.ra-btn-outline:hover,
button.ra-btn-outline:hover{
    background:transparent !important;
    color:#f59e0b !important;
    border-color:rgba(245,158,11,.30) !important;
}

.ra-btn-gold{
    font-family:'Cinzel',serif !important;
    padding:6px 20px;
    min-width:150px;
    text-align:center;
    background:#f59e0b;
    color:#050508 !important;
    border:none;
    border-radius:4px;
    text-decoration:none !important;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    line-height:1.5;
    transition:.25s;
    cursor:pointer;
}

.ra-btn-gold:hover{
    background:#fbbf24;
}

.ra-cr-modal.hidden{
    display:none !important;
}

.ra-cr-modal{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
}

.ra-cr-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(5,5,8,.82);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    cursor:pointer;
}

.ra-cr-modal-box{
    position:relative;
    width:100%;
    max-width:485px;
    background:#050508;
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
    box-shadow:0 25px 70px rgba(0,0,0,.75);
    padding:28px;
    overflow:hidden;
    color:#d4d4d8;
}

.ra-cr-modal-topline{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(to right, transparent, #f59e0b, transparent);
}

.ra-cr-modal-close{
    position:absolute;
    top:14px;
    right:14px;
    background:none;
    border:none;
    color:#71717a;
    font-size:18px;
    cursor:pointer;
    padding:4px;
    line-height:1;
    transition:.2s;
}

.ra-cr-modal-close:hover{
    color:#fff;
}

.ra-modal-open{
    overflow:hidden;
}

.chrono-modal{
    font-family:'DM Sans',sans-serif;
}

.chrono-modal-header{
    text-align:center;
    margin-bottom:24px;
}

.chrono-modal-header h3{
    font-family:'Cinzel',serif;
    font-size:24px;
    font-weight:900;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin:0;
}

.chrono-modal-header p{
    color:#a1a1aa;
    font-size:12px;
    margin:6px 0 0;
    line-height:1.5;
}

.chrono-modal-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.chrono-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.chrono-form-group label{
    display:block;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;
    color:#71717a;
    text-transform:uppercase;
    font-weight:900;
    margin-bottom:5px;
}

.chrono-form-group input{
    width:100%;
    background:#111118;
    border:1px solid rgba(255,255,255,.10);
    border-radius:4px;
    color:#f4f4f5;
    padding:10px;
    font-size:12px;
    font-family:'JetBrains Mono',monospace;
    outline:none;
    box-sizing:border-box;
}

.chrono-form-group input:focus{
    border-color:#f59e0b;
}

.chrono-check-row{
    display:flex;
    align-items:flex-start;
    gap:8px;
    color:#71717a;
    font-size:10px;
    line-height:1.4;
    cursor:pointer;
}

.chrono-check-row input{
    margin-top:1px;
}

.chrono-submit-btn{
    width:100%;
    padding:14px;
    border:none;
    border-radius:4px;
    background:linear-gradient(to right, #d97706, #f59e0b);
    color:#050508;
    font-family:'Cinzel',serif;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.12em;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(245,158,11,.10);
    transition:.2s;
}

.chrono-submit-btn:hover{
    filter:brightness(1.12);
}

.chrono-modal-bottom{
    text-align:center;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.05);
    margin-top:24px;
    font-size:12px;
    color:#71717a;
}

.chrono-modal-bottom button{
    background:none;
    border:none;
    color:#f59e0b;
    cursor:pointer;
    font-family:'Cinzel',serif;
    font-weight:900;
    text-transform:uppercase;
    font-size:12px;
}

.chrono-modal-bottom button:hover{
    text-decoration:underline;
}

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

.chrono-download-card{
    padding:16px;
    border-radius:4px;
    border:1px solid rgba(255,255,255,.05);
    background:rgba(24,24,27,.60);
    cursor:pointer;
    transition:.25s;
}

.chrono-download-card:hover{
    background:#0a0a0f;
    border-color:rgba(245,158,11,.30);
}

.chrono-download-card-lite:hover{
    border-color:rgba(99,102,241,.35);
}

.chrono-download-left{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.chrono-download-icon{
    font-size:24px;
    line-height:1;
}

.chrono-download-card h4{
    font-family:'Cinzel',serif;
    font-size:14px;
    font-weight:900;
    text-transform:uppercase;
    color:#f4f4f5;
    margin:0;
}

.chrono-download-card p{
    font-size:14px;
    color:#a1a1aa;
    margin:6px 0 0;
    line-height:1.4;
}

.chrono-size{
    display:inline-block;
    margin-top:8px;
    padding:2px 6px;
    border-radius:4px;
    font-family:'JetBrains Mono',monospace;
    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
}

.chrono-size-gold{
    background:rgba(69,26,3,.40);
    color:#f59e0b;
    border:1px solid rgba(245,158,11,.20);
}

.chrono-size-indigo{
    background:rgba(49,46,129,.40);
    color:#818cf8;
    border:1px solid rgba(99,102,241,.20);
}

.chrono-modal-success{
    text-align:center;
    padding:40px 0;
}

.chrono-modal-success-icon{
    display:block;
    font-size:48px;
    color:#f59e0b;
    margin-bottom:14px;
}

.chrono-modal-success h3{
    font-family:'Cinzel',serif;
    font-size:20px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#d97706;
    margin:0;
}

.chrono-modal-success p{
    color:#d4d4d8;
    font-size:14px;
    line-height:1.5;
    margin:12px 0 0;
}

.ra-footer{
    background:#050508;
    border-top:1px solid rgba(255,255,255,.05);
    color:#a1a1aa;
}

.ra-footer-container{
    max-width:1280px;
    margin:0 auto;
    padding:64px 24px;
}

.ra-footer-grid{
    display:grid;
    grid-template-columns:5fr 3fr 4fr;
    gap:40px;
}

.ra-footer-logo-row{
    display:flex;
    align-items:center;
    gap:12px;
}

.ra-footer-logo-icon{
    width:36px;
    height:36px;
    border-radius:4px;
    background:#0a0a0f;
    border:1px solid rgba(245,158,11,.40);
    color:#f59e0b;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Cinzel',serif;
    font-size:18px;
    font-weight:900;
}

.ra-footer-logo-text{
    display:flex;
    flex-direction:column;
}

.ra-footer-logo-title{
    font-family:'Cinzel',serif;
    font-size:16px;
    font-weight:900;
    letter-spacing:.18em;
    color:#fefce8;
    line-height:1;
}

.ra-footer-logo-sub{
    font-family:'JetBrains Mono',monospace;
    font-size:9px;
    color:#f59e0b;
    letter-spacing:.20em;
    text-transform:uppercase;
    margin-top:2px;
}

.ra-footer-desc{
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    line-height:1.7;
    color:#a1a1aa;
    max-width:384px;
    margin:20px 0;
}

.ra-footer-socials{
    display:flex;
    align-items:center;
    gap:12px;
}

.ra-footer-socials a{
    width:32px;
    height:32px;
    border-radius:4px;
    background:#0a0a0f;
    border:1px solid rgba(255,255,255,.05);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#d4d4d8;
    text-decoration:none !important;
    transition:.2s;
}

.ra-footer-socials a:hover{
    background:#1b1b22;
    color:#f59e0b;
}

.ra-footer h4{
    font-family:'Cinzel',serif;
    font-size:12px;
    font-weight:700;
    color:#e5e5e5;
    text-transform:uppercase;
    letter-spacing:.15em;
    margin:0 0 20px;
}

.ra-footer ul{
    list-style:none;
    padding:0;
    margin:0;
}

.ra-footer li{
    margin-bottom:12px;
}

.ra-footer a{
    font-family:'Cinzel',serif;
    font-size:12px;
    font-weight:800;
    color:#d4d4d8;
    text-transform:uppercase;
    letter-spacing:.08em;
    text-decoration:none !important;
    transition:.2s;
}

.ra-footer a:hover{
    color:#f59e0b;
}

.ra-footer-support p{
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    line-height:1.7;
    color:#a1a1aa;
    margin:0 0 16px;
}

.ra-footer-support li:nth-child(2){
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.05);
}

.ra-footer-bottom{
    border-top:1px solid rgba(255,255,255,.05);
    background:#050508;
    padding:32px 0;
}

.ra-footer-bottom-container{
    max-width:1280px;
    margin:0 auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.ra-footer-bottom p{
    font-family:'JetBrains Mono',monospace;
    font-size:10px;
    color:#52525b;
    margin:0;
}

.ra-footer-bottom span{
    color:#10b981;
    font-weight:700;
    text-transform:uppercase;
}

.ra-account-btn{
    cursor:pointer;
    border:none;
}

.chrono-modal-error{
    display:block;
    padding:10px 12px;
    border:1px solid rgba(239,68,68,.35);
    background:rgba(127,29,29,.22);
    color:#fca5a5;
    border-radius:4px;
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    line-height:1.4;
}

.chrono-modal-error.hidden{
    display:none !important;
}

.chrono-submit-btn:disabled{
    opacity:.65;
    cursor:not-allowed;
}

#leaderboard-rows tr {
    height: 68px !important;
}

#leaderboard-rows td {
    height: 68px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
}

#leaderboard-rows td:nth-child(2) {
    display: table-cell !important;
    vertical-align: middle !important;
}

#leaderboard-rows td:nth-child(2) > div {
    height: 68px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

#rankings-podium a,
#rankings-podium a:hover,
#rankings-podium h3,
#rankings-podium h3:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

.ra-guild-emblem{
    width:24px;
    height:24px;
    image-rendering:pixelated;
    flex-shrink:0;
}

.ra-empty-emblem{
    width:24px;
    height:24px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:4px;
    background:rgba(255,255,255,.05);
    flex-shrink:0;
}

.ra-mobile-toggle{
    display:none;
    background:none;
    border:none;
    color:#f59e0b;
    font-size:28px;
    cursor:pointer;
    padding:8px;
}

.npc-card .fs-npc-img {
    margin: 15px auto;
}

.min-h-screen {
    min-height: 85vh !important;;
}

.hero-banner-bg{
    position: absolute;
    inset: 0;
    background-image: url('../img/hero_banner_background11.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .70;
    transform: scale(1.05);
}


::-webkit-scrollbar{
    width:8px
}

::-webkit-scrollbar-track{
    background:#050508
}

::-webkit-scrollbar-thumb{
    background:#1b1b22;
    border-radius:4px
}

::-webkit-scrollbar-thumb:hover{
    background:#f59e0b
}

.nav-active{
    background:linear-gradient(to right,#d97706,#f59e0b)!important;
    color:#050508!important;
    font-weight:900!important
}

.scroller-none::-webkit-scrollbar{
    display:none
}

.scroller-none{
    -ms-overflow-style:none;
    scrollbar-width:none
}

.vault-filter-btn{
    padding:8px 16px;
    border:1px solid #252525;
    background:#0a0a0f;
    color:#cfcfcf;
    border-radius:6px;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.vault-filter-btn.active{
    background:#d4a017;
    border-color:#d4a017;
    color:#000;
}

.vault-filter-btn:hover{
    border-color:#d4a017;
}

#storage-search-input{
    background:#0a0a0f !important;
    color:#e5e5e5 !important;
    border:1px solid #262626 !important;
    box-shadow:none !important;
}

#storage-search-input:focus{
    background:#0a0a0f !important;
    color:#e5e5e5 !important;
    border:1px solid #f59e0b !important;
    box-shadow:none !important;
    outline:none !important;
}

#storage-search-input:not(:focus){
    border:1px solid #262626 !important;
}

.ra-container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding-left:24px;
    padding-right:24px;
}


.vault-item-icon{
    width:24px !important;
    height:24px !important;
    max-width:24px !important;
    max-height:24px !important;
    object-fit:contain !important;
    image-rendering:auto;
    display:block;
}

.vault-row-cell{
    vertical-align:middle !important;
}

.vault-item-wrap{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:40px;
}

.vault-id-cell,
.vault-amount-cell,
.vault-quality-cell,
.vault-detail-cell{
    vertical-align:middle !important;
    line-height:1 !important;
}

.vault-item-icon{
    width:24px !important;
    height:24px !important;
    object-fit:contain !important;
    display:block;
    flex-shrink:0;
}

.vault-card-icon{
    width:20px !important;
    height:20px !important;
    object-fit:contain !important;
}

.vault-row-cell{
    vertical-align:middle !important;
}

.vault-item-wrap{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:40px;
}

.vault-badge-id{
    display:inline-block;
    padding:3px 8px;
    border-radius:4px;
    border:1px solid rgba(16,185,129,.35);
    background:rgba(6,78,59,.25);
    color:#34d399;
    font-size:10px;
    font-family:'JetBrains Mono',monospace;
    font-weight:900;
}

.vault-badge-unid{
    display:inline-block;
    padding:3px 8px;
    border-radius:4px;
    border:1px solid rgba(245,158,11,.35);
    background:rgba(120,53,15,.25);
    color:#f59e0b;
    font-size:10px;
    font-family:'JetBrains Mono',monospace;
    font-weight:900;
}

.vault-badge-broken{
    display:inline-block;
    padding:4px 8px;
    border-radius:4px;
    border:1px solid rgba(239,68,68,.35);
    background:rgba(127,29,29,.25);
    color:#f87171;
    font-size:9px;
    font-family:'JetBrains Mono',monospace;
    font-weight:900;
    text-transform:uppercase;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.vault-details-box{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    background:transparent;
    border:none;
    border-radius:0;
    padding:24px 0;
    margin:0;
}

.vault-detail-action{
    grid-column:1 / -1;
    border-top:1px solid rgba(255,255,255,.05);
    padding-top:20px;
    text-align:right;
}

.vault-detail-title{
    color:#737373;
    font-size:10px;
    font-family:'JetBrains Mono',monospace;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.vault-detail-text{
    font-size:12px;
    color:#e5e5e5;
    line-height:1.6;
}

.vault-detail-action{
    grid-column:1 / -1;
    display:flex;
    justify-content:flex-end;
    border-top:1px solid rgba(255,255,255,.05);
    padding-top:12px;
}

.vault-extract-btn{
    color:#f59e0b;
    font-size:10px;
    font-family:'JetBrains Mono',monospace;
    font-weight:900;
    letter-spacing:.08em;
    background:transparent;
    border:none;
    cursor:pointer;
}

.vault-details-box > div:nth-child(2){
    border-left:1px solid rgba(255,255,255,.05);
    padding-left:40px;
}

.vault-detail-action{
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

#panel-password input[type="password"],
#panel-email input[type="email"]{
    background:#0a0a0f !important;
    border:1px solid #262626 !important;
    color:#e5e5e5 !important;
    box-shadow:none !important;
    outline:none !important;
}

#panel-password input[type="password"]:hover,
#panel-password input[type="password"]:focus,
#panel-email input[type="email"]:hover,
#panel-email input[type="email"]:focus{
    background:#0a0a0f !important;
    border-color:#f59e0b !important;
    color:#e5e5e5 !important;
    box-shadow:0 0 0 1px rgba(245,158,11,.25) !important;
    outline:none !important;
}

.scroller-none::-webkit-scrollbar{
    display:none
}

.scroller-none{
    -ms-overflow-style:none;
    scrollbar-width:none
}

.chrono-inv-table{
    min-width:860px
}

.chrono-card-link a{
    color:#f59e0b
}

.chrono-card-link a:hover{
    color:#fcd34d
}

.chrono-action-btn{
    display:inline-flex;
    align-items:center;
    gap:.375rem;
    padding:.375rem .75rem;
    background:#0a0a0f;
    border:1px solid rgba(245,158,11,.3);
    color:#f59e0b;
    border-radius:.375rem;
    font:900 10.5px Cinzel,serif;
    text-transform:uppercase;
    letter-spacing:.08em
}

.chrono-action-btn:hover{
    background:#111116;
    color:#fff
}

.chrono-danger{
    border-color:rgba(239,68,68,.35);
    color:#f87171
}

.chrono-danger:hover{
    background:rgba(127,29,29,.35)
}

.chrono-social-panel{
    background:#050508;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:26px;
    box-shadow:0 18px 45px rgba(0,0,0,.35)
}

.chrono-social-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:16px;
    margin-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.08)
}

.chrono-social-title{
    font:900 16px Cinzel,serif;
    letter-spacing:.04em;
    color:#f5f5f5;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:8px
}

.chrono-social-title span{
    color:#facc15
}

.chrono-social-count{
    font:800 11px JetBrains Mono,monospace;
    color:#9ca3af;
    background:#09090f;
    border:1px solid rgba(255,255,255,.12);
    border-radius:6px;
    padding:4px 10px
}

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

.chrono-social-row{
    background:#09090f;
    border:1px solid rgba(255,255,255,.035);
    border-radius:10px;
    min-height:64px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    transition:.18s
}

.chrono-social-row:hover{
    border-color:rgba(245,158,11,.25);
    background:#0b0b12
}

.chrono-social-left{
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0
}

.chrono-social-avatar{
    width:38px;
    height:38px;
    border-radius:999px;
    background:#050508;
    border:1px solid rgba(255,255,255,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex-shrink:0;
    position:relative
}

.chrono-social-avatar img{
    position:absolute;
    left:50%;top:50%;
    width:50px;
    height:50px;
    object-fit:none;
    image-rendering:pixelated;
    transform:translate(-50%,-56%)
}

.chrono-social-name{
    font:900 13px DM Sans,system-ui,sans-serif;
    color:#22d3ee;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:190px
}

.chrono-social-name a{
    color:#22d3ee!important;
    text-decoration:none!important
}
.chrono-social-job{
    font:500 11px JetBrains Mono,monospace;
    color:#787887;
    margin-top:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:190px
}

.chrono-social-right{
    text-align:right;
    flex-shrink:0
}

.chrono-social-level{
    display:inline-flex;
    align-items:center;
    border:1px solid rgba(255,255,255,.75);
    border-radius:5px;
    padding:2px 8px;
    color:#fff;
    font:800 10px JetBrains Mono,monospace;
    line-height:1
}

.chrono-social-guild{
    font:800 10px DM Sans,system-ui,sans-serif;
    color:#facc15;
    margin-top:7px;
    max-width:90px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.chrono-social-state{
    margin-top:6px;
    display:flex;
    justify-content:flex-end
}

.chrono-social-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.65);
    display:inline-block
}

.chrono-social-dot.online{
    background:#10b981;
    border-color:#10b981;
    box-shadow:0 0 0 3px rgba(16,185,129,.12)
}

.chrono-social-dot.offline{
    background:transparent
}

.chrono-social-empty{
    font:500 12px DM Sans,system-ui,sans-serif;
    color:#6b7280;
    font-style:italic;
    padding:10px 0
}

#inventory-search,
.inventory-search {
    background: rgba(5,5,8,.88) !important;
    color: #d4d4d8 !important;

    border: 1px solid rgba(245,158,11,.35) !important;

    transition: all .18s ease;
}

#inventory-search:hover,
.inventory-search:hover {
    border-color: rgba(245,158,11,.65) !important;
}

#inventory-search:focus,
.inventory-search:focus {
    background: rgba(5,5,8,.95) !important;
    color: #ffffff !important;

    border-color: #f59e0b !important;

    box-shadow:
        0 0 0 1px rgba(245,158,11,.35),
        0 0 16px rgba(245,158,11,.12);

    outline: none !important;
}

#inventory-search:-webkit-autofill,
#inventory-search:-webkit-autofill:hover,
#inventory-search:-webkit-autofill:focus {
    -webkit-text-fill-color: #d4d4d8 !important;

    -webkit-box-shadow:
        0 0 0px 1000px rgba(5,5,8,.95) inset !important;

    transition: background-color 99999s ease-in-out 0s;
}

#inv-search-input,
#inv-search-input:focus,
#inv-search-input:active {
    background-color: #0a0a0f !important;
    color: #f5f5f5 !important;
    outline: none !important;
}

#inv-search-input:-webkit-autofill,
#inv-search-input:-webkit-autofill:hover,
#inv-search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f5f5f5 !important;
    -webkit-box-shadow: 0 0 0 1000px #0a0a0f inset !important;
    box-shadow: 0 0 0 1000px #0a0a0f inset !important;
}

#inv-search-input {
    border-color: rgba(245,158,11,.25) !important;
}

#inv-search-input:hover {
    border-color: rgba(245,158,11,.55) !important;
}

#inv-search-input:focus,
#inv-search-input:active {
    border-color: #f59e0b !important;
    box-shadow:
        0 0 0 1px rgba(245,158,11,.35),
        0 0 14px rgba(245,158,11,.12) !important;
}

.chrono-ranking-page{
    max-width:1280px;
    margin:0 auto;
    padding:140px 16px 64px;
    color:#d4d4d8;
}

.chrono-ranking-head{
    position:relative;
    background:#050508;
    border:1px solid rgba(245,158,11,.18);
    border-radius:22px;
    padding:26px;
    margin-bottom:24px;
    box-shadow:0 22px 55px rgba(0,0,0,.38);
    overflow:hidden;
}

.chrono-ranking-head:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg,transparent,#f59e0b,transparent);
}

.chrono-ranking-title{
    font:900 26px Cinzel,Georgia,serif;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#f5f5f5;
    margin:0;
}

.chrono-ranking-title span{
    color:#f59e0b;
}

.chrono-ranking-subtitle{
    margin:7px 0 0;
    color:#787887;
    font:500 13px "DM Sans",system-ui,sans-serif;
}

.chrono-ranking-summary{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.chrono-summary-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 11px;
    background:#0a0a0f;
    border:1px solid rgba(245,158,11,.20);
    border-radius:999px;
    color:#d4d4d8;
    font:900 10px "JetBrains Mono",monospace;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.chrono-summary-pill strong{
    color:#f59e0b;
}

.chrono-filter-card{
    background:#050508;
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;
    padding:20px 22px;
    margin-bottom:24px;
    box-shadow:0 18px 45px rgba(0,0,0,.34);
}

.chrono-filter-form{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}

.chrono-field{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:280px;
    flex:1;
}

.chrono-field label{
    font:900 10px "JetBrains Mono",monospace;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#f59e0b;
}

.chrono-field select{
    width:100%;
    height:38px !important;
    background:#09090f !important;
    border:1px solid rgba(245,158,11,.22) !important;
    border-radius:10px !important;
    color:#f5f5f5 !important;
    padding:0 12px !important;
    font:700 12px "DM Sans",system-ui,sans-serif !important;
    outline:none !important;
    box-sizing:border-box !important;
}

.chrono-field select:focus{
    border-color:#f59e0b !important;
    box-shadow:0 0 0 1px rgba(245,158,11,.32),0 0 14px rgba(245,158,11,.10) !important;
}

.chrono-filter-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.chrono-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 16px;
    border-radius:10px;
    border:1px solid rgba(245,158,11,.28);
    background:#0a0a0f;
    color:#f59e0b;
    font:900 11px Cinzel,Georgia,serif;
    text-transform:uppercase;
    letter-spacing:.08em;
    cursor:pointer;
    text-decoration:none !important;
}

.chrono-btn:hover{
    background:#111116;
    color:#fff;
    border-color:rgba(245,158,11,.55);
}

.chrono-btn-primary{
    background:linear-gradient(90deg,#d97706,#f59e0b);
    color:#050508 !important;
    border-color:#f59e0b;
}

.chrono-btn-primary:hover{
    filter:brightness(1.08);
    color:#050508 !important;
}

.chrono-table-wrap{
    overflow:auto;
    background:#050508;
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.34);
}

.chrono-ranking-table{
    width:100%;
    min-width:1040px;
    border-collapse:collapse;
    font-size:12px;
}

.chrono-ranking-table th{
    background:#09090f;
    color:#f59e0b;
    padding:14px 12px;
    text-align:left;
    border-bottom:1px solid rgba(255,255,255,.07);
    font:900 10px "JetBrains Mono",monospace;
    text-transform:uppercase;
    letter-spacing:.08em;
    white-space:nowrap;
}

.chrono-ranking-table td{
    padding:13px 12px;
    border-bottom:1px solid rgba(255,255,255,.04);
    color:#d4d4d8;
    vertical-align:middle;
    white-space:nowrap;
}

.chrono-ranking-table tr:hover td{
    background:#0b0b12;
}

.chrono-ranking-table a{
    color:#22d3ee !important;
    text-decoration:none !important;
    font-weight:800;
}

.chrono-ranking-table a:hover{
    color:#67e8f9 !important;
    text-decoration:underline !important;
}

.chrono-top-row td{
    background:linear-gradient(90deg,rgba(245,158,11,.10),rgba(5,5,8,0)) !important;
}

.chrono-rank-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:48px;
    height:30px;
    padding:0 9px;
    border-radius:999px;
    font:900 11px "JetBrains Mono",monospace;
    box-sizing:border-box;
}

.chrono-rank-first{
    background:linear-gradient(90deg,#fbbf24,#f59e0b);
    color:#050508;
    box-shadow:0 0 18px rgba(245,158,11,.22);
}

.chrono-rank-second{
    background:linear-gradient(90deg,#e5e7eb,#94a3b8);
    color:#050508;
}

.chrono-rank-third{
    background:linear-gradient(90deg,#d97706,#92400e);
    color:#fff7ed;
}

.chrono-rank-normal{
    background:#09090f;
    color:#f59e0b;
    border:1px solid rgba(245,158,11,.22);
}

.chrono-char-name{
    font-weight:900;
    color:#f5f5f5;
}

.chrono-exp-text{
    color:#fbbf24;
    font-weight:900;
    font-family:"JetBrains Mono",monospace;
}

.chrono-none, .not-applicable{
    color:#6b7280 !important;
    font-style:italic;
}

.chrono-none{
    color:#6b7280 !important;
    font-style:italic;
}

.chrono-name-text{
    font-weight:900;
    color:#f5f5f5;
}

.chrono-job-text{
    color:#d4d4d8;
    font-weight:800;
}

.chrono-value-text{
    color:#fbbf24;
    font-weight:900;
    font-family:"JetBrains Mono",monospace;
}

.chrono-level-text{
    color:#f5f5f5;
    font-weight:900;
    font-family:"JetBrains Mono",monospace;
}

.chrono-none,.not-applicable{
    color:#6b7280 !important;
    font-style:italic;
}

.chrono-guild-emblem{
    width:26px;
    height:26px;
    border-radius:6px;
    background:#09090f;
    border:1px solid rgba(255,255,255,.10);
    object-fit:contain;
    max-width: none !important;

}

.chrono-card-job{
    margin-top:5px;
    color:#787887;
    font:800 10px "JetBrains Mono",monospace;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.chrono-mobile-list{
    display:none;
    gap:14px;
}

.chrono-rank-card{
    background:#050508;
    border:1px solid rgba(255,255,255,.07);
    border-radius:16px;
    padding:16px;
    box-shadow:0 12px 35px rgba(0,0,0,.30);
}

.chrono-rank-card.top-card{
    border-color:rgba(245,158,11,.30);
    box-shadow:0 16px 45px rgba(245,158,11,.08),0 12px 35px rgba(0,0,0,.30);
}

.chrono-rank-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.06);
    margin-bottom:12px;
}

.chrono-card-name{
    font:900 15px Cinzel,Georgia,serif;
    color:#f5f5f5;
    text-transform:uppercase;
    letter-spacing:.04em;
    line-height:1.25;
}

.chrono-card-name a{
    color:#f5f5f5 !important;
    text-decoration:none !important;
}

.chrono-card-name a:hover{
    color:#f59e0b !important;
}

.chrono-card-sub{
    margin-top:5px;
    color:#787887;
    font:800 10px "JetBrains Mono",monospace;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.chrono-card-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.chrono-card-stat{
    background:#09090f;
    border:1px solid rgba(255,255,255,.05);
    border-radius:10px;
    padding:10px;
    min-width:0;
}

.chrono-card-stat label{
    display:block;
    color:#787887;
    font:900 9px "JetBrains Mono",monospace;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:4px;
}

.chrono-card-stat span{
    display:block;
    color:#d4d4d8;
    font:800 12px "DM Sans",system-ui,sans-serif;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.chrono-card-stat a{
    color:#22d3ee !important;
    text-decoration:none !important;
    font-weight:900;
}

.chrono-empty{
    background:#050508;
    border:1px dashed rgba(255,255,255,.12);
    border-radius:18px;
    padding:38px 18px;
    text-align:center;
    color:#787887;
    font:700 13px "DM Sans",system-ui,sans-serif;
}

.chrono-empty a{
    color:#f59e0b !important;
}

.ci-wrap,
.mw {
  max-width: 100% !important;
}

.ci-wrap *,
.mw * {
  box-sizing: border-box !important;
}

#ci-table-wrap,
#mw-table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#ci-table-wrap table,
#mw-table-wrap table {
  width: 100% !important;
}

.ci-modal-open,
.mw-modal-open {
  overflow: hidden !important;
}

#ci-modal-content table,
#mw-modal-content table {
  width: 100% !important;
}

.chrono-serverinfo {
  background-color: #050508;
  color: #dbdbe3;
  overflow-x: hidden;
  min-height: 100vh;
}

.chrono-serverinfo, .chrono-serverinfo * {
  box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #050508;
}
::-webkit-scrollbar-thumb {
    background: #191922;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #f59e0b;
}

/* Grid glow helper overlay */
.bg-grid-glow {
    background-size: 30px 30px;
    background-image: linear-gradient(to right, rgba(245, 158, 11, 0.02) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(245, 158, 11, 0.02) 1px, transparent 1px);
}

.glow-gold {
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

/* Standalone HTML used a few non-standard Tailwind colors. These aliases keep the 1:1 appearance. */
.chrono-serverinfo .bg-neutral-850 { background-color: #15151d; }
.chrono-serverinfo .bg-neutral-905\/40 { background-color: rgba(12, 12, 18, 0.4); }
.chrono-serverinfo .border-neutral-850 { border-color: #15151d; }
.chrono-serverinfo .border-neutral-750 { border-color: #333342; }
.chrono-serverinfo .text-neutral-550 { color: #6f6f7a; }
.chrono-serverinfo .border-neutral-905\/40 { border-color: rgba(12, 12, 18, 0.4); }

/* Keep fixed overlays above FluxCP theme containers. */
#toast-container, #lightbox-modal { z-index: 99999; }


.chrono-emblem{
    max-width:none !important;
    width:24px;
    height:24px;
}

.mw-desc-scroll::-webkit-scrollbar{
    width:6px;
}

.mw-desc-scroll::-webkit-scrollbar-track{
    background:#08080c;
}

.mw-desc-scroll::-webkit-scrollbar-thumb{
    background:#f59e0b;
    border-radius:999px;
}

.mw-desc-scroll{
    scrollbar-width:thin;
    scrollbar-color:#f59e0b #08080c;
}


.ip-country-wrap{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.ip-country-wrap img{
    border-radius:2px;
    box-shadow:0 0 2px rgba(0,0,0,.3);
}

.ip-flag-wrap{
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    vertical-align:middle;
    position:relative;
}

.ip-flag-wrap img{
    display:block;
    width:16px;
    height:12px;
    flex:0 0 auto;
}

.ip-flag-wrap a{
    display:inline-block;
    line-height:16px;
}

.ip-flag-tooltip{
    visibility:hidden;
    opacity:0;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:100%;
    margin-bottom:6px;
    background:#222;
    color:#fff;
    padding:4px 8px;
    border-radius:4px;
    font-size:12px;
    white-space:nowrap;
    z-index:9999;
}

.ip-flag-wrap:hover .ip-flag-tooltip{
    visibility:visible;
    opacity:1;
}

#ci-live-script pre {
    background: #050508 !important;
    color: #e4e4ec !important;
    border: 1px solid rgba(245,158,11,.25) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    white-space: pre-wrap !important;
}

#ci-live-script {
    color: #e4e4ec !important;
}

#ci-live-script .rounded-xl {
    background: #050508 !important;
}

.chrono-page-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 140px 24px 64px;
    color: #d4d4d8;
}

.chrono-page-head {
    position: relative;
    background: #050508;
    border: 1px solid rgba(245,158,11,.18);
    border-radius: 22px;
    padding: 28px 30px;
    margin-bottom: 24px;
    box-shadow: 0 22px 55px rgba(0,0,0,.38);
    overflow: hidden;
}

.chrono-page-head::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f59e0b, transparent);
}

.chrono-page-title {
    font: 900 26px Cinzel, Georgia, serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #f5f5f5;
    margin: 0;
}

.chrono-page-title span { color: #f59e0b; }
.chrono-page-sub { margin: 8px 0 0; color: #787887; font: 500 13px "DM Sans",system-ui,sans-serif; }
.chrono-page-info { color: #787887; font: 500 12px "JetBrains Mono",monospace; margin: 0 0 14px; }

.chrono-section-head { margin: 28px 0 14px; }
.chrono-section-title { font: 900 14px Cinzel,Georgia,serif; text-transform: uppercase; letter-spacing: .08em; color: #d4d4d8; margin: 0; display: flex; align-items: center; gap: 10px; }
.chrono-section-title span { font: 800 11px "JetBrains Mono",monospace; color: #71717a; background: #09090f; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 3px 8px; }

.chrono-stat-card { background: #09090f; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.chrono-stat-label { font: 900 10px "JetBrains Mono",monospace; text-transform: uppercase; letter-spacing: .08em; color: #787887; }
.chrono-stat-value { font: 900 20px "JetBrains Mono",monospace; color: #f59e0b; }

.chrono-pager { margin-top: 16px; display: flex; justify-content: center; }

.chrono-input { width: 100%; height: 38px !important; background: #09090f !important; border: 1px solid rgba(245,158,11,.22) !important; border-radius: 10px !important; color: #f5f5f5 !important; padding: 0 12px !important; font: 700 12px "DM Sans",system-ui,sans-serif !important; outline: none !important; box-sizing: border-box !important; }
.chrono-input:focus { border-color: #f59e0b !important; box-shadow: 0 0 0 1px rgba(245,158,11,.32) !important; }

.chrono-shop-card { background: #050508; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; overflow: hidden; transition: .2s; display: flex; flex-direction: column; }
.chrono-shop-card:hover { border-color: rgba(245,158,11,.30); box-shadow: 0 16px 40px rgba(245,158,11,.06); }
.chrono-shop-img-wrap { background: #09090f; display: flex; align-items: center; justify-content: center; padding: 20px; border-bottom: 1px solid rgba(255,255,255,.05); min-height: 100px; }
.chrono-shop-img-wrap img { max-height: 80px; max-width: 100%; object-fit: contain; }
.chrono-shop-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.chrono-shop-name { font: 900 14px Cinzel,Georgia,serif; text-transform: uppercase; color: #f5f5f5; margin: 0; line-height: 1.3; }
.chrono-shop-name a { color: #f5f5f5 !important; text-decoration: none !important; }
.chrono-shop-name a:hover { color: #f59e0b !important; }
.chrono-shop-qty { color: #f59e0b; margin-right: 6px; font-family: "JetBrains Mono",monospace; }
.chrono-shop-info { font: 400 12px "DM Sans",system-ui,sans-serif; color: #787887; margin: 0; line-height: 1.5; flex: 1; }
.chrono-shop-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.05); margin-top: auto; }
.chrono-shop-cost { font: 900 13px "JetBrains Mono",monospace; color: #fbbf24; }

@media (max-width: 768px) {
    .chrono-page-wrap { padding: 110px 16px 48px; }
    .chrono-page-head { padding: 20px; }
    .chrono-page-title { font-size: 20px; }
}

.chrono-nav-card {
    background: #050508;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 18px 16px;
    transition: border-color .18s, box-shadow .18s, transform .18s;
    cursor: pointer;
    height: 100%;
}
.chrono-nav-card:hover {
    border-color: rgba(245,158,11,.35);
    box-shadow: 0 12px 32px rgba(245,158,11,.07);
    transform: translateY(-2px);
}
.chrono-nav-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 10px;
}
.chrono-nav-label {
    font: 900 12px Cinzel, Georgia, serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #f5f5f5;
    margin-bottom: 6px;
}
.chrono-nav-desc {
    font: 400 11px "DM Sans", system-ui, sans-serif;
    color: #71717a;
    line-height: 1.4;
}