.hidden{

display:none!important;

}

.flex{

display:flex;

}

.grid{

display:grid;

}

.center{

display:flex;

justify-content:center;

align-items:center;

}

.w-100{

width:100%;

}

.text-center{

text-align:center;

}

.mt-1{margin-top:8px;}
.mt-2{margin-top:16px;}
.mt-3{margin-top:24px;}
.mt-4{margin-top:32px;}


/* =========================================================
   THEABS - GLOBAL ARCTIC CYAN ACCENT THEME
   Accent: var(--primary)
   All semantic colors resolve through theme variables so the
   same UI remains readable in both light and dark modes.
========================================================= */

:where(button, .btn, .nav-link, .icon-button, .pagination-button,
       .tab, .filter-tab, .post-tab, input, textarea, select):focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
}

:where(input, textarea, select):focus{
    border-color:var(--primary)!important;
    box-shadow:0 0 0 3px var(--focus-ring)!important;
}

.btn-primary,
button.btn-primary{
    background:var(--primary);
    color:var(--primary-contrast);
    border-color:var(--primary);
}

.btn-primary:hover,
button.btn-primary:hover{
    background:var(--primary-hover);
    border-color:var(--primary-hover);
    color:var(--primary-contrast);
}

.btn-primary:active,
button.btn-primary:active{
    background:var(--primary-active);
    border-color:var(--primary-active);
}

.nav-link.active{
    background:var(--primary);
    color:var(--primary-contrast);
}

a:not(.btn):hover{
    color:var(--primary);
}

::selection{
    background:var(--primary);
    color:var(--primary-contrast);
}

/* Ruby is an accent, not the page background. */
.badge-primary,
.status-primary,
.text-primary{
    color:var(--primary)!important;
}

.bg-primary{
    background:var(--primary)!important;
    color:var(--primary-contrast)!important;
}

.border-primary{
    border-color:var(--primary)!important;
}


/* RUBY INTERACTION STATES */
:where(.card,.stat-card,.activity-item,.nav-link,.tab,.filter-tab,.post-tab,.btn,.icon-button,.pagination-button,.user-menu-action):focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
:where(.card,.stat-card,.activity-item,.post-upload-zone):hover{border-color:var(--accent-border);}
:where(.nav-link,.tab,.filter-tab,.post-tab):hover{color:var(--primary);}