:root {
    --text: #e0e0e0;
    --main-color: #ff9900;
    --accent-1: #192230;
    --text-white: #ffffff;
    --card: #1e2a38;
    --card-dark: #192230;
    --card-light: #202d3c;
    --text-bright: #ff9900;
    --text-dark: #ab1c1c;
    --success: #1cbb8c;
    --danger: #dc3545;
    --info: #17a2b8;
    /* Game colors */
    --ets2-color: #0000ff;
    --ats-color: #ff0000;
    /* Username colors */
    --bronze: #cd7f32;
    --bronze-light-shadow: #8c5a21;
    --bronze-dark-shadow: #513a15;
    --silver: #c0c0c0;
    --silver-light-shadow: #8c8c8c;
    --silver-dark-shadow: #474747;
    --gold: #ffb338;
    --gold-light-shadow: #77571d;
    --gold-dark-shadow: #3e2904;
    --diamond: #b9f2ff;
    --diamond-light-shadow: #8cc8d9;
    --diamond-dark-shadow: #77c0d0;
    --bs-body-font-size: 0.813rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.3;
    --bs-border-color: #636363;
    --text-muted: rgba(255, 255, 255, 0.7);
}

.text-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 1);
}

* {
    color: var(--text);
}

a,
a:hover {
    text-decoration: none;
}

.small,
small {
    font-size: 90%;
}

.main {
    background: #192230;
}

.wrapper,
body[data-theme="dark"] .wrapper,
body[data-theme="light"] .wrapper {
    background: #192230;
}

.badge {
    --bs-badge-font-weight: 300;
}

.card {
    background-color: var(--card);
    border-radius: 0.325rem;
}

.card-header {
    background-color: var(--card);
    border-radius: 0.325rem 0.325rem 0 0;
}

.card-header:first-child {
    background-color: var(--card);
    border-radius: 0.325rem 0.325rem 0 0;
}

.card-footer {
    background-color: var(--card);
}

.card-footer:last-child {
    background-color: var(--card);
    border-radius: 0 0 0.325rem 0.325rem;
}

/*
  COLORS GAME ICONS
*/

.icon-option {
    height: 35px !important;
}

.icon-option i {
    line-height: 20.994px !important;
    vertical-align: bottom !important;
}

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

.premium-icon {
    color: #ff9900 !important;
    transform-style: preserve-3d;
    animation: rotatePremiumIcon 10s infinite linear;
}

@keyframes rotatePremiumIcon {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.bg-premium {
    background-color: #ab1c1c !important;
}

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

.text-bright {
    color: var(--text-bright) !important;
}

.text-dark {
    color: rgb(112, 128, 150) !important;
}

.pointer {
    cursor: pointer;
}

.navbar {
    background-color: var(--main-color);
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
    color: var(--text-white);
}

.navbar-brand {
    color: #fff;
    font-style: italic;
    text-shadow: 0 0 15px rgba(255, 255, 255, 1);
    font-weight: 400;
}

.bg-light {
    background-color: #192230;
}

.hamburger,
.hamburger:after,
.hamburger:before {
    background: var(--text-white);
}

.nav-item .indicator {
    background-color: var(--text-white);
    color: #000;
}

.nav-flag {
    padding: 0.1rem 0.5rem;
    color: var(--text-white);
}

.nav-icon {
    padding: 0 0.5rem;
}

.nav-link {
    color: #fff;
}

.nav-item .active {
    color: var(--text-bright);
    font-weight: 900;
}

.nav-link:hover {
    color: var(--text-bright);
    font-weight: 900;
}

.nav-link:focus {
    color: var(--main-bright);
    font-weight: 900;
}

.btn {
    color: var(--text-white);
}

.btn-steam {
    background-color: #5c7e10;
}

.text-steam {
    color: #171a21;
}

.text-steam-green {
    color: #5c7e10;
}

.btn-discord {
    background-color: #5865f2;
}
.text-discord {
    color: #5865f2;
}
.bg-twitch {
    background-color: #6441a5;
}
.text-twitch {
    color: #6441a5 !important;
}

.btn-primary {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary:hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--main-color);
    border-color: var(--main-color);
    opacity: 0.5;
}

.btn-primary:hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.tab .nav-tabs .nav-link {
    background: var(--main-color) 5c;
    color: var(--text-white);
}

.tab .nav-tabs .nav-link.active {
    background: var(--main-color);
    color: var(--text-white);
}

.tab .nav-tabs .nav-link:hover:not(.active) {
    color: var(--text-white);
}

a {
    color: unset;
}

a:hover {
    color: unset;
}

.page-item.active .page-link {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.invisibleScrollbar::-webkit-scrollbar {
    display: none;
}

.invisibleScrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.list-group-item {
    background-color: #48505b;
}

.list-group-item.active {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: var(--text-white);
}

/*--------------------------------
    28. INFORMATION LINE LIST
--------------------------------*/
.information-line-list .information-line:last-child {
    margin-bottom: 0;
}

/*-----------------------------
      29. INFORMATION LINE
  -----------------------------*/
.information-line {
    display: -ms-flexbox;
    display: flex;
}

.information-line .information-line-title,
.information-line .information-line-text {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4285714286em;
}

.information-line .information-line-title {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 40%;
    color: #9aa4bf;
}

.information-line .information-line-text .bold {
    font-weight: 700;
    display: flex;
}

.information-line-header {
    width: 100%;
    text-align: center;
    font-weight: 800;
    font-size: 0.875rem;
    display: flex;
}

.information-line-header:before,
.information-line-header:after {
    flex: 1;
    content: "";
    border-bottom: solid 2px;
    margin: auto 0.25em;
}

/*---------------------------------
      30. INFORMATION BLOCK LIST
  ---------------------------------*/
.information-block-list .information-block {
    margin-bottom: 26px;
}

.information-block-list .information-block:last-child {
    margin-bottom: 0;
}

/*-----------------------------
      31. INFORMATION BLOCK
  -----------------------------*/
.information-block .information-block-title {
    font-size: 0.875rem;
    font-weight: 700;
}

.information-block .information-block-text {
    margin-top: 10px;
    font-size: 0.875rem;
    line-height: 1.7142857143em;
    font-weight: 500;
}

.timeline-item:before {
    border: 3px solid var(--main-color);
}

body {
    font-family: "Rajdhani", sans-serif;
    font-family: "Quantico", sans-serif;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

body::-webkit-scrollbar {
    display: none;
}

.form-check-input:checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.job-border-cancelled {
    border-left: 3px solid yellow !important;
    border-color: none;
}

.job-border-delivered {
    border-left: 3px solid lime !important;
}

.job-border-denied {
    border-left: 3px solid red !important;
}

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

.bg-progress-custom {
    --bs-bg-opacity: 1;
    background-color: var(--main-color) !important;
}

.text-custom {
    color: rgba(255, 0, 0, 0.5) !important;
}

.table {
    font-size: small;
}

.table-finance {
    color: var(--text-white) !important;
    font-size: 13px !important;
}

.table-xs td {
    padding: 2px !important;
}

.badge-ticket-driver {
    --bs-badge-font-weight: 400 !important;
    background-color: #006a4e !important;
}

.badge-ticket-developer {
    --bs-badge-font-weight: 400 !important;
    background-color: #7c4dff !important;
}

.badge-ticket-community-manager {
    --bs-badge-font-weight: 400 !important;
    background-color: #2554c7 !important;
}

.badge-ticket-support-manager {
    --bs-badge-font-weight: 400 !important;
    background-color: #007c80 !important;
}

.badge-ticket-support {
    --bs-badge-font-weight: 400 !important;
    background-color: var(--main-color) !important;
}

/*
    CK EDITOR
*/

/*
    CUSTOM CSS LEGACY
*/

.vtlog-table {
    font-size: 13px !important;
    font-weight: 400 !important;
    margin-bottom: 0px !important;
}

.vtlog-table tr td:first-child {
    padding-left: 15px !important;
}

.vtlog-table tr td:last-child {
    padding-right: 15px !important;
}

.vtlog-table thead tr td {
    color: white !important;
    font-weight: 700 !important;
}

.vtlog-table .sortable {
    color: #2cb1da !important;
    cursor: pointer !important;
}

.vtlog-table td {
    font-size: 12px !important;
}

@media (max-width: 768px) {
    .vtlog-table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    .vtlog-table td {
        white-space: nowrap !important;
    }

    .responsive {
        overflow-x: auto !important;
    }
}

.avatar-ingame {
    border: 2px ridge #e3ffc2;
    margin-left: 2px;
}

.avatar-online {
    border: 2px ridge #69c6ea;
    margin-left: 2px;
}

.avatar-offline {
    border: 2px ridge #8e8f8f;
    margin-left: 2px;
    filter: brightness(75%);
}

.badge-vtlog {
    color: #ced4da;
}

.bg-vtlog {
    background-color: var(--main-color);
}

textarea {
    resize: none;
}

.input-group-discord {
    color: var(--text-white);
    background-color: #5865f2 !important;
}

.input-group-patreon {
    color: var(--text-white);
    background-color: var(--main-color) !important;
}

.blinking-icon {
    animation: blink 2s infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.custom-vh-100 {
    height: calc(100vh - 140px);
}

.custom-icon-option {
    color: var(--main-color);
    cursor: pointer;
}

.custom-icon-option:hover {
    color: var(--main-color);
}

.vtlog-gem-icon-color {
    color: #b9f2ff !important;
}

.premium-menu-body {
    cursor: pointer;
    border: 1px solid var(--main-color);
    border-radius: 0.2rem;
}

.premium-menu-body:hover {
    background-color: #2d3846 !important;
}

.userSearch {
    width: 225px !important;
}

.card-dark {
    background-color: var(--card-dark);
}

.breadcrumb-item {
    color: var(--main-color) !important;
}

.breadcrumb-item.active {
    color: var(--text-bright) !important;
}

.sidebar-content,
body[data-theme="dark"] .sidebar-content,
body[data-theme="light"] .sidebar-content {
    background-color: #1e2a38;
}

body[data-theme="dark"] .sidebar-link,
body[data-theme="dark"] a.sidebar-link {
    background-color: #1e2a38;
}

.sidebar,
body[data-theme="dark"] .sidebar,
body[data-theme="light"] .sidebar {
    background: #1e2a38;
    z-index: 1049;
}

.topbar {
    background: #192230;
    z-index: 2;
}

.content-breadcrumb {
    background-color: #202d3c;
}

.btn-check:active + .btn,
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:active {
    background-color: #202d3c;
}

.card-container {
    display: flex;
    justify-content: space-between; /* Aligns cards to the start, end, and evenly spaces the rest */
    align-items: flex-end; /* Aligns cards to the bottom */
}

.card-dark-title {
    line-height: 1.1rem !important;
}

.card-tile {
    background-color: #1e2a38;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.35);
}

.pages {
    padding: 0.375rem 0.75rem !important;
}

/* CSS rule to hide the element without emptying the style attribute */
.hidden {
    display: none !important;
}

.card-self-body {
    background: rgba(255, 0, 0, 0.2) !important;
}

.bg-custom-badge {
    --bs-bg-opacity: 1;
    background-color: var(--main-color) !important;
}

.bnw {
    filter: brightness(100%) contrast(100%) grayscale(100%);
}

/*Custom card header*/
.card-header-custom {
    background-image: linear-gradient(45deg, transparent 67%, rgba(255, 153, 0, 0.2) 67%, rgba(255, 153, 0, 0.2) 77%, transparent 77%);
    background-size: 150px 100%;
    background-position: right center;
    background-repeat: no-repeat;
}

.card-header-silver {
    background-image: linear-gradient(45deg, transparent 67%, #c0c0c0 67%, #c0c0c0 77%, transparent 77%);
    background-size: 150px 100%;
    background-position: right center;
    background-repeat: no-repeat;
}

.card-header-gold {
    background-image: linear-gradient(45deg, transparent 67%, #ffb338 67%, #ffb338 77%, transparent 77%);
    background-size: 150px 100%;
    background-position: right center;
    background-repeat: no-repeat;
}

.card-header-diamond {
    background-image: linear-gradient(45deg, transparent 67%, #b9f2ff 67%, #b9f2ff 77%, transparent 77%);
    background-size: 150px 100%;
    background-position: right center;
    background-repeat: no-repeat;
}

.card-header-1 {
    background-image: linear-gradient(45deg, transparent 67%, #ffb338 67%, #ffb338 77%, transparent 77%);
    background-size: 150px 100%;
    background-position: right center;
    background-repeat: no-repeat;
}

.card-header-2 {
    background-image: linear-gradient(45deg, transparent 67%, #c0c0c0 67%, #c0c0c0 77%, transparent 77%);
    background-size: 150px 100%;
    background-position: right center;
    background-repeat: no-repeat;
}

.card-header-3 {
    background-image: linear-gradient(45deg, transparent 67%, #cd7f32 67%, #cd7f32 77%, transparent 77%);
    background-size: 150px 100%;
    background-position: right center;
    background-repeat: no-repeat;
}

/*
    CUSTOM USERNAME COLORS
*/
.username-span {
    display: inline-block;
    vertical-align: middle;
    /* Contains the .bg overlay used by premium username styles (position:absolute);
       without this it falls back to a faraway positioned ancestor and visually
       separates from .fg when the page scrolls. */
    position: relative;
}

.username a:hover {
    cursor: pointer;
}

.username-deleted {
    color: #555555 !important;
    font-weight: 400 !important;
    text-decoration: line-through;
}

.username-banned {
    color: #000 !important;
    font-weight: 400 !important;
    text-decoration: line-through;
}

.username-default {
    color: #ced4da !important;
}

.username-red {
    color: #ff6b6b !important;
    font-weight: 900 !important;
}

.username-neon-red {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #ff6b6b, 1px -1px 0 #ff6b6b, -1px 1px 0 #ff6b6b, 1px 1px 0 #ff6b6b;
}

.username-orange {
    color: #ffa500 !important;
    font-weight: 900 !important;
}

.username-neon-orange {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #ffa500, 1px -1px 0 #ffa500, -1px 1px 0 #ffa500, 1px 1px 0 #ffa500;
}

.username-yellow {
    color: #f7e400 !important;
    font-weight: 900 !important;
}

.username-neon-yellow {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #f7e400, 1px -1px 0 #f7e400, -1px 1px 0 #f7e400, 1px 1px 0 #f7e400;
}

.username-green {
    color: #2ecc71 !important;
    font-weight: 900 !important;
}

.username-neon-green {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #2ecc71, 1px -1px 0 #2ecc71, -1px 1px 0 #2ecc71, 1px 1px 0 #2ecc71;
}

.username-cyan {
    color: #00ffff !important;
    font-weight: 900 !important;
}

.username-neon-cyan {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #00ffff, 1px -1px 0 #00ffff, -1px 1px 0 #00ffff, 1px 1px 0 #00ffff;
}

.username-blue {
    color: #6495ed !important;
    font-weight: 900 !important;
}

.username-neon-blue {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #6495ed, 1px -1px 0 #6495ed, -1px 1px 0 #6495ed, 1px 1px 0 #6495ed;
}

.username-violet {
    color: #ff69b4 !important;
    font-weight: 900 !important;
}

.username-neon-violet {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #ff69b4, 1px -1px 0 #ff69b4, -1px 1px 0 #ff69b4, 1px 1px 0 #ff69b4;
}

.username-magenta {
    color: #ff00ff !important;
    font-weight: 900 !important;
}

.username-neon-magenta {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #ff00ff, 1px -1px 0 #ff00ff, -1px 1px 0 #ff00ff, 1px 1px 0 #ff00ff;
}

.username-purple {
    color: #800080 !important;
    font-weight: 900 !important;
}

.username-neon-purple {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #800080, 1px -1px 0 #800080, -1px 1px 0 #800080, 1px 1px 0 #800080;
}

.username-dark-red {
    color: #cc3333 !important;
    font-weight: 900 !important;
}

.username-neon-dark-red {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #cc3333, 1px -1px 0 #cc3333, -1px 1px 0 #cc3333, 1px 1px 0 #cc3333;
}

.username-dark-orange {
    color: #ff7f00 !important;
    font-weight: 900 !important;
}

.username-neon-dark-orange {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #ff7f00, 1px -1px 0 #ff7f00, -1px 1px 0 #ff7f00, 1px 1px 0 #ff7f00;
}

.username-dark-yellow {
    color: #ffdb58 !important;
    font-weight: 900 !important;
}

.username-neon-dark-yellow {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #ffdb58, 1px -1px 0 #ffdb58, -1px 1px 0 #ffdb58, 1px 1px 0 #ffdb58;
}

.username-dark-green {
    color: #006400 !important;
    font-weight: 900 !important;
}

.username-neon-dark-green {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #006400, 1px -1px 0 #006400, -1px 1px 0 #006400, 1px 1px 0 #006400;
}

.username-dark-blue {
    color: #0074e4 !important;
    font-weight: 900 !important;
}

.username-neon-dark-blue {
    color: var(--accent-1) !important;
    font-weight: 900 !important;
    text-shadow: -1px -1px 0 #0074e4, 1px -1px 0 #0074e4, -1px 1px 0 #0074e4, 1px 1px 0 #0074e4;
}

.username-gradient {
    font-weight: 900 !important;
    font-size: 14px !important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* Gradient 1 - Red to Orange */
.username-gradient-2-text-1 {
    background-image: linear-gradient(to right, #ff6b6b, #ffa500);
}

/* Gradient 2 - Orange to Yellow */
.username-gradient-2-text-2 {
    background-image: linear-gradient(to right, #ffa500, #f7e400);
}

/* Gradient 3 - Yellow to Green */
.username-gradient-2-text-3 {
    background-image: linear-gradient(to right, #f7e400, #2ecc71);
}

/* Gradient 4 - Green to Cyan */
.username-gradient-2-text-4 {
    background-image: linear-gradient(to right, #2ecc71, #00ffff);
}

/* Gradient 5 - Cyan to Light Blue */
.username-gradient-2-text-5 {
    background-image: linear-gradient(to right, #00ffff, #6495ed);
}

/* Gradient 6 - Light Blue to Pink */
.username-gradient-2-text-6 {
    background-image: linear-gradient(to right, #6495ed, #ff00ff);
}

/* Gradient 8 - Magenta to Purple */
.username-gradient-2-text-7 {
    background-image: linear-gradient(to right, #ff00ff, #800080);
}

/* Gradient 9 - Purple to Light Blue */
.username-gradient-2-text-8 {
    background-image: linear-gradient(to right, #800080, #6495ed);
}

/* Gradient 10 - Light Blue to Green */
.username-gradient-2-text-9 {
    background-image: linear-gradient(to right, #6495ed, #2ecc71);
}

/* Gradient 11 - Green to Orange */
.username-gradient-2-text-10 {
    background-image: linear-gradient(to right, #2ecc71, #ffa500);
}

/* Gradient 12 - Orange to Cyan */
.username-gradient-2-text-11 {
    background-image: linear-gradient(to right, #ffa500, #00ffff);
}

/* Gradient 13 - Cyan to Red */
.username-gradient-2-text-12 {
    background-image: linear-gradient(to right, #00ffff, #ff6b6b);
}

/* Gradient 14 - Red to Magenta */
.username-gradient-2-text-13 {
    background-image: linear-gradient(to right, #ff6b6b, #ff00ff);
}

/* Gradient 15 - Magenta to Yellow */
.username-gradient-2-text-14 {
    background-image: linear-gradient(to right, #ff00ff, #f7e400);
}

/* Gradient 1 - Red to Orange to Yellow */
.username-gradient-3-text-1 {
    background-image: linear-gradient(to right, #ff6b6b, #ffa500, #f7e400);
}

/* Gradient 2 - Orange to Yellow to Green */
.username-gradient-3-text-2 {
    background-image: linear-gradient(to right, #ffa500, #f7e400, #2ecc71);
}

/* Gradient 3 - Yellow to Green to Cyan */
.username-gradient-3-text-3 {
    background-image: linear-gradient(to right, #f7e400, #2ecc71, #00ffff);
}

/* Gradient 4 - Green to Cyan to Light Blue */
.username-gradient-3-text-4 {
    background-image: linear-gradient(to right, #2ecc71, #00ffff, #6495ed);
}

/* Gradient 5 - Cyan to Light Blue to Pink */
.username-gradient-3-text-5 {
    background-image: linear-gradient(to right, #00ffff, #6495ed, #ff00ff);
}

/* Gradient 6 - Light Blue to Pink to Magenta */
.username-gradient-3-text-6 {
    background-image: linear-gradient(to right, #6495ed, #ff00ff, #800080);
}

/* Gradient 7 - Red to Yellow to Green */
.username-gradient-3-text-7 {
    background-image: linear-gradient(to right, #ff6b6b, #f7e400, #2ecc71);
}

/* Gradient 8 - Orange to Green to Cyan */
.username-gradient-3-text-8 {
    background-image: linear-gradient(to right, #ffa500, #2ecc71, #00ffff);
}

/* Gradient 9 - Yellow to Cyan to Light Blue */
.username-gradient-3-text-9 {
    background-image: linear-gradient(to right, #f7e400, #00ffff, #6495ed);
}

/* Gradient 10 - Green to Light Blue to Pink */
.username-gradient-3-text-10 {
    background-image: linear-gradient(to right, #2ecc71, #6495ed, #ff00ff);
}

/* Gradient 11 - Cyan to Pink to Magenta */
.username-gradient-3-text-11 {
    background-image: linear-gradient(to right, #00ffff, #ff00ff, #800080);
}

/* Gradient 12 - Red to Green to Cyan */
.username-gradient-3-text-12 {
    background-image: linear-gradient(to right, #ff6b6b, #2ecc71, #00ffff);
}

/* Gradient 13 - Orange to Cyan to Light Blue */
.username-gradient-3-text-13 {
    background-image: linear-gradient(to right, #ffa500, #00ffff, #6495ed);
}

/* Gradient 14 - Yellow to Light Blue to Pink */
.username-gradient-3-text-14 {
    background-image: linear-gradient(to right, #f7e400, #6495ed, #ff00ff);
}

/* Shared rainbow base - gradient scrolls via background-position; each variant
   sets its own gradient direction + matching keyframe. */
.username-rainbow-default,
.username-rainbow-diagonal,
.username-rainbow-radial,
.username-rainbow-inverted {
    font-size: 14px !important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900 !important;
}

.username-rainbow-default {
    background-image: linear-gradient(
        to right,
        #ff0000 0%,
        #ff0000 17%,
        #ff4500 17%,
        #ff4500 34%,
        #ffd700 34%,
        #ffd700 51%,
        #00ff00 51%,
        #00ff00 67%,
        #00bfff 67%,
        #00bfff 83%,
        #ff00ff 83%,
        #ff00ff 100%
    );
    background-size: 200% 100%;
    animation: rainbowSlideRight 5s linear infinite;
}

.username-rainbow-inverted {
    background-image: linear-gradient(
        to left,
        #ff0000 0%,
        #ff0000 17%,
        #ff4500 17%,
        #ff4500 34%,
        #ffd700 34%,
        #ffd700 51%,
        #00ff00 51%,
        #00ff00 67%,
        #00bfff 67%,
        #00bfff 83%,
        #ff00ff 83%,
        #ff00ff 100%
    );
    background-size: 200% 100%;
    animation: rainbowSlideLeft 5s linear infinite;
}

.username-rainbow-diagonal {
    background-image: linear-gradient(
        to bottom right,
        #ff0000 0%,
        #ff0000 17%,
        #ff4500 17%,
        #ff4500 34%,
        #ffd700 34%,
        #ffd700 51%,
        #00ff00 51%,
        #00ff00 67%,
        #00bfff 67%,
        #00bfff 83%,
        #ff00ff 83%,
        #ff00ff 100%
    );
    background-size: 200% 200%;
    animation: rainbowSlideDiagonal 6s linear infinite;
}

.username-rainbow-radial {
    background-image: radial-gradient(
        circle at center,
        #ff0000 0%,
        #ff0000 17%,
        #ff4500 17%,
        #ff4500 34%,
        #ffd700 34%,
        #ffd700 51%,
        #00ff00 51%,
        #00ff00 67%,
        #00bfff 67%,
        #00bfff 83%,
        #ff00ff 83%,
        #ff00ff 100%
    );
    background-size: 200% 200%;
    background-position: 50% 50%;
    animation: rainbowRadialPulse 4.5s ease-in-out infinite;
}

@keyframes rainbowSlideRight {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}
@keyframes rainbowSlideLeft {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}
@keyframes rainbowSlideDiagonal {
    0% {
        background-position: 100% 100%;
    }
    100% {
        background-position: -100% -100%;
    }
}
@keyframes rainbowRadialPulse {
    0%,
    100% {
        background-size: 180% 180%;
    }
    50% {
        background-size: 320% 320%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .username-rainbow-default,
    .username-rainbow-inverted,
    .username-rainbow-diagonal,
    .username-rainbow-radial {
        animation: none;
    }
}

/* Staff role colors - hidden category in the username picker, gated by exact
   role in Markup::username. Mirrors the premium-tier shimmer treatment: wide
   horizontal gradient (dark anchor → tier color → bright pop → second tier
   color → dark anchor) sliding via @keyframes premiumShimmer. */
.username-staff-developer,
.username-staff-support-manager,
.username-staff-support {
    font-weight: 900 !important;
    font-size: 14px !important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    background-size: 200% 100%;
    animation: premiumShimmer 4.5s linear infinite;
}
.username-staff-developer {
    background-image: linear-gradient(90deg, #4a2400 0%, #ff9900 30%, #ffe7b0 50%, #ff0000 70%, #4a0000 100%);
    text-shadow: 0 0 10px rgba(255, 80, 40, 0.3);
}
.username-staff-support-manager {
    background-image: linear-gradient(90deg, #4a2400 0%, #ff9900 30%, #ffd0f5 50%, #fc0fc0 70%, #4a0040 100%);
    text-shadow: 0 0 10px rgba(252, 15, 192, 0.3);
}
.username-staff-support {
    background-image: linear-gradient(90deg, #4a2400 0%, #ff9900 30%, #ffe5ff 50%, #ff6fff 70%, #4a1f4a 100%);
    text-shadow: 0 0 10px rgba(255, 111, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .username-staff-developer,
    .username-staff-support-manager,
    .username-staff-support {
        animation: none;
        background-position: 50% 0;
    }
}

.username-premium-bronze {
    display: inline-block;
    text-transform: uppercase;
}

.username-premium-bronze > span {
    background-clip: text;
    -webkit-background-clip: text;
    color: #363833;
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 1px;
    -webkit-text-stroke: 3px transparent;
}

.username-premium-bronze span.bg {
    position: absolute;
    text-align: center;
    background-image: repeating-linear-gradient(105deg, var(--bronze) 0%, var(--bronze-dark-shadow) 5%, var(--bronze) 12%);
    color: transparent;
    transform: scaleY(1.05);
    transform-origin: top;
}

.username-premium-bronze span.fg {
    position: relative;
    text-align: center;
    background-image: repeating-linear-gradient(5deg, var(--bronze) 0%, var(--bronze-light-shadow) 23%, var(--bronze) 31%);
    color: #1e2127;
    transform: scale(1);
}

/* Premium tier usernames - horizontally-shifting gradient glow.
   Replaces the prior dual-layer metal-gloss trick. The .bg layer (used to
   fake metallic depth) is hidden; the .fg layer carries a wide gradient
   that slides via @keyframes premiumShimmer. */
.username-premium-silver,
.username-premium-gold,
.username-premium-diamond {
    display: inline-block;
    text-transform: uppercase;
}

.username-premium-silver > span,
.username-premium-gold > span,
.username-premium-diamond > span {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 1px;
    text-align: center;
}

.username-premium-silver span.bg,
.username-premium-gold span.bg,
.username-premium-diamond span.bg {
    display: none;
}

.username-premium-silver span.fg,
.username-premium-gold span.fg,
.username-premium-diamond span.fg {
    position: relative;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-size: 200% 100%;
    animation: premiumShimmer 3.5s linear infinite;
}

.username-premium-silver span.fg {
    /* Anchor #8799ae, highlight #f1f7ff. Dark stop derived for shimmer depth. */
    background-image: linear-gradient(90deg, #4d5a6e 0%, #8799ae 30%, #f1f7ff 50%, #8799ae 70%, #4d5a6e 100%);
    animation-duration: 6s;
}

.username-premium-gold span.fg {
    /* Anchor #d4843d, highlight #ffde90. */
    background-image: linear-gradient(90deg, #5e3814 0%, #d4843d 30%, #ffde90 50%, #d4843d 70%, #5e3814 100%);
    animation-duration: 5s;
}

.username-premium-diamond span.fg {
    /* Anchor #4cadd0, highlight #b2f9ff. */
    background-image: linear-gradient(90deg, #1f5a72 0%, #4cadd0 30%, #b2f9ff 50%, #4cadd0 70%, #1f5a72 100%);
    animation-duration: 5s;
}

@keyframes premiumShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .username-premium-silver span.fg,
    .username-premium-gold span.fg,
    .username-premium-diamond span.fg {
        animation: none;
        background-position: 50% 0;
    }
}

.username-staff {
    font-size: 14px !important;
    color: var(--text-white);
    /* Make the text transparent */
    text-shadow: -1px -1px 0 var(--main-color), 1px -1px 0 var(--main-color), -1px 1px 0 var(--main-color), 1px 1px 0 var(--main-color);
    font-weight: 400 !important;
}

.username-image {
    height: 16px;
    width: auto;
    margin-left: 15px;
    margin-bottom: 3px;
}

/* 
    CUSTOM COMPANY NAME COLORS
*/
.vtcname-span {
    line-height: 20px !important;
    vertical-align: middle !important;
}

.vtcname a:hover {
    cursor: pointer;
}

.vtcname-default {
    color: #adb5bd !important;
    font-weight: 400 !important;
}

/*
    CUSTOM AWARDS
*/

.award-gold {
    align-items: center;
    background-color: none;
    border: 0;
    border-radius: 0.2rem;
    display: block;
    line-height: 36px !important;
    height: 36px !important;
    padding: 0.3rem 0.85rem;
    text-align: center;
    white-space: nowrap;
}

.award-gold i {
    color: #d4af37 !important;
    font-size: 26px !important;
}

.award-gold-color {
    color: #d4af37 !important;
}

.award-silver {
    align-items: center;
    background-color: none;
    border: 0;
    border-radius: 0.2rem;
    display: block;
    line-height: 38px !important;
    height: 38px !important;
    padding: 0.3rem 0.85rem;
    text-align: center;
    white-space: nowrap;
}

.award-silver i {
    color: #c0c0c0 !important;
    font-size: 26px !important;
}

.award-silver-color {
    color: #c0c0c0 !important;
}

.award-bronze {
    align-items: center;
    background-color: none;
    border: 0;
    border-radius: 0.2rem;
    display: block;
    line-height: 38px !important;
    height: 38px !important;
    padding: 0.3rem 0.85rem;
    text-align: center;
    white-space: nowrap;
}

.award-bronze i {
    color: #cd7f32 !important;
    font-size: 26px !important;
}

.award-bronze-color {
    color: #cd7f32 !important;
}

.award-default {
    align-items: center;
    background-color: none;
    border: 0;
    border-radius: 0.2rem;
    color: var(--main-color);
    display: block;
    line-height: 38px !important;
    height: 38px !important;
    padding: 0.3rem 0.85rem;
    text-align: center;
    white-space: nowrap;
}

.award-default i {
    font-size: 26px !important;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /* Opacity of 0.5 */
    z-index: 9999;
    /* Ensure it's above other content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.overlay-content {
    position: relative;
    margin-top: 100px;
    font-size: 4em;
}

/* Styles for the container and image */
.overlay-logo {
    position: relative;
    width: 256px;
    height: 256px;
    margin-bottom: 25px;
}

.overlay-logo > img {
    height: 256px;
    width: 256px;
    position: absolute;
    top: 50%;
    left: 0;
    animation: pulse 2s infinite;
    /* transform: translateY(-50%);
    
    /* Adjust animation duration as needed */
}

/* Keyframes for animation */
@keyframes moveRight {
    0% {
        left: -87px;
        /* Initial position outside the container */
    }

    100% {
        left: calc(100px + 87px);
        /* Move to the right of the container */
    }
}

.overlay-content {
    /* Add styling for your processing content here */
    color: var(--text-white) !important;
    font-size: 24px;
}

.select2-container {
    background-color: #192230 !important;
    border: 1px solid #7a828a !important;
    border-radius: 4px;
    height: 35px !important;
}

.select2-container--default .select2-selection--single {
    background-color: #192230 !important;
    border: 0px solid #7a828a !important;
    border-radius: 4px;
    height: 33px !important;
}

.select2-selection__rendered {
    font-size: 14px;
    color: #fff !important;
    height: 31px !important;
    line-height: 31px !important;
}

.select2-results__option {
    background-color: #19222d !important;
    /* height: 28px!important; */
    color: rgba(233, 236, 239, 0.5);
    font-size: 14px;
    padding: 0;
    padding-left: 8px;
    padding-right: 20px;
    /* line-height: 28px; */
    /* max-height: 200px; */
    /* overflow-y: auto; */
    display: block;
}

.select2-results__group {
    /* height: 28px!important; */
    font-size: 14px;
    /* line-height: 28px; */
    color: #ced4da !important;
    cursor: default;
    display: block;
    padding: 6px;
    padding-left: 8px;
    padding-right: 20px;
    padding-top: 15px;
}

.select2-search__field {
    background-color: #19222d !important;
    border: 1px solid #7a828a !important;
    height: 28px !important;
    font-size: 14px;
    padding: 0;
    padding-left: 8px;
    padding-right: 20px;
    line-height: 28px;
}

.select2-search--dropdown {
    display: block;
    background: #19222d !important;
    padding: 4px;
}

.select2-container--default .select2-results__option .select2-results__option {
    padding-left: 1.5em !important;
    line-height: 25px !important;
}

.select2-container--default .select2-results__option .select2-results__option:hover {
    padding-left: 1.75em !important;
    background-color: #2d3846 !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    color: #ff0000;
    padding-right: 5px;
}

.offcanvas {
    z-index: 1051;
}

.offcanvas-backdrop {
    background-color: #000;
    z-index: 1050;
}

.price-sup {
    font-size: 1.538rem;
    vertical-align: baseline;
}

.btn-outline-primary {
    --bs-btn-color: #ff9900;
    --bs-btn-border-color: #ff9900;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #ff9900;
    --bs-btn-hover-border-color: #ff9900;
    --bs-btn-focus-shadow-rgb: 255, 153, 0;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #ff9900;
    --bs-btn-active-border-color: #ff9900;
    --bs-btn-active-shadow: inset 0 3px 5px hsla(0, 0%, 100%, 0.125);
    --bs-btn-disabled-color: #ff9900;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ff9900;
    --bs-gradient: none;
}

/*
    PREMIUM BUTTONS
*/
.btn-outline-silver {
    --bs-btn-color: #c0c0c0;
    --bs-btn-border-color: #c0c0c0;
    --bs-btn-hover-color: #192230;
    --bs-btn-hover-bg: #c0c0c0;
    --bs-btn-hover-border-color: #c0c0c0;
    --bs-btn-focus-shadow-rgb: 59, 125, 221;
    --bs-btn-active-color: #192230;
    --bs-btn-active-bg: #c0c0c0;
    --bs-btn-active-border-color: #c0c0c0;
    --bs-btn-active-shadow: inset 0 3px 5px hsla(0, 0%, 100%, 0.125);
    --bs-btn-disabled-color: #c0c0c0;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #c0c0c0;
    --bs-gradient: none;
}
.btn-outline-gold {
    --bs-btn-color: #ffb338;
    --bs-btn-border-color: #ffb338;
    --bs-btn-hover-color: #192230;
    --bs-btn-hover-bg: #ffb338;
    --bs-btn-hover-border-color: #ffb338;
    --bs-btn-focus-shadow-rgb: 59, 125, 221;
    --bs-btn-active-color: #192230;
    --bs-btn-active-bg: #ffb338;
    --bs-btn-active-border-color: #ffb338;
    --bs-btn-active-shadow: inset 0 3px 5px hsla(0, 0%, 100%, 0.125);
    --bs-btn-disabled-color: #ffb338;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ffb338;
    --bs-gradient: none;
}
.btn-outline-diamond {
    --bs-btn-color: #b9f2ff;
    --bs-btn-border-color: #b9f2ff;
    --bs-btn-hover-color: #192230;
    --bs-btn-hover-bg: #b9f2ff;
    --bs-btn-hover-border-color: #b9f2ff;
    --bs-btn-focus-shadow-rgb: 59, 125, 221;
    --bs-btn-active-color: #192230;
    --bs-btn-active-bg: #b9f2ff;
    --bs-btn-active-border-color: #b9f2ff;
    --bs-btn-active-shadow: inset 0 3px 5px hsla(0, 0%, 100%, 0.125);
    --bs-btn-disabled-color: #b9f2ff;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #b9f2ff;
    --bs-gradient: none;
}

.buy_item_save {
    background-color: rgba(255, 0, 0, 0.5);
    font-size: 10px;
    line-height: 12px;
    padding: 4px;
    margin-right: -15px;
    position: absolute;
    top: 5px;
    right: 5px;
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    color: #fff;
}

.text-black {
    color: #000 !important;
}

.text-white {
    color: #ffffff !important;
}

.nav-flag img {
    border-radius: 0% !important;
    height: 20px;
    width: 30px;
    margin-top: -1px;
    -o-object-fit: cover;
    object-fit: cover;
}

.lang-choice-flag {
    border-radius: 0% !important;
    height: 20px;
    width: 30px;
    margin-top: -1px;
}

.vtlog-modal {
    padding: unset !important;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

.w-1-8 {
    width: 12.5% !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--main-color);
    color: #fff;
}

.navbar .avatar {
    margin-bottom: -7px !important;
    margin-top: -10px !important;
}

.dropdown-menu {
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.35rem;
}

.dropdown-menu > .dropdown-item {
    font-size: 13px !important;
}

.mt-custom-2 {
    margin-top: 2px !important;
}

.alert-dark {
    color: rgba(233, 236, 239, 0.9);
    --bs-alert-bg: rgba(78, 88, 99, 0.5);
}

.card-title {
    font-size: 16px;
    color: white;
    text-shadow: 0 0 5px rgba(255, 255, 255, 1);
    /* Optional: Remove bold styling if any */
    font-weight: 400;
}

.card-title > i {
    text-shadow: none !important;
}

.card-title-small {
    text-align: center;
    font-size: 15px;
    color: white;
    font-style: italic;
    text-shadow: 0 0 10px rgba(255, 255, 255, 1);
    /* Optional: Remove bold styling if any */
    font-weight: 400;
}

.card-title-small > i {
    text-shadow: none !important;
}

.card-title-small-premium {
    text-align: center;
    font-size: 15px;
    color: #9cfdc7;
    font-style: italic;
    text-shadow: 0 0 15px #9cfdc7;
    /* Optional: Remove bold styling if any */
    font-weight: 400;
}

.card-header {
    position: relative; /* Needed for the pseudo-element */
    padding-bottom: 10px; /* Space for the pseudo-element */
}

.card-header::after {
    content: "";
    position: absolute;
    bottom: -1px; /* Adjust as needed */
    left: 0;
    width: 100%;
    height: 2px; /* Height of the border */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}

.card-sub {
    background-color: #47505b;
}

.card-sub > .card-header {
    background-color: #47505b;
    box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.5), /* top */ inset 5px 0 5px -5px rgba(0, 0, 0, 0.5), /* right */ inset -5px 0 5px -5px rgba(0, 0, 0, 0.5); /* left */
    position: relative; /* Needed for the pseudo-element */
    padding-bottom: 10px; /* Space for the pseudo-element */
}

.card-sub > .card-header::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Adjust as needed */
    left: 0;
    width: 100%;
    height: 2px; /* Height of the border */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}

.card-sub > .card-body {
    color: rgba(255, 255, 255, 0.7);
    position: relative; /* Needed for the pseudo-element */
    padding-bottom: 10px; /* Space for the pseudo-element */
    font-size: 13px;
    font-weight: 200;
    box-shadow: inset 5px 0 5px -5px rgba(0, 0, 0, 0.5), /* right */ inset -5px 0 5px -5px rgba(0, 0, 0, 0.5); /* left */
}

.card-sub > .card-body::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Adjust as needed */
    left: 0;
    width: 100%;
    height: 2px; /* Height of the border */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
}

.card-sub > .card-body > .card-description-free {
    color: #b3e6f5;
    min-height: 65px;
}

.card-sub > .card-body > .card-description-premium {
    color: aquamarine;
    min-height: 65px;
}

.card-sub > .card-footer {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    position: relative; /* Needed for the pseudo-element */
    padding-bottom: 10px; /* Space for the pseudo-element */
    font-size: 13px;
    font-weight: 200;
    background-color: #47505b;
    box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, 0.5), /* bottom */ inset 5px 0 5px -5px rgba(0, 0, 0, 0.5), /* right */ inset -5px 0 5px -5px rgba(0, 0, 0, 0.5); /* left */
}

.card-challenge > .card-body {
    position: relative; /* Needed for the pseudo-element */
    padding-bottom: 10px; /* Space for the pseudo-element */
    font-size: 14px;
    font-weight: 400;
    border-radius: 0.325rem;
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.5);
    background-color: #000000;
    background: linear-gradient(to bottom right, #192230 20%, #606c7d 100%);
}

.card-challenge > .card-body p {
    color: #fff;
}

.text-free {
    color: #87e6fa;
}

.card-challenge > .card-body-premium {
    background: linear-gradient(to bottom right, rgba(28, 187, 140, 0.8) 20%, rgba(0, 0, 0, 1) 100%);
}

.card-challenge > .card-body-premium p {
    color: #fff;
}

.text-premium-required {
    color: #9cfdc7;
}

.text-premium-missing {
    color: #3ea7a0;
}

.text-premium {
    color: #4fc0a8;
}

.card-weekly {
    background-color: #000000;
    background: linear-gradient(to bottom right, rgba(23, 162, 184, 0.8) 20%, rgba(0, 0, 0, 1) 100%);
}

.card-weekly-premium {
    background: linear-gradient(to bottom right, rgba(28, 187, 140, 0.8) 20%, rgba(0, 0, 0, 1) 100%);
}

.card-weekly > .card-body {
    background-color: unset;
}

.card-weekly > .card-body p {
    color: #fff;
}

.card-weekly > .card-header {
    background-color: unset;
}

.card-weekly > .card-footer {
    background-color: unset;
}

.card-body-reward {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 0.325rem;
    top: 0;
    right: 0;
    font-size: 13px;
}

.progress-bar-text {
    font-size: 13px;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

.progress-bar-challenge {
    overflow: hidden;
    height: 16px;
    position: relative;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    border-radius: 0px;
    --bs-progress-bg: rgba(255, 255, 255, 0.25);
    --bs-progress-bar-color: rgba(255, 255, 255, 0.25);
    --bs-progress-bar-bg: #00a8ff;
    background-color: var(--bs-progress-bg);
    margin-top: 12px;
}

.progress-bar-stage {
    overflow: hidden;
    height: 5px;
    position: relative;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    border-radius: 0px;
    --bs-progress-bg: rgba(255, 255, 255, 0.25);
    --bs-progress-bar-color: rgba(255, 255, 255, 0.25);
    --bs-progress-bar-bg: #00a8ff;
    background-color: var(--bs-progress-bg);
    margin-top: 5px;
    margin-left: -4px;
    margin-right: 4px;
}

.progress-bar-season {
    overflow: hidden;
    height: 18px;
    position: relative;
    box-shadow: 0 0 10px #2d669b;
    border-radius: 0px;
    --bs-progress-bg: rgba(255, 255, 255, 0.25);
    --bs-progress-bar-color: rgba(255, 255, 255, 0.25);
    --bs-progress-bar-bg: #00a8ff;
    background-color: var(--bs-progress-bg);
    margin-top: 3px;
}

.progress-bar-challenge-season {
    overflow: hidden;
    height: 16px;
    position: relative;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    border-radius: 0px;
    --bs-progress-bg: rgba(255, 255, 255, 0.25);
    --bs-progress-bar-color: rgba(255, 255, 255, 0.25);
    --bs-progress-bar-bg: #00a8ff;
    background-color: var(--bs-progress-bg);
    margin-top: 0px;
}

.progress-bar-premium {
    --bs-progress-bar-bg: rgb(122, 250, 184, 0.6);
}

.progress-bar {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.card-title-reward {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
    text-shadow: 0 0 10px rgba(255, 255, 255, 1);
    /* Optional: Remove bold styling if any */
    font-weight: 400;
    line-height: 33px;
}

.card-title-reward span {
    color: #fff;
}

.card-title-reward > i {
    text-shadow: 0 0 10px rgba(252, 185, 44, 1);
}

.card-title-complete {
    font-size: 18px;
    color: rgba(60, 255, 0, 0.8);
    text-shadow: 0 0 10px rgba(60, 255, 0, 1);
    /* Optional: Remove bold styling if any */
    font-weight: 400;
    line-height: 33px;
}

.card-title-complete > i {
    font-size: 20px;
    color: rgba(60, 255, 0, 0.8);
    text-shadow: 0 0 15px rgba(60, 255, 0, 1);
}

/* Extend Bootstrap grid for custom 1/5th columns */
.col-1-5 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 15px; /* Same padding as Bootstrap columns */
    box-sizing: border-box;
    text-align: center; /* Optional: for centering text */
    border: 1px solid #ccc; /* Optional: just for visual separation */
}

@media (min-width: 576px) {
    .col-sm-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 768px) {
    .col-md-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 992px) {
    .col-lg-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 1200px) {
    .col-xl-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.btn-italic {
    position: relative;
    cursor: pointer;
    transform: skewX(-10deg); /* Skew transformation */
    display: inline-block; /* Ensures proper layout */
    height: 33px;
}

.btn-italic span {
    color: #fff;
    display: inline-block;
    transform: skewX(10deg); /* Counteract the skew transformation */
}

.btn-italic::before {
    transform: skewX(10deg); /* Skew transformation */
    z-index: -1; /* Behind the button text */
}

.sidebar-brand-text {
    color: #fff;
}

.nav-item .indicator {
    background: #3b7ddd;
    border-radius: 50%;
    box-shadow: 0 0.1rem 0.2rem hsla(0, 0%, 100%, 0.05);
    color: #fff;
    display: block;
    font-size: 0.675rem;
    height: 18px;
    padding: 1px;
    position: absolute;
    right: -8px;
    text-align: center;
    top: 0;
    transition: top 0.1s ease-out;
    width: 18px;
}

body[data-theme="dark"] .sidebar-header {
    color: #708096;
    text-transform: uppercase !important;
}

.sidebar-header {
    padding: 0.769rem 1.154rem 0.385rem 1.154rem;
}

.sidebar-dropdown .sidebar-link::before {
    content: "";
    display: inline-block;
    left: -14px;
    position: relative;
    transform: translateX(0px);
    transition: all 0.1s ease 0s;
}

body[data-theme="dark"] .sidebar-link:hover {
    background: #3a4656;
    color: #b4bcc8;
}

body[data-theme="dark"] .sidebar-dropdown .sidebar-item .sidebar-link:hover {
    background: #3a4656;
    color: #b4bcc8;
}

.btn-shine {
    color: white;
    border: rgba(255, 255, 255, 0.5) 1px solid;
    background-color: #ff9900; /* For browsers that do not support gradients */
    cursor: pointer;
    outline: none;
    transition: box-shadow 0.2s ease-in-out;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) inset;
}

.btn-shine:hover,
.btn-shine.active,
.btn-shine.active:focus {
    color: white;
    border: rgba(255, 255, 255, 0.5) 1px solid;
    background-color: #ff9900;
    box-shadow: 0 0 15px rgba(255, 255, 255, 1) inset;
}

.btn-shine-premium {
    color: white;
    border: rgba(255, 255, 255, 0.5) 1px solid;
    background-color: rgba(122, 250, 184, 0.6);
    cursor: pointer;
    outline: none;
    transition: box-shadow 0.2s ease-in-out;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) inset;
}

.btn-shine-premium:hover {
    color: white;
    border: rgba(255, 255, 255, 0.5) 1px solid;
    background-color: rgba(122, 250, 184, 0.6);
    box-shadow: 0 0 15px rgba(255, 255, 255, 1) inset;
}

.btn-shine-premium.active {
    color: white;
    border: rgba(255, 255, 255, 0.5) 1px solid;
    background-color: rgba(122, 250, 184, 0.6);
    box-shadow: 0 0 15px rgba(255, 255, 255, 1) inset;
}

.btn-claim {
    color: white;
    background: linear-gradient(to bottom, #ffa500, #ff4500);
    height: 30px;
    width: 145px;
    border: none;
    border-radius: 6px;
    transition: box-shadow 0.2s ease-in-out;
}

.btn-claim:hover {
    color: white;
    box-shadow: 0 0 15px rgba(255, 255, 255, 1) inset;
}

.w-90 {
    width: 90% !important;
}

.w-319p {
    width: 319px !important;
}

.weekly-endtime {
    font-size: 17px;
    color: rgba(252, 185, 44, 0.8);
    text-shadow: 0 0 5px rgba(252, 185, 44, 1);
    /* Optional: Remove bold styling if any */
    font-weight: 400;
    line-height: 33px;
}

.weekly-endtime > i {
    font-size: 18px;
    color: rgba(252, 185, 44, 0.8);
    text-shadow: none;
}

.season-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, rgba(34, 46, 60, 0) 40%, rgba(34, 46, 60, 1) 70%);
    z-index: 2;
}

.season-header {
    position: relative;
    background: transparent;
    z-index: 3;
}

.season-content {
    position: relative;
    background: transparent;
    z-index: 3;
}

.season-footer {
    position: relative;
    background: transparent;
    z-index: 3;
}

.season-endtime {
    font-size: 17px;
    color: rgba(252, 185, 44, 0.8);
    text-shadow: 0 0 5px rgba(252, 185, 44, 1);
    /* Optional: Remove bold styling if any */
    font-weight: 400;
    line-height: 33px;
}

.season-endtime > i {
    font-size: 18px;
    color: rgba(252, 185, 44, 0.8);
    text-shadow: none;
}

.w-23 {
    width: 23% !important;
}

.fs-17 {
    font-size: 17px !important;
}

.text-title-free {
    color: #cde9e9;
    text-shadow: 0 0 5px aquamarine;
}

.card-season-reward-free {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 0px;
}

.card-season-reward-free > .card-header {
    color: #b3e6f5;
    background-color: unset;
    padding: 0px;
}

.card-season-reward-free > .card-body {
    color: #fff;
    background-color: unset;
}

.card-season-reward-premium {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 0px;
}

.card-season-reward-premium > .card-header {
    color: #fff;
    background-color: unset;
    padding: 0px;
}

.card-season-reward-premium > .card-body {
    color: #fff;
    background-color: unset;
}

.card-weekly-free {
}

.card-weekly-free > .card-header {
    background-color: unset;
    padding: 0px;
}

.card-weekly-free > .card-body {
    background-color: unset;
}

.flex-container {
    display: flex;
    justify-content: space-between; /* Evenly distributes the child elements */
    align-items: center;
}

.flex-item {
    flex: 1; /* Each child element takes up equal space */
    text-align: center; /* Center-align text inside each flex item */
}

.flex-item-left {
    flex: 1; /* Each child element takes up equal space */
    text-align: left; /* Center-align text inside each flex item */
}

.flex-item-right {
    flex: 1; /* Each child element takes up equal space */
    text-align: right; /* Center-align text inside each flex item */
}

.logbook-game-icon {
    height: 16px;
    width: auto;
}

.logbook-icon {
    font-size: 13px;
    vertical-align: middle;
}

.stats-home-users {
    vertical-align: middle;
    color: #cbd4e0;
    font-size: 2rem;
}

.stats-home-number {
    float: left;
    display: inline-block;
}

.stats-home-number h3 {
    margin: 0 0 0.154rem;
    padding: 0;
    font-size: 1.6rem;
    font-weight: 400;
}

.stats-home-number small {
    font-weight: 500;
}

.stats-home-blue {
    color: #a0c3e4 !important;
}

.progress-bar-blue {
    --bs-progress-bar-bg: #a0c3e4;
}

.stats-home-purple-soft {
    color: #bfb4cf !important;
}

.progress-bar-purple-soft {
    --bs-progress-bar-bg: #bfb4cf;
}

.stats-home-grey-cascade {
    color: #f5f5f5 !important;
}

.progress-bar-grey-cascade {
    --bs-progress-bar-bg: #f5f5f5;
}

.stats-home-orange-soft {
    color: #f8ba5b !important;
}

.progress-bar-orange-soft {
    --bs-progress-bar-bg: #f8ba5b;
}

.trackers-home-users {
    vertical-align: middle;
    font-size: 50px;
    color: #cbd4e0;
}

body[data-theme="colored"] footer.footer,
body[data-theme="dark"] footer.footer {
    background: #1e2a38;
}

.bg-badge-custom {
    background-color: rgba(255, 255, 255, 0.2);
}

.table tr:last-child td {
    border: unset;
}

.text-admin-blue {
    color: #a0c3e4 !important;
}

.sidebar-badge {
    color: #fff;
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 1;
}

.sidebar [data-bs-toggle="collapse"]:after {
    right: 25px !important;
    top: 15px !important;
}

.page-toolbar {
    padding: 0.385rem 0.769rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

.page-toolbar > .breadcrumb-clock {
    color: #a0c3e4 !important;
}

.dropdown-username {
    font-size: 0.813rem;
}

.navbar {
    padding: 0 1rem;
}

.navbar-nav .nav-item {
    padding: var(--bs-navbar-padding-y) 0.5rem;
}

.navbar-nav .nav-item:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.nav-fa-sm {
    margin-top: 2px;
    font-size: 0.875em;
}

a[data-bs-toggle="tooltip"] {
    text-decoration: none; /* Remove underline */
}

a[data-bs-toggle="tooltip"]:hover {
    text-decoration: none; /* Ensure underline is removed on hover */
}

body[data-theme="dark"] .sidebar-link i,
body[data-theme="dark"] .sidebar-link svg,
body[data-theme="dark"] a.sidebar-link i,
body[data-theme="dark"] a.sidebar-link svg {
    color: #606c7d;
    font-size: 0.97rem;
}

@media (min-width: 1600px) {
    .col-xxxl {
        flex: 1 0 0%;
    }

    .row-cols-xxxl-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-xxxl-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-xxxl-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-xxxl-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-xxxl-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-xxxl-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-xxxl-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }

    .col-xxxl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xxxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xxxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xxxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xxxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xxxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xxxl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xxxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xxxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xxxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xxxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xxxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xxxl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

.card-header-shade {
    border-radius: 0.325rem 0.325rem 0 0;
}

.card-footer-shade {
    border-radius: 0 0 0.325rem 0.325rem;
}

.trophy-gold {
    color: var(--gold);
}

.trophy-silver {
    color: var(--silver);
}

.trophy-bronze {
    color: var(--bronze);
}

.accordion {
    --bs-accordion-bg: transparent !important;
    --bs-accordion-border-radius: none !important;
    --bs-accordion-inner-border-radius: none !important;
    --bs-accordion-border-color: none !important;
    --bs-accordion-border-width: 0 !important;
    --bs-accordion-btn-focus-border-color: none !important;
    --bs-accordion-btn-focus-box-shadow: none !important;
    --bs-accordion-active-color: var(--text) !important;
    --bs-accordion-active-bg: rgba(0, 0, 0, 0.1) !important;
    --bs-accordion-btn-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23bdc0c5'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e0e0e0'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}

.accordion-item {
    background-color: #48505b !important;
    border: none !important;
    color: var(--text) !important;
    margin-bottom: 24px !important;
    border-radius: 0.325rem !important;
}

.accordion-header {
    position: relative;
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-radius: 0.325rem 0.325rem 0 0 !important;
}

/* When .with-after is added to the header, apply border-radius only to top-left and top-right */
.accordion-header.with-after {
    border-radius: 0.325rem 0.325rem 0 0 !important; /* Top-left and top-right rounded */
}

/* When collapsed (without .with-after), apply border-radius on all sides */
.accordion-header:not(.with-after) {
    border-radius: 0.325rem !important; /* Apply border-radius on all sides */
}

.accordion-button {
    border-radius: 0.325rem 0.325rem 0 0 !important; /* Default: border-radius on top-left and top-right */
}

/* When .with-after is added to the header, apply border-radius only to top-left and top-right */
.accordion-header.with-after .accordion-button {
    border-radius: 0.325rem 0.325rem 0 0 !important; /* Top-left and top-right rounded */
}

/* When collapsed (without .with-after), apply border-radius on all sides */
.accordion-header:not(.with-after) .accordion-button {
    border-radius: 0.325rem !important; /* Apply border-radius on all sides */
}

/* Default state: gradient visible */
.accordion-header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    transition: background 0.3s ease;
}

/* Collapsed state: gradient hidden */
.accordion-header:not(.with-after)::after {
    background: none;
}

.accordion-body {
    background-color: #192230;
}

.alert {
    --bs-alert-border-radius: 0.325rem !important;
}

.alert-custom {
    --bs-alert-color: #e0e0e0;
    --bs-alert-bg: #1e2a38;
    --bs-alert-border-color: #d7dadc;
}

.img-gray {
    filter: grayscale(100%);
    opacity: 0.6; /* Optional for additional visual feedback */
}

.img-gray:hover {
    filter: grayscale(50%); /* Remove grayscale effect on hover, if desired */
    opacity: 1;
}

.border-none {
    border: none !important;
}

.box-shadow-none {
    box-shadow: none !important;
}

.img-fluid-75,
.img-thumbnail-75 {
    height: auto;
    max-width: 75%;
}

.admin-table td {
    border-color: hsla(0, 0%, 100%, 0.125) !important;
}

.page-toolbar > .breadcrumb-changelog {
    color: #a0c3e4 !important;
}

.progress {
    --bs-progress-bg: #47505b;
}

.card-body-scroll {
    max-height: 300px; /* Set max height */
    overflow-y: auto; /* Enable vertical scroll */
    padding: 10px;
}

.card-body-scroll::-webkit-scrollbar {
    width: 8px; /* Customize scrollbar width */
}

.card-body-scroll::-webkit-scrollbar-thumb {
    background-color: #888; /* Scrollbar color */
    border-radius: 4px;
}

.card-body-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Scrollbar hover color */
}

.timeline-item-success:before {
    border: 3px solid var(--success);
}

.timeline-item-danger:before {
    border: 3px solid var(--danger);
}

.timeline-item-info:before {
    border: 3px solid var(--info);
}

.list-awards-bg {
    background-color: var(--accent-1);
}

.lightrope {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    position: static;
    z-index: 1;
    margin: -15px 0 0 0;
    padding: 0;
    pointer-events: none;
    width: 100%;
}

.lightrope li {
    position: relative;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    list-style: none;
    margin: 20px;
    padding: 0;
    display: inline-block;
    width: 12px;
    height: 28px;
    border-radius: 50%;
    background: #00ff5a; /* GREEN */
    box-shadow: 0px 5px 24px 3px rgba(0, 255, 90, 1);
    animation-name: flash-green;
    animation-duration: 2s;
}

.lightrope li:nth-child(2n + 1) {
    background: #ff2b2b; /* RED */
    box-shadow: 0px 5px 24px 3px rgba(255, 43, 43, 1);
    animation-name: flash-red;
    animation-duration: 1.4s;
}

.lightrope li:nth-child(4n + 2) {
    background: #3aa0ff; /* BLUE */
    box-shadow: 0px 5px 24px 3px rgba(58, 160, 255, 1);
    animation-name: flash-blue;
    animation-duration: 1.8s;
}

.lightrope li:before {
    content: "";
    position: absolute;
    background: #222;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    top: -5px;
    left: 1px;
}

.lightrope li:after {
    content: "";
    top: -14px;
    left: 9px;
    position: absolute;
    width: 52px;
    height: 18px;
    border-bottom: solid #222 2px;
    border-radius: 50%;
}

.lightrope li:last-child:after {
    content: none;
}

.lightrope li:first-child {
    margin-left: -40px;
}

/* ANIMATIONS */
@keyframes flash-green {
    0%,
    100% {
        background: #00ff5a;
        box-shadow: 0px 5px 24px 3px rgba(0, 255, 90, 1);
    }
    50% {
        background: rgba(0, 255, 90, 0.35);
        box-shadow: 0px 5px 24px 3px rgba(0, 255, 90, 0.15);
    }
}

@keyframes flash-red {
    0%,
    100% {
        background: #ff2b2b;
        box-shadow: 0px 5px 24px 3px rgba(255, 43, 43, 1);
    }
    50% {
        background: rgba(255, 43, 43, 0.35);
        box-shadow: 0px 5px 24px 3px rgba(255, 43, 43, 0.15);
    }
}

@keyframes flash-blue {
    0%,
    100% {
        background: #3aa0ff;
        box-shadow: 0px 5px 24px 3px rgba(58, 160, 255, 1);
    }
    50% {
        background: rgba(58, 160, 255, 0.35);
        box-shadow: 0px 5px 24px 3px rgba(58, 160, 255, 0.15);
    }
}

.scroll-table {
    width: 100%;
    border-collapse: collapse;
}

.scroll-table tbody {
    display: block;
    max-height: 67vh; /* limit height here */
    overflow-y: auto; /* scroll */
}

.scroll-table thead,
.scroll-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed; /* ensures proper alignment */
}

.scroll-table tbody::-webkit-scrollbar {
    width: 8px; /* Customize scrollbar width */
}

.scroll-table tbody::-webkit-scrollbar-thumb {
    background-color: #888; /* Scrollbar color */
    border-radius: 4px;
}

.scroll-table tbody::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Scrollbar hover color */
}

.card-neon-twitch {
    transition: box-shadow 0.25s ease-in-out;
}

.card-neon-twitch:hover {
    box-shadow: 0 0 5px #9146ff, 0 0 10px #9146ff, 0 0 15px #9146ff;
}

.card-neon-twitch-highlight {
    box-shadow: 0 0 5px #ff9900, 0 0 10px #ff9900, 0 0 15px #ff9900;
    transition: box-shadow 0.25s ease-in-out;
}

.card-neon-twitch-highlight:hover {
    box-shadow: 0 0 5px #9146ff, 0 0 10px #9146ff, 0 0 15px #9146ff;
}

.stream-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.stream-item {
    flex: 0 0 calc(20% - 1.2rem); /* subtract gap portion */
    max-width: calc(20% - 1.2rem);
    min-width: 240px; /* optional */
    box-sizing: border-box;
}

.awn-toast-content {
    color: #000;
}
.filter-title-custom {
    color: #708096;
    text-transform: uppercase !important;
    padding: 0.769rem 1.154rem 0.385rem 0.769rem;
    background: transparent;
    font-size: 0.75rem;
}

.text-upper {
    text-transform: uppercase !important;
}

.card-header.no-after::after {
    content: none;
}

.border-route-event {
    position: relative;
    border-radius: 0.325rem; /* match card */
    overflow: hidden; /* important! clips the pseudo-element */
}

.border-route-event::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    border-top-left-radius: 0.325rem;
    border-bottom-left-radius: 0.325rem;
    background: linear-gradient(to bottom, var(--info) 0%, var(--info) 50%, var(--info) 50%, var(--info) 100%);
}

.border-route-boosted {
    position: relative;
    border-radius: 0.325rem; /* match card */
    overflow: hidden; /* important! clips the pseudo-element */
}

.border-route-boosted::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    border-top-left-radius: 0.325rem;
    border-bottom-left-radius: 0.325rem;
    background: linear-gradient(to bottom, var(--main-color) 0%, var(--main-color) 50%, var(--main-color) 50%, var(--main-color) 100%);
}

.border-route-dual {
    position: relative;
    border-radius: 0.325rem; /* match card */
    overflow: hidden; /* important! clips the pseudo-element */
}

.border-route-dual::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    border-top-left-radius: 0.325rem;
    border-bottom-left-radius: 0.325rem;
    background: linear-gradient(to bottom, var(--info) 0%, var(--info) 50%, var(--main-color) 50%, var(--main-color) 100%);
}

.border-route-zero {
    position: relative;
    border-radius: 0.325rem; /* match card */
    overflow: hidden; /* important! clips the pseudo-element */
}

.border-route-zero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    border-top-left-radius: 0.325rem;
    border-bottom-left-radius: 0.325rem;
    background: linear-gradient(to bottom, var(--danger) 0%, var(--danger) 50%, var(--danger) 50%, var(--danger) 100%);
}

.cargo-route-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 0.75rem;
}

.distance-route-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 0.75rem;
}

.tooltip {
    position: relative;
}

.tooltip .tooltip-text {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}

.tooltip:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
}

/* ── Sidebar ticket badge ───────────────────────────────── */
.sidebar-ticket-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}
.sidebar-ticket-open {
    background: rgba(255, 153, 0, 0.15);
    border: 1px solid rgba(255, 153, 0, 0.35);
    color: #ff9900;
}
.sidebar-ticket-unread {
    background: rgba(23, 162, 184, 0.15);
    border: 1px solid rgba(23, 162, 184, 0.35);
    color: #17a2b8;
    animation: sidebarTicketPulse 2.5s ease-in-out infinite;
}
@keyframes sidebarTicketPulse {
    0%,
    100% {
        background: rgba(23, 162, 184, 0.15);
    }
    50% {
        background: rgba(23, 162, 184, 0.35);
    }
}

/* ════════════════════════════════════════════════════════════ */
/* ══ Admin Ticket List ═══════════════════════════════════ */
/* ════════════════════════════════════════════════════════════ */

.ta-list-wrap {
    padding: 1.25rem;
}

/* ── Header bar ──────────────────────────────────────────── */
.ta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #636363;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.ta-header-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.ta-header-title {
    font-size: 0.85rem;
    font-weight: 600;
}
.ta-unclaimed-badge {
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(255, 153, 0, 0.12);
    border: 1px solid rgba(255, 153, 0, 0.3);
    color: #ff9900;
    padding: 0.15rem 0.5rem;
    border-radius: 2rem;
}
.ta-claim-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 153, 0, 0.4);
    background: rgba(255, 153, 0, 0.08);
    color: #ff9900;
    cursor: pointer;
    transition: all 0.15s;
}
.ta-claim-btn:hover:not(:disabled) {
    background: rgba(255, 153, 0, 0.15);
    border-color: #ff9900;
}
.ta-claim-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Filter chips ────────────────────────────────────────── */
.tc-filters {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid #636363;
    flex-wrap: wrap;
}
.tc-chip {
    font-size: 0.71rem;
    padding: 0.2rem 0.6rem;
    border-radius: 2rem;
    border: 1px solid #636363;
    background: transparent;
    color: rgba(224, 224, 224, 0.5);
    cursor: pointer;
    transition: all 0.15s;
}
.tc-chip:hover,
.tc-chip.active {
    border-color: #e0e0e0;
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.05);
}
.tc-chip.active.chip-open {
    border-color: #ff9900;
    color: #ff9900;
    background: rgba(255, 153, 0, 0.08);
}
.tc-chip.active.chip-waiting-staff {
    border-color: #ffc107;
    color: #ffc107;
    background: rgba(255, 193, 7, 0.08);
}
.tc-chip.active.chip-waiting-user {
    border-color: #17a2b8;
    color: #17a2b8;
    background: rgba(23, 162, 184, 0.08);
}
.tc-chip.active.chip-closed {
    border-color: #636363;
    color: rgba(224, 224, 224, 0.7);
    background: rgba(255, 255, 255, 0.04);
}
.tc-chip.active.chip-mine {
    border-color: #1cbb8c;
    color: #1cbb8c;
    background: rgba(28, 187, 140, 0.08);
}
.tc-chip.active.chip-unclaimed {
    border-color: #dc3545;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.08);
}

/* ── Search input ────────────────────────────────────────── */
.ta-search-wrap {
    position: relative;
    flex: 1;
    max-width: 280px;
}
.ta-search-input {
    width: 100%;
    background: #192230;
    border: 1px solid #636363;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.77rem;
    padding: 0.35rem 0.65rem 0.35rem 2rem;
    outline: none;
    transition: border-color 0.15s;
}
.ta-search-input:focus {
    border-color: rgba(255, 153, 0, 0.5);
}
.ta-search-input::placeholder {
    color: rgba(224, 224, 224, 0.25);
}
.ta-search-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(224, 224, 224, 0.3);
    font-size: 0.72rem;
    pointer-events: none;
}

/* ── Ticket rows ─────────────────────────────────────────── */
.ta-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ta-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.25rem 0.85rem 1rem;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.12s;
    text-decoration: none;
}
.ta-item:not(:last-child) {
    border-bottom: 1px solid rgba(99, 99, 99, 0.35);
}
.ta-item:hover {
    background: rgba(255, 255, 255, 0.03);
    text-decoration: none;
}

.ta-item.s-open {
    border-left-color: #ff9900;
}
.ta-item.s-waiting-staff {
    border-left-color: #ffc107;
}
.ta-item.s-waiting-user {
    border-left-color: #17a2b8;
}
.ta-item.s-closed {
    border-left-color: #636363;
}

.ta-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.s-open .ta-dot {
    background: #ff9900;
    box-shadow: 0 0 5px rgba(255, 153, 0, 0.7);
}
.s-waiting-staff .ta-dot {
    background: #ffc107;
}
.s-waiting-user .ta-dot {
    background: #17a2b8;
}
.s-closed .ta-dot {
    background: #636363;
}

.ta-item-id {
    font-family: monospace;
    font-size: 0.72rem;
    color: #636363;
    flex-shrink: 0;
}
.ta-item-reason {
    font-size: 0.83rem;
    font-weight: 500;
    color: #e0e0e0;
}
.ta-item-meta {
    font-size: 0.71rem;
    color: rgba(224, 224, 224, 0.38);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.ta-item-meta i {
    opacity: 0.55;
}
.ta-item-status {
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.18rem 0.55rem;
    border-radius: 2rem;
    flex-shrink: 0;
}
.s-open .ta-item-status {
    background: rgba(255, 153, 0, 0.1);
    color: #ff9900;
    border: 1px solid rgba(255, 153, 0, 0.25);
}
.s-waiting-staff .ta-item-status {
    background: rgba(255, 193, 7, 0.08);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.22);
}
.s-waiting-user .ta-item-status {
    background: rgba(23, 162, 184, 0.08);
    color: #17a2b8;
    border: 1px solid rgba(23, 162, 184, 0.22);
}
.s-closed .ta-item-status {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(224, 224, 224, 0.45);
    border: 1px solid #636363;
}

.ta-item-arrow {
    color: #636363;
    transition: color 0.12s, transform 0.12s;
    flex-shrink: 0;
}
.ta-item:hover .ta-item-arrow {
    color: #e0e0e0;
    transform: translateX(2px);
}

.ta-sla-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    margin-right: 3px;
    vertical-align: middle;
}
.ta-sla-dot.sla-green {
    background: #1cbb8c;
}
.ta-sla-dot.sla-yellow {
    background: #ffc107;
    box-shadow: 0 0 4px rgba(255, 193, 7, 0.5);
}
.ta-sla-dot.sla-red {
    background: #dc3545;
    box-shadow: 0 0 4px rgba(220, 53, 69, 0.5);
    animation: slaPulse 2s infinite;
}
@keyframes slaPulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ── Empty ───────────────────────────────────────────────── */
.ta-empty {
    padding: 3.5rem 2rem;
    text-align: center;
}
.ta-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    font-size: 1.3rem;
    color: #636363;
}

/* ── Pagination ──────────────────────────────────────────── */
.ta-pagination {
    padding: 0.65rem 1.25rem;
    border-top: 1px solid #636363;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ta-page-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #636363;
    background: transparent;
    color: rgba(224, 224, 224, 0.6);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ta-page-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e0e0e0;
    border-color: #e0e0e0;
}
.ta-page-btn.active {
    background: #ff9900;
    border-color: #ff9900;
    color: #000;
    font-weight: 700;
}

/* ── Ticket Pager ───────────────────────────────────────── */
.ta-pager-wrap {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(99, 99, 99, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ta-pager-info {
    font-size: 0.72rem;
    color: rgba(224, 224, 224, 0.35);
}
.ta-pager-btns {
    display: flex;
    align-items: center;
    gap: 3px;
}
.ta-pg-btn {
    padding: 0.25rem 0.55rem;
    font-size: 0.7rem;
    border-radius: 5px;
    min-width: 26px;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(99, 99, 99, 0.2);
    color: rgba(224, 224, 224, 0.4);
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ta-pg-btn:hover:not([disabled]):not(.active) {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(99, 99, 99, 0.35);
    color: rgba(224, 224, 224, 0.7);
}
.ta-pg-btn.active {
    background: rgba(255, 153, 0, 0.12);
    border-color: rgba(255, 153, 0, 0.3);
    color: #ff9900;
    font-weight: 600;
}
.ta-pg-btn[disabled] {
    opacity: 0.25;
    cursor: default;
}
.ta-pg-btn i {
    font-size: 0.6rem;
}

.ta-no-match {
    padding: 2rem;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(224, 224, 224, 0.35);
    display: none;
}

/* ── Notify toggle ──────────────────────────────────────── */
.ta-notify-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    border: 1px solid #636363;
    background: transparent;
    color: rgba(224, 224, 224, 0.45);
    cursor: pointer;
    transition: all 0.15s;
}
.ta-notify-btn:hover {
    border-color: #e0e0e0;
    color: #e0e0e0;
}
.ta-notify-btn.active {
    border-color: rgba(28, 187, 140, 0.4);
    color: #1cbb8c;
    background: rgba(28, 187, 140, 0.08);
}

/* ════════════════════════════════════════════════════════════ */
/* ══ Admin Ticket View ═══════════════════════════════════ */
/* ════════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────── */
.ta-view-wrap {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 1100px) {
    .ta-view-wrap {
        flex-direction: row;
        align-items: stretch;
        height: calc(100vh - 80px);
    }
    .ta-sidebar {
        width: 290px;
        flex-shrink: 0;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .ta-sidebar::-webkit-scrollbar {
        display: none;
    }
    .ta-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
}

/* ── Sidebar cards ───────────────────────────────────────── */
.ta-card {
    background: #1e2a38;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.ta-card-header {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #636363;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(224, 224, 224, 0.35);
}
.ta-section {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(99, 99, 99, 0.4);
}
.ta-section:last-child {
    border-bottom: none;
}
.ta-label {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #636363;
    margin-bottom: 0.25rem;
}
.ta-value {
    font-size: 0.8rem;
    color: #e0e0e0;
}

/* ── Status badge ────────────────────────────────────────── */
.ta-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.28rem 0.65rem;
    border-radius: 2rem;
}
.ta-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.st-open .ta-status-dot {
    background: #ff9900;
    box-shadow: 0 0 5px rgba(255, 153, 0, 0.8);
}
.st-open {
    border: 1px solid rgba(255, 153, 0, 0.3);
    color: #ff9900;
    background: rgba(255, 153, 0, 0.1);
}
.st-waiting-staff .ta-status-dot {
    background: #ffc107;
}
.st-waiting-staff {
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
    background: rgba(255, 193, 7, 0.08);
}
.st-waiting-user .ta-status-dot {
    background: #17a2b8;
}
.st-waiting-user {
    border: 1px solid rgba(23, 162, 184, 0.3);
    color: #17a2b8;
    background: rgba(23, 162, 184, 0.08);
}
.st-closed .ta-status-dot {
    background: #636363;
}
.st-closed {
    border: 1px solid #636363;
    color: rgba(224, 224, 224, 0.5);
    background: rgba(255, 255, 255, 0.04);
}

/* ── Admin action buttons ────────────────────────────────── */
.ta-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem;
    border-radius: 6px;
    font-size: 0.77rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid;
}
.ta-action-btn + .ta-action-btn {
    margin-top: 0.4rem;
}
.ta-btn-close {
    background: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.3);
    color: #f5a0a8;
}
.ta-btn-close:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.15);
    border-color: #dc3545;
    color: #fff;
}
.ta-btn-reopen {
    background: rgba(28, 187, 140, 0.08);
    border-color: rgba(28, 187, 140, 0.3);
    color: #1cbb8c;
}
.ta-btn-reopen:hover:not(:disabled) {
    background: rgba(28, 187, 140, 0.15);
    border-color: #1cbb8c;
    color: #fff;
}
.ta-btn-move {
    background: rgba(255, 255, 255, 0.04);
    border-color: #636363;
    color: rgba(224, 224, 224, 0.6);
}
.ta-btn-move:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: #e0e0e0;
    color: #e0e0e0;
}
.ta-action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ta-btn-close-reveal {
    background: rgba(28, 187, 140, 0.08);
    border-color: rgba(28, 187, 140, 0.3);
    color: #1cbb8c;
}
.ta-btn-close-reveal:hover:not(:disabled) {
    background: rgba(28, 187, 140, 0.15);
    border-color: #1cbb8c;
    color: #fff;
}

.ta-move-row {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
}
.ta-move-select {
    flex: 1;
    background: #192230;
    border: 1px solid #636363;
    color: #e0e0e0;
    font-size: 0.75rem;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}
.ta-move-select:focus {
    outline: none;
    border-color: rgba(255, 153, 0, 0.5);
}

/* ── Activity ────────────────────────────────────────────── */
.ta-activity-item {
    font-size: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(99, 99, 99, 0.3);
}
.ta-activity-item:last-child {
    border-bottom: none;
}
.ta-activity-text {
    color: #e0e0e0;
    margin-bottom: 2px;
}
.ta-activity-time {
    color: rgba(224, 224, 224, 0.3);
    font-size: 0.67rem;
}

/* ── Back button ─────────────────────────────────────────── */
.ta-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem;
    border-radius: 8px;
    border: 1px solid #636363;
    background: transparent;
    color: rgba(224, 224, 224, 0.55);
    font-size: 0.78rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    width: 100%;
}
.ta-back-btn:hover {
    border-color: #e0e0e0;
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.04);
}

/* ── Conversation card ───────────────────────────────────── */
.tv-conv-card {
    background: #1e2a38;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.ta-main .tv-conv-card > div:last-of-type {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ta-main .tv-conv-card > div:last-of-type::-webkit-scrollbar {
    display: none;
}
.ta-main .tv-conv-header {
    flex-shrink: 0;
}
.ta-main .tv-reply-card,
.ta-main .tv-closed-notice {
    flex-shrink: 0;
}
.tv-conv-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #636363;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.tv-conv-header-title {
    font-size: 0.82rem;
    font-weight: 600;
}
.tv-msg-count {
    font-size: 0.65rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.15rem 0.45rem;
    border-radius: 2rem;
    color: rgba(224, 224, 224, 0.5);
}

/* ── Messages ────────────────────────────────────────────── */
.tv-msg {
    position: relative;
    padding: 0.95rem 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.tv-msg:not(:last-child) {
    border-bottom: 1px solid rgba(99, 99, 99, 0.4);
}
.tv-msg.from-staff {
    background: #192230;
}
.tv-msg-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.tv-msg-name {
    font-size: 0.82rem;
    font-weight: 600;
}
.tv-msg-time {
    font-size: 0.7rem;
    color: rgba(224, 224, 224, 0.35);
}
.tv-msg-body {
    font-size: 0.82rem;
    line-height: 1.65;
    color: rgba(224, 224, 224, 0.85);
    word-break: break-word;
}
.tv-msg-body a {
    color: #ff9900;
    text-decoration: underline;
}
.ta-msg-actions {
    position: absolute;
    top: 0.55rem;
    right: 0.75rem;
    display: flex;
    gap: 0.15rem;
    opacity: 0;
    transition: opacity 0.15s;
}
.tv-msg:hover .ta-msg-actions {
    opacity: 1;
}
.ta-msg-action-btn {
    background: none;
    border: none;
    color: rgba(224, 224, 224, 0.25);
    cursor: pointer;
    padding: 3px 5px;
    transition: color 0.12s;
    line-height: 1;
    border-radius: 4px;
}
.ta-msg-action-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}
.ta-msg-action-btn.edit:hover {
    color: #ff9900;
}
.ta-msg-action-btn.del:hover {
    color: #dc3545;
}
.ta-msg-action-btn.translate:hover {
    color: #17a2b8;
}

/* ── Translation block ───────────────────────────────────── */
.tv-translation {
    margin-top: 0.65rem;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(23, 162, 184, 0.25);
    background: rgba(23, 162, 184, 0.05);
}
.tv-translation-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: rgba(23, 162, 184, 0.08);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #17a2b8;
}
.tv-translation-body {
    padding: 0.6rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.65;
    color: rgba(224, 224, 224, 0.8);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Attachments ─────────────────────────────────────────── */
.tv-msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
}
.tv-att-img {
    width: 110px;
    height: 75px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid #636363;
    cursor: pointer;
    transition: border-color 0.12s, opacity 0.12s;
    display: block;
}
.tv-att-img:hover {
    border-color: #ff9900;
    opacity: 0.9;
}
.tv-att-video {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 153, 0, 0.07);
    border: 1px solid rgba(255, 153, 0, 0.25);
    border-radius: 4px;
    padding: 0.35rem 0.65rem;
    font-size: 0.74rem;
    color: #ff9900;
    text-decoration: none;
    transition: background 0.12s;
}
.tv-att-video:hover {
    background: rgba(255, 153, 0, 0.13);
    color: #ff9900;
    text-decoration: none;
}
.tv-att-wrap {
    position: relative;
    display: inline-flex;
}
.tv-att-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dc3545;
    border: none;
    color: #fff;
    font-size: 0.6rem;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}
.tv-att-wrap:hover .tv-att-del {
    opacity: 1;
}

/* ── Message edit area ───────────────────────────────────── */
.ta-msg-edit-area textarea {
    width: 100%;
    background: #192230;
    border: 1px solid #636363;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.82rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 80px;
    padding: 0.5rem 0.7rem;
    transition: border-color 0.15s;
}
.ta-msg-edit-area textarea:focus {
    border-color: rgba(255, 153, 0, 0.5);
    outline: none;
}
.ta-msg-edit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

/* ── Reply card ──────────────────────────────────────────── */
.tv-reply-card {
    background: #1e2a38;
    border-radius: 8px;
    overflow: hidden;
}
.tv-reply-header {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #636363;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(224, 224, 224, 0.55);
}
.tv-reply-body {
    padding: 0.85rem 1rem;
}
.tv-reply-body textarea {
    background: #192230;
    border: 1px solid #636363;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.82rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 100px;
    width: 100%;
    padding: 0.6rem 0.8rem;
    transition: border-color 0.15s;
}
.tv-reply-body textarea:focus {
    border-color: rgba(255, 153, 0, 0.5);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.1);
}
.tv-reply-hint {
    font-size: 0.67rem;
    color: rgba(224, 224, 224, 0.2);
    margin-top: 0.3rem;
}
.tv-reply-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.65rem;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.tv-char-count {
    font-size: 0.7rem;
    color: rgba(224, 224, 224, 0.3);
    transition: color 0.15s;
}
.tv-char-count.warn {
    color: #ffc107;
}
.tv-char-count.limit {
    color: #dc3545;
}
.ta-reply-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ── Previous tickets list (modal) ──────────────────────── */
.ta-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ta-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.25rem 0.85rem 1rem;
    border-left: 3px solid transparent;
    transition: background 0.12s;
    text-decoration: none;
}
.ta-item:not(:last-child) {
    border-bottom: 1px solid rgba(99, 99, 99, 0.35);
}
.ta-item:hover {
    background: rgba(255, 255, 255, 0.03);
}
.ta-item.s-open {
    border-left-color: #ff9900;
}
.ta-item.s-waiting-staff {
    border-left-color: #ffc107;
}
.ta-item.s-waiting-user {
    border-left-color: #17a2b8;
}
.ta-item.s-closed {
    border-left-color: #636363;
}
.ta-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ta-item.s-open .ta-dot {
    background: #ff9900;
    box-shadow: 0 0 5px rgba(255, 153, 0, 0.7);
}
.ta-item.s-waiting-staff .ta-dot {
    background: #ffc107;
}
.ta-item.s-waiting-user .ta-dot {
    background: #17a2b8;
}
.ta-item.s-closed .ta-dot {
    background: #636363;
}
.ta-item-id {
    font-family: monospace;
    font-size: 0.72rem;
    color: #636363;
    flex-shrink: 0;
}
.ta-item-reason {
    font-size: 0.83rem;
    font-weight: 500;
    color: #e0e0e0;
}
.ta-item-meta {
    font-size: 0.71rem;
    color: rgba(224, 224, 224, 0.38);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.ta-item-status {
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.18rem 0.55rem;
    border-radius: 2rem;
    flex-shrink: 0;
}
.ta-item.s-open .ta-item-status {
    background: rgba(255, 153, 0, 0.1);
    color: #ff9900;
    border: 1px solid rgba(255, 153, 0, 0.25);
}
.ta-item.s-waiting-staff .ta-item-status {
    background: rgba(255, 193, 7, 0.08);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.22);
}
.ta-item.s-waiting-user .ta-item-status {
    background: rgba(23, 162, 184, 0.08);
    color: #17a2b8;
    border: 1px solid rgba(23, 162, 184, 0.22);
}
.ta-item.s-closed .ta-item-status {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(224, 224, 224, 0.45);
    border: 1px solid #636363;
}
.ta-item-arrow {
    color: #636363;
    transition: color 0.12s, transform 0.12s;
    flex-shrink: 0;
}
.ta-item:hover .ta-item-arrow {
    color: #e0e0e0;
    transform: translateX(2px);
}

/* ── Tags ───────────────────────────────────────────────── */
.ta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.ta-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.12rem 0.5rem;
    border-radius: 2rem;
    background: rgba(255, 153, 0, 0.1);
    border: 1px solid rgba(255, 153, 0, 0.25);
    color: #ff9900;
}
.ta-tag-del {
    background: none;
    border: none;
    color: rgba(255, 153, 0, 0.4);
    cursor: pointer;
    padding: 0 1px;
    line-height: 1;
    font-size: 0.72rem;
    transition: color 0.12s;
}
.ta-tag-del:hover {
    color: #dc3545;
}
.ta-tag-input {
    background: #192230;
    border: 1px solid #636363;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    width: 100%;
    outline: none;
    transition: border-color 0.15s;
}
.ta-tag-input:focus {
    border-color: rgba(255, 153, 0, 0.5);
}

/* ── SLA indicator ──────────────────────────────────────── */
.ta-sla-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
    margin-left: 0.35rem;
}
.ta-sla-green {
    color: #1cbb8c;
    background: rgba(28, 187, 140, 0.1);
    border: 1px solid rgba(28, 187, 140, 0.25);
}
.ta-sla-yellow {
    color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.25);
}
.ta-sla-red {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.25);
}

/* ── Rating stars ───────────────────────────────────────── */
.ta-stars {
    display: inline-flex;
    gap: 2px;
}
.ta-stars i {
    font-size: 0.72rem;
}
.ta-stars i.filled {
    color: #ff9900;
}
.ta-stars i.empty {
    color: #636363;
}

/* ── Pinned message ─────────────────────────────────────── */
.tv-pinned-wrap {
    border-bottom: 1px solid rgba(255, 153, 0, 0.15);
    background: rgba(255, 153, 0, 0.03);
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
}
.tv-pinned-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ff9900;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
}
.tv-pinned-body {
    color: rgba(224, 224, 224, 0.7);
    line-height: 1.5;
    word-break: break-word;
}
.ta-msg-action-btn.pin:hover {
    color: #ff9900;
}
.ta-msg-action-btn.pin.active {
    color: #ff9900;
    opacity: 1;
}

/* ── Edited badge ───────────────────────────────────────── */
.tv-msg-edited-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ff9900;
    background: rgba(255, 153, 0, 0.1);
    border: 1px solid rgba(255, 153, 0, 0.25);
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
    margin-left: 0.35rem;
    cursor: default;
}
.tv-msg-edited-badge.clickable {
    cursor: pointer;
}
.tv-msg-edited-badge.clickable:hover {
    background: rgba(255, 153, 0, 0.18);
}

/* ── Deleted message ────────────────────────────────────── */
.tv-msg.msg-deleted {
    display: none;
    background: rgba(220, 53, 69, 0.06);
}
.tv-msg-deleted-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.25);
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
    margin-left: 0.35rem;
}
.ta-toggle-deleted {
    background: none;
    border: 1px solid #636363;
    border-radius: 6px;
    color: rgba(224, 224, 224, 0.5);
    font-size: 0.68rem;
    padding: 0.18rem 0.55rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}
.ta-toggle-deleted:hover {
    border-color: #e0e0e0;
    color: #e0e0e0;
}
.ta-toggle-deleted.active {
    border-color: rgba(220, 53, 69, 0.5);
    color: #dc3545;
    background: rgba(220, 53, 69, 0.08);
}

/* ── Closed notice ───────────────────────────────────────── */
.tv-closed-notice {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #636363;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.78rem;
    color: rgba(224, 224, 224, 0.4);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tv-reveal-card {
    margin: 0.5rem 1rem 0.85rem;
    padding: 0.65rem 0.85rem;
    background: rgba(28, 187, 140, 0.06);
    border: 1px solid rgba(28, 187, 140, 0.25);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.tv-reveal-text {
    display: flex;
    flex-direction: column;
}
.tv-reveal-label {
    font-size: 0.7rem;
    color: rgba(224, 224, 224, 0.5);
}
.tv-reveal-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1cbb8c;
}

/* ── User notes modal ────────────────────────────────────── */
.ta-notes-loading,
.ta-notes-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: rgba(224, 224, 224, 0.35);
    font-size: 0.8rem;
}
.ta-note-item {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(99, 99, 99, 0.3);
}
.ta-note-item:last-child {
    border-bottom: none;
}
.ta-note-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}
.ta-note-author {
    font-size: 0.75rem;
    font-weight: 600;
    color: #e0e0e0;
}
.ta-note-time {
    font-size: 0.68rem;
    color: rgba(224, 224, 224, 0.3);
    flex: 1;
}
.ta-note-edit,
.ta-note-del {
    background: none;
    border: none;
    color: rgba(224, 224, 224, 0.25);
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.12s;
    line-height: 1;
}
.ta-note-edit:hover {
    color: #ff9900;
}
.ta-note-del:hover {
    color: #dc3545;
}
.ta-note-text {
    font-size: 0.8rem;
    color: rgba(224, 224, 224, 0.75);
    line-height: 1.55;
    word-break: break-word;
}
.ta-notes-add {
    padding: 0.75rem 1rem;
    border-top: 1px solid #636363;
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
}
.ta-notes-add textarea {
    background: #192230;
    border: 1px solid #636363;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.8rem;
    line-height: 1.5;
    resize: none;
    height: 70px;
    width: 100%;
    padding: 0.45rem 0.65rem;
    transition: border-color 0.15s;
}
.ta-notes-add textarea:focus {
    border-color: rgba(255, 153, 0, 0.5);
    outline: none;
}
.ta-notes-add-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ════════════════════════════════════════════════════════════ */
/* ══ Admin Ticket Settings ═══════════════════════════════ */
/* ════════════════════════════════════════════════════════════ */

.ts-wrap {
    padding: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
}

/* ── Tabs ────────────────────────────────────────────────── */
.ts-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #636363;
    padding-bottom: 0;
}
.ts-tab {
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    background: none;
    color: rgba(224, 224, 224, 0.4);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
}
.ts-tab:hover {
    color: #e0e0e0;
}
.ts-tab.active {
    color: #ff9900;
    border-bottom-color: #ff9900;
}
.ts-panel {
    display: none;
}
.ts-panel.active {
    display: block;
}

/* ── Section header ──────────────────────────────────────── */
.ts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}
.ts-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #e0e0e0;
}

/* ── Table ───────────────────────────────────────────────── */
.ts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.ts-table th {
    text-align: left;
    padding: 0.45rem 0.75rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #636363;
    border-bottom: 1px solid #636363;
}
.ts-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(99, 99, 99, 0.25);
    vertical-align: middle;
}
.ts-table tr:last-child td {
    border-bottom: none;
}
.ts-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.ts-card {
    background: #1e2a38;
    border-radius: 8px;
    overflow: hidden;
}

/* ── Badges ──────────────────────────────────────────────── */
.ts-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 2rem;
}
.ts-badge-on {
    background: rgba(28, 187, 140, 0.12);
    border: 1px solid rgba(28, 187, 140, 0.3);
    color: #1cbb8c;
}
.ts-badge-off {
    background: rgba(99, 99, 99, 0.12);
    border: 1px solid #636363;
    color: rgba(224, 224, 224, 0.35);
}
.ts-badge-def {
    background: rgba(255, 153, 0, 0.12);
    border: 1px solid rgba(255, 153, 0, 0.3);
    color: #ff9900;
}

/* ── Row actions ─────────────────────────────────────────── */
.ts-row-actions {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}
.ts-btn-icon {
    background: none;
    border: none;
    color: rgba(224, 224, 224, 0.25);
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.12s;
}
.ts-btn-icon.edit:hover {
    color: #ff9900;
    background: rgba(255, 153, 0, 0.08);
}
.ts-btn-icon.del:hover {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.08);
}

/* ── Add button ──────────────────────────────────────────── */
.ts-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    border: 1px solid rgba(28, 187, 140, 0.35);
    background: rgba(28, 187, 140, 0.07);
    color: #1cbb8c;
    cursor: pointer;
    transition: all 0.15s;
}
.ts-add-btn:hover {
    background: rgba(28, 187, 140, 0.14);
    border-color: #1cbb8c;
}

/* ── Modal ───────────────────────────────────────────────── */
.ts-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1060;
    align-items: center;
    justify-content: center;
}
.ts-modal-backdrop.open {
    display: flex;
}
.ts-modal {
    background: #1e2a38;
    border-radius: 8px;
    width: min(480px, 94vw);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.ts-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #636363;
    font-size: 0.82rem;
    font-weight: 600;
}
.ts-modal-close {
    background: none;
    border: none;
    color: rgba(224, 224, 224, 0.35);
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    transition: color 0.12s;
}
.ts-modal-close:hover {
    color: #e0e0e0;
}
.ts-modal-body {
    padding: 1rem;
}
.ts-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #636363;
}

.ts-field {
    margin-bottom: 0.75rem;
}
.ts-label {
    font-size: 0.72rem;
    color: rgba(224, 224, 224, 0.55);
    margin-bottom: 0.25rem;
    font-weight: 600;
}
.ts-input,
.ts-select,
.ts-textarea {
    width: 100%;
    background: #192230;
    border: 1px solid #636363;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.82rem;
    padding: 0.45rem 0.65rem;
    transition: border-color 0.15s;
}
.ts-input:focus,
.ts-select:focus,
.ts-textarea:focus {
    border-color: rgba(255, 153, 0, 0.5);
    outline: none;
}
.ts-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

/* ── Quick reply body preview ────────────────────────────── */
.ts-body-preview {
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(224, 224, 224, 0.5);
}

/* ── FAQ answer preview ──────────────────────────────────── */
.ts-faq-answer-preview {
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(224, 224, 224, 0.5);
}

/* ════════════════════════════════════════════════════════════ */
/* ══ Admin Ticket FAQ ════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════ */

.tf-wrap {
    padding: 1.25rem;
    max-width: 860px;
    margin: 0 auto;
}

/* ── Card header ─────────────────────────────────────────── */
.tf-card {
    background: #1e2a38;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.tf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #636363;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.tf-header-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.tf-header-title {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Search ──────────────────────────────────────────────── */
.tf-search-wrap {
    position: relative;
    flex: 1;
    max-width: 280px;
}
.tf-search-input {
    width: 100%;
    background: #192230;
    border: 1px solid #636363;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.77rem;
    padding: 0.35rem 0.65rem 0.35rem 2rem;
    outline: none;
    transition: border-color 0.15s;
}
.tf-search-input:focus {
    border-color: rgba(255, 153, 0, 0.5);
}
.tf-search-input::placeholder {
    color: rgba(224, 224, 224, 0.25);
}
.tf-search-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(224, 224, 224, 0.3);
    font-size: 0.72rem;
    pointer-events: none;
}

/* ── Empty ───────────────────────────────────────────────── */
.tf-empty {
    padding: 3.5rem 2rem;
    text-align: center;
    background: #1e2a38;
    border-radius: 8px;
}
.tf-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    font-size: 1.3rem;
    color: #636363;
}

/* ── No results ──────────────────────────────────────────── */
.tf-no-results {
    display: none;
    padding: 2.5rem 2rem;
    text-align: center;
    font-size: 0.82rem;
    color: rgba(224, 224, 224, 0.35);
}

/* ── FAQ accordion ───────────────────────────────────────── */
.tf-faq-item {
    background: #1e2a38;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(99, 99, 99, 0.3);
    transition: border-color 0.15s;
}
.tf-faq-item.open {
    border-color: rgba(255, 153, 0, 0.3);
}

.tf-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    gap: 0.75rem;
    user-select: none;
}
.tf-faq-question:hover {
    background: rgba(255, 255, 255, 0.02);
}

.tf-faq-q-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e0e0e0;
    flex: 1;
    min-width: 0;
}
.tf-faq-q-text mark {
    background: rgba(255, 153, 0, 0.25);
    color: #ff9900;
    border-radius: 2px;
    padding: 0 2px;
}

.tf-faq-chevron {
    color: #636363;
    font-size: 0.72rem;
    flex-shrink: 0;
    transition: transform 0.2s, color 0.15s;
}
.tf-faq-item.open .tf-faq-chevron {
    transform: rotate(180deg);
    color: #ff9900;
}

.tf-faq-answer {
    display: none;
    padding: 0 1.1rem 1rem;
    font-size: 0.82rem;
    line-height: 1.7;
    color: rgba(224, 224, 224, 0.75);
    white-space: pre-wrap;
    word-break: break-word;
    border-top: 1px solid rgba(99, 99, 99, 0.25);
    padding-top: 0.75rem;
}
.tf-faq-item.open .tf-faq-answer {
    display: block;
}
.tf-faq-answer mark {
    background: rgba(255, 153, 0, 0.2);
    color: #ff9900;
    border-radius: 2px;
    padding: 0 2px;
}

/* ── Count badge ─────────────────────────────────────────── */
.tf-count {
    font-size: 0.68rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.15rem 0.5rem;
    border-radius: 2rem;
    color: rgba(224, 224, 224, 0.45);
}

/* ── Back button ─────────────────────────────────────────── */
.tf-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    border: 1px solid #636363;
    background: transparent;
    color: rgba(224, 224, 224, 0.55);
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.tf-back-btn:hover {
    border-color: #e0e0e0;
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.04);
}

/* ════════════════════════════════════════════════════════════ */
/* ══ User Ticket View ════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────── */
.tv-wrap {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 992px) {
    .tv-wrap {
        flex-direction: row;
        align-items: flex-start;
    }

    .tv-sidebar {
        width: 280px;
        flex-shrink: 0;
    }

    .tv-main {
        flex: 1;
        min-width: 0;
    }
}

/* ── Sidebar ─────────────────────────────────────────────── */
.tv-sidebar-card {
    background: #1e2a38;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.tv-sidebar-section {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #636363;
}

.tv-sidebar-section:last-child {
    border-bottom: none;
}

.tv-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #636363;
    margin-bottom: 0.3rem;
}

.tv-value {
    font-size: 0.82rem;
    color: #e0e0e0;
}

.tv-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 2rem;
}

.tv-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.st-open .tv-status-dot {
    background: #ff9900;
    box-shadow: 0 0 5px rgba(255, 153, 0, 0.8);
}

.st-open {
    border: 1px solid rgba(255, 153, 0, 0.3);
    color: #ff9900;
    background: rgba(255, 153, 0, 0.1);
}

.st-waiting-staff .tv-status-dot {
    background: #ffc107;
}

.st-waiting-staff {
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
    background: rgba(255, 193, 7, 0.08);
}

.st-waiting-user .tv-status-dot {
    background: #17a2b8;
}

.st-waiting-user {
    border: 1px solid rgba(23, 162, 184, 0.3);
    color: #17a2b8;
    background: rgba(23, 162, 184, 0.08);
}

.st-closed .tv-status-dot {
    background: #636363;
}

.st-closed {
    border: 1px solid #636363;
    color: rgba(224, 224, 224, 0.5);
    background: rgba(255, 255, 255, 0.04);
}

.tv-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem;
    border-radius: 8px;
    border: 1px solid #636363;
    background: transparent;
    color: rgba(224, 224, 224, 0.55);
    font-size: 0.78rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    width: 100%;
}

.tv-back-btn:hover {
    border-color: #e0e0e0;
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.04);
}

.tv-staff-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1cbb8c;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Conversation card ───────────────────────────────────── */
.tv-main {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
}
.tv-conv-card {
    background: #1e2a38;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.tv-conv-card > div:last-of-type {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tv-conv-card > div:last-of-type::-webkit-scrollbar {
    display: none;
}
.tv-reply-card,
.tv-closed-notice,
.tv-rate-card {
    flex-shrink: 0;
}

.tv-conv-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #636363;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tv-conv-header-title {
    font-size: 0.82rem;
    font-weight: 600;
}

.tv-msg-count {
    font-size: 0.65rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.15rem 0.45rem;
    border-radius: 2rem;
    color: rgba(224, 224, 224, 0.5);
}

/* ── Messages ────────────────────────────────────────────── */
.tv-msg {
    padding: 0.95rem 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.tv-msg:not(:last-child) {
    border-bottom: 1px solid rgba(99, 99, 99, 0.4);
}

.tv-msg.from-staff {
    background: #192230;
}

.tv-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.tv-avatar.reporter {
    background: rgba(255, 153, 0, 0.2);
    color: #ff9900;
    border: 1px solid rgba(255, 153, 0, 0.3);
}

.tv-avatar.staff {
    background: rgba(28, 187, 140, 0.2);
    color: #1cbb8c;
    border: 1px solid rgba(28, 187, 140, 0.3);
}

.tv-msg-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.tv-msg-name {
    font-size: 0.82rem;
    font-weight: 600;
}

.tv-msg-time {
    font-size: 0.7rem;
    color: rgba(224, 224, 224, 0.35);
}

.tv-msg-body {
    font-size: 0.82rem;
    line-height: 1.65;
    color: rgba(224, 224, 224, 0.85);
    word-break: break-word;
}

.tv-msg-body a {
    color: #ff9900;
    text-decoration: underline;
}

/* ── Translate button ────────────────────────────────────── */
.tv-translate-btn {
    background: none;
    border: none;
    color: rgba(224, 224, 224, 0.2);
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    font-size: 0.7rem;
    transition: color 0.12s;
    border-radius: 4px;
}

.tv-translate-btn:hover {
    color: #17a2b8;
}

/* ── Translation block ───────────────────────────────────── */
.tv-translation {
    margin-top: 0.65rem;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(23, 162, 184, 0.25);
    background: rgba(23, 162, 184, 0.05);
}

.tv-translation-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: rgba(23, 162, 184, 0.08);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #17a2b8;
}

.tv-translation-body {
    padding: 0.6rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.65;
    color: rgba(224, 224, 224, 0.8);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Reply box ───────────────────────────────────────────── */
.tv-reply-card {
    background: #1e2a38;
    border-radius: 8px;
    overflow: hidden;
}

.tv-reply-header {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #636363;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(224, 224, 224, 0.55);
}

.tv-reply-body {
    padding: 0.85rem 1rem;
}

.tv-reply-body textarea {
    background: #192230;
    border: 1px solid #636363;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.82rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 90px;
    width: 100%;
    padding: 0.6rem 0.8rem;
    transition: border-color 0.15s;
}

.tv-reply-body textarea:focus {
    border-color: rgba(255, 153, 0, 0.5);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.1);
}

.tv-reply-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.65rem;
}

.tv-char-count {
    font-size: 0.7rem;
    color: rgba(224, 224, 224, 0.3);
    transition: color 0.15s;
}

.tv-char-count.warn {
    color: #ffc107;
}

.tv-char-count.limit {
    color: #dc3545;
}

/* ── Message attachments ─────────────────────────────────── */
.tv-msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.tv-att-img {
    width: 110px;
    height: 75px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid #636363;
    cursor: pointer;
    transition: border-color 0.12s, opacity 0.12s;
    display: block;
}

.tv-att-img:hover {
    border-color: #ff9900;
    opacity: 0.9;
}

.tv-att-video {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 153, 0, 0.07);
    border: 1px solid rgba(255, 153, 0, 0.25);
    border-radius: 4px;
    padding: 0.35rem 0.65rem;
    font-size: 0.74rem;
    color: #ff9900;
    text-decoration: none;
    transition: background 0.12s;
}

.tv-att-video:hover {
    background: rgba(255, 153, 0, 0.13);
    color: #ff9900;
    text-decoration: none;
}

/* ── Reply upload zone ───────────────────────────────────── */
.tv-att-sep {
    border-top: 1px solid rgba(99, 99, 99, 0.4);
    margin: 0.75rem 0 0.6rem;
}

.tv-att-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(224, 224, 224, 0.35);
    margin-bottom: 0.4rem;
}

.tv-att-label span {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.tv-upload-zone {
    border: 1.5px dashed #636363;
    border-radius: 5px;
    padding: 0.65rem 0.9rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-size: 0.75rem;
    color: rgba(224, 224, 224, 0.4);
}

.tv-upload-zone:hover,
.tv-upload-zone.drag-over {
    border-color: rgba(255, 153, 0, 0.4);
    background: rgba(255, 153, 0, 0.03);
}

.tv-upload-zone span {
    color: #ff9900;
}

.tv-upload-hint {
    font-size: 0.63rem;
    color: rgba(224, 224, 224, 0.2);
    margin-top: 0.1rem;
}

.tv-att-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.tv-att-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #1e2a38;
    border: 1px solid #636363;
    border-radius: 4px;
    padding: 0.4rem 0.55rem;
    font-size: 0.75rem;
}

.tv-att-thumb {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
}

.tv-att-icon {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    flex-shrink: 0;
    background: rgba(255, 153, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff9900;
    font-size: 0.8rem;
}

.tv-att-info {
    flex-grow: 1;
    min-width: 0;
}

.tv-att-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #e0e0e0;
}

.tv-att-sub {
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1px;
}

.tv-att-size {
    color: rgba(224, 224, 224, 0.3);
}

.tv-att-uploading {
    color: #ffc107;
}

.tv-att-done {
    color: #1cbb8c;
}

.tv-att-err {
    color: #f5a0a8;
}

.tv-att-progress {
    height: 2px;
    background: rgba(255, 153, 0, 0.1);
    border-radius: 1px;
    margin-top: 3px;
    overflow: hidden;
}

.tv-att-bar {
    height: 100%;
    background: #ff9900;
    border-radius: 1px;
    width: 0%;
    transition: width 0.1s;
}

.tv-att-remove {
    background: none;
    border: none;
    color: rgba(224, 224, 224, 0.2);
    cursor: pointer;
    padding: 2px 5px;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.12s;
}

.tv-att-remove:hover {
    color: #f5a0a8;
}

.tv-att-remove:disabled {
    opacity: 0.3;
    pointer-events: none;
}

.tv-att-foot {
    font-size: 0.63rem;
    color: rgba(224, 224, 224, 0.2);
    text-align: right;
    margin-top: 0.2rem;
}

/* ── Pinned message ─────────────────────────────────────── */
.tv-pinned-wrap {
    border-bottom: 1px solid rgba(255, 153, 0, 0.15);
    background: rgba(255, 153, 0, 0.03);
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
}
.tv-pinned-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ff9900;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.tv-pinned-body {
    color: rgba(224, 224, 224, 0.7);
    line-height: 1.5;
    word-break: break-word;
}

/* ── Rating ─────────────────────────────────────────────── */
.tv-rate-card {
    background: #1e2a38;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
    padding: 1rem;
    text-align: center;
}
.tv-rate-title {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: rgba(224, 224, 224, 0.7);
}
.tv-rate-stars {
    display: inline-flex;
    gap: 0.4rem;
}
.tv-rate-stars i {
    font-size: 1.4rem;
    color: #636363;
    cursor: pointer;
    transition: color 0.12s, transform 0.12s;
}
.tv-rate-stars i:hover,
.tv-rate-stars i.hovered {
    color: #ff9900;
    transform: scale(1.15);
}
.tv-rate-stars i.selected {
    color: #ff9900;
}
.tv-rate-thanks {
    font-size: 0.78rem;
    color: rgba(224, 224, 224, 0.5);
    margin-top: 0.4rem;
}
.tv-rate-done {
    display: inline-flex;
    gap: 2px;
}
.tv-rate-done i {
    font-size: 0.85rem;
}
.tv-rate-done i.filled {
    color: #ff9900;
}
.tv-rate-done i.empty {
    color: #636363;
}

/* ── Edited badge ───────────────────────────────────────── */
.tv-msg-edited-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ff9900;
    background: rgba(255, 153, 0, 0.1);
    border: 1px solid rgba(255, 153, 0, 0.25);
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
    margin-left: 0.35rem;
}

/* Closed notice */
.tv-closed-notice {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #636363;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.78rem;
    color: rgba(224, 224, 224, 0.4);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ════════════════════════════════════════════════════════════ */
/* ══ User Ticket New ═════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════ */

.tn-wrap {
    padding: 1.25rem;
}
.tn-card {
    background: #1e2a38;
    border-radius: 8px;
    overflow: hidden;
}

.tn-card-header {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid #636363;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.tn-card-title {
    font-size: 0.85rem;
    font-weight: 600;
}
.tn-body {
    padding: 1.25rem 1.1rem;
}

.tn-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.tn-step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 153, 0, 0.12);
    border: 1px solid rgba(255, 153, 0, 0.3);
    color: #ff9900;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tn-step-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(224, 224, 224, 0.5);
}

.tn-body .form-control,
.tn-body .form-select {
    background: #192230;
    border: 1px solid #636363;
    color: #e0e0e0;
    font-size: 0.82rem;
}
.tn-body .form-control:focus,
.tn-body .form-select:focus {
    border-color: rgba(255, 153, 0, 0.5);
    box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.1);
    background: #192230;
    color: #e0e0e0;
}
.tn-body .form-label {
    font-size: 0.77rem;
    color: rgba(224, 224, 224, 0.6);
    margin-bottom: 0.3rem;
}

.tn-evidence {
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.4);
    border-left: 3px solid #dc3545;
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
    font-size: 0.77rem;
    color: #f5a0a8;
    line-height: 1.55;
    margin-bottom: 1.1rem;
}
.tn-sep {
    border-top: 1px solid #636363;
    margin: 1.1rem 0;
}

.tn-char {
    font-size: 0.7rem;
    color: rgba(224, 224, 224, 0.3);
    transition: color 0.15s;
}
.tn-char.warn {
    color: #ffc107;
}
.tn-char.limit {
    color: #dc3545;
}
.tn-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.65rem;
}

/* ── Attachment upload zone ──────────────────────────────── */
.tn-att-wrap {
    margin-top: 0.85rem;
}
.tn-att-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(224, 224, 224, 0.4);
    margin-bottom: 0.45rem;
}
.tn-att-label span {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.tn-upload-zone {
    border: 1.5px dashed #636363;
    border-radius: 6px;
    padding: 0.8rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.tn-upload-zone:hover,
.tn-upload-zone.drag-over {
    border-color: rgba(255, 153, 0, 0.5);
    background: rgba(255, 153, 0, 0.03);
}
.tn-upload-zone i {
    font-size: 1rem;
    color: #636363;
    display: block;
    margin-bottom: 0.25rem;
}
.tn-upload-text {
    font-size: 0.75rem;
    color: rgba(224, 224, 224, 0.4);
}
.tn-upload-text span {
    color: #ff9900;
}
.tn-upload-hint {
    font-size: 0.65rem;
    color: rgba(224, 224, 224, 0.22);
    margin-top: 0.15rem;
}
.tn-att-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.tn-att-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: #192230;
    border: 1px solid #636363;
    border-radius: 5px;
    padding: 0.45rem 0.6rem;
    font-size: 0.77rem;
}
.tn-att-thumb {
    width: 34px;
    height: 34px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
}
.tn-att-icon {
    width: 34px;
    height: 34px;
    border-radius: 3px;
    flex-shrink: 0;
    background: rgba(255, 153, 0, 0.1);
    border: 1px solid rgba(255, 153, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff9900;
    font-size: 0.85rem;
}
.tn-att-info {
    flex-grow: 1;
    min-width: 0;
}
.tn-att-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #e0e0e0;
}
.tn-att-sub {
    font-size: 0.67rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1px;
}
.tn-att-size {
    color: rgba(224, 224, 224, 0.35);
}
.tn-att-uploading {
    color: #ffc107;
}
.tn-att-done {
    color: #1cbb8c;
}
.tn-att-err {
    color: #f5a0a8;
}
.tn-att-progress {
    height: 2px;
    background: rgba(255, 153, 0, 0.12);
    border-radius: 1px;
    margin-top: 3px;
    overflow: hidden;
}
.tn-att-bar {
    height: 100%;
    background: #ff9900;
    border-radius: 1px;
    width: 0%;
    transition: width 0.1s;
}
.tn-att-remove {
    background: none;
    border: none;
    color: rgba(224, 224, 224, 0.22);
    cursor: pointer;
    padding: 2px 6px;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.12s;
}
.tn-att-remove:hover {
    color: #f5a0a8;
}
.tn-att-remove:disabled {
    opacity: 0.3;
    pointer-events: none;
}
.tn-att-foot {
    font-size: 0.65rem;
    color: rgba(224, 224, 224, 0.22);
    text-align: right;
    margin-top: 0.25rem;
}

/* ── Freight ID row ─────────────────────────────────────── */
#tn-freight-row {
    display: none;
}

/* ── Damage picker ──────────────────────────────────────── */
#tn-damage-section {
    display: none;
}

.tn-damage-lookup {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 0.85rem;
}
.tn-damage-lookup .form-label {
    margin-bottom: 0.3rem;
}
#tn-find-damages {
    height: 38px;
    flex-shrink: 0;
    border: 1px solid #636363;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(224, 224, 224, 0.7);
    font-size: 0.78rem;
    border-radius: 4px;
    padding: 0 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
#tn-find-damages:hover:not(:disabled) {
    border-color: #ff9900;
    color: #ff9900;
}
#tn-find-damages:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tn-damage-msg {
    font-size: 0.75rem;
    color: rgba(224, 224, 224, 0.35);
    padding: 0.5rem 0;
}
.tn-damage-msg.error {
    color: #f5a0a8;
}

/* Damage event cards */
.tn-damage-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tn-damage-card {
    background: #192230;
    border: 1px solid #636363;
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s;
    user-select: none;
}
.tn-damage-card:hover {
    border-color: rgba(255, 153, 0, 0.4);
}
.tn-damage-card.selected {
    border-color: #ff9900;
    background: rgba(255, 153, 0, 0.06);
}
.tn-damage-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}
.tn-damage-time {
    font-size: 0.72rem;
    color: rgba(224, 224, 224, 0.4);
}
.tn-damage-sel-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #636363;
    transition: all 0.15s;
    flex-shrink: 0;
}
.tn-damage-card.selected .tn-damage-sel-dot {
    border-color: #ff9900;
    background: #ff9900;
}
.tn-damage-token {
    font-size: 0.78rem;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.tn-token-value {
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 700;
    color: #ff9900;
    letter-spacing: 0.03em;
}
.tn-damage-parts {
    font-size: 0.72rem;
    color: rgba(224, 224, 224, 0.45);
}
.tn-damage-part-item {
    color: #f5a0a8;
}

/* Selected token confirmation */
#tn-selected-token {
    display: none;
    margin-top: 0.75rem;
    background: rgba(255, 153, 0, 0.08);
    border: 1px solid rgba(255, 153, 0, 0.3);
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    font-size: 0.78rem;
}
#tn-selected-token strong {
    color: #ff9900;
    font-family: monospace;
}

/* ════════════════════════════════════════════════════════════ */
/* ══ User Ticket List ════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════ */

/* ── Ticket list ───────────────────────────────────────── */
.tc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tc-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.25rem 0.9rem 1rem;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color 0.12s;
    text-decoration: none;
}
.tc-item:not(:last-child) {
    border-bottom: 1px solid #636363;
}
.tc-item:hover {
    background-color: #202d3c;
    text-decoration: none;
}

.tc-item.s-open {
    border-left-color: #ff9900;
}
.tc-item.s-waiting-staff {
    border-left-color: #ffc107;
}
.tc-item.s-waiting-user {
    border-left-color: #17a2b8;
}
.tc-item.s-closed {
    border-left-color: #636363;
}

/* Status dot */
.tc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.s-open .tc-dot {
    background: #ff9900;
    box-shadow: 0 0 6px rgba(255, 153, 0, 0.7);
}
.s-waiting-staff .tc-dot {
    background: #ffc107;
}
.s-waiting-user .tc-dot {
    background: #17a2b8;
}
.s-closed .tc-dot {
    background: #636363;
}

.tc-item-id {
    font-family: monospace;
    font-size: 0.75rem;
    color: #636363;
    flex-shrink: 0;
}
.tc-item-reason {
    font-size: 0.85rem;
    font-weight: 500;
    color: #e0e0e0;
}
.tc-item-status {
    font-size: 0.72rem;
    color: rgba(224, 224, 224, 0.55);
    white-space: nowrap;
}
.tc-item-meta {
    font-size: 0.73rem;
    color: rgba(224, 224, 224, 0.4);
}
.tc-item-arrow {
    color: #636363;
    transition: color 0.12s, transform 0.12s;
    flex-shrink: 0;
}
.tc-item:hover .tc-item-arrow {
    color: #e0e0e0;
    transform: translateX(2px);
}

/* Filter chips */
.tc-filters {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #636363;
}
.tc-chip {
    font-size: 0.71rem;
    padding: 0.2rem 0.6rem;
    border-radius: 2rem;
    border: 1px solid #636363;
    background: transparent;
    color: rgba(224, 224, 224, 0.5);
    cursor: pointer;
    transition: all 0.15s;
}
.tc-chip:hover,
.tc-chip.active {
    border-color: #e0e0e0;
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.05);
}
.tc-chip.active.chip-open {
    border-color: #ff9900;
    color: #ff9900;
    background: rgba(255, 153, 0, 0.08);
}
.tc-chip.active.chip-waiting-staff {
    border-color: #ffc107;
    color: #ffc107;
    background: rgba(255, 193, 7, 0.08);
}
.tc-chip.active.chip-waiting-user {
    border-color: #17a2b8;
    color: #17a2b8;
    background: rgba(23, 162, 184, 0.08);
}
.tc-chip.active.chip-closed {
    border-color: #636363;
    color: rgba(224, 224, 224, 0.7);
    background: rgba(255, 255, 255, 0.04);
}

/* Empty state */
.tc-empty {
    padding: 3.5rem 2rem;
    text-align: center;
}
.tc-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    font-size: 1.4rem;
    color: #636363;
}

/* Pagination */
.tc-pagination {
    padding: 0.65rem 1.25rem;
    border-top: 1px solid #636363;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tc-page-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #636363;
    background: transparent;
    color: rgba(224, 224, 224, 0.6);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tc-page-btn:hover {
    background: #202d3c;
    color: #e0e0e0;
    border-color: #e0e0e0;
}
.tc-page-btn.active {
    background: #ff9900;
    border-color: #ff9900;
    color: #000;
    font-weight: 700;
}

/* ── Card header ─────────────────────────────────────────── */
.tc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #636363;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.tc-header-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.tc-header-title {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Search ──────────────────────────────────────────────── */
.tc-search-wrap {
    position: relative;
    flex: 1;
    max-width: 280px;
}
.tc-search-input {
    width: 100%;
    background: #192230;
    border: 1px solid #636363;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.77rem;
    padding: 0.35rem 0.65rem 0.35rem 2rem;
    outline: none;
    transition: border-color 0.15s;
}
.tc-search-input:focus {
    border-color: rgba(255, 153, 0, 0.5);
}
.tc-search-input::placeholder {
    color: rgba(224, 224, 224, 0.25);
}
.tc-search-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(224, 224, 224, 0.3);
    font-size: 0.72rem;
    pointer-events: none;
}

/* No match */
.tc-no-match {
    padding: 2rem;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(224, 224, 224, 0.35);
    display: none;
}

/* Discord alert */
.tc-discord-alert {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid #636363;
    background: rgba(88, 101, 242, 0.06);
    font-size: 0.78rem;
    color: rgba(224, 224, 224, 0.7);
}
.tc-discord-alert i {
    color: #5865f2;
}
.tc-discord-alert a {
    color: #5865f2;
    font-weight: 600;
    text-decoration: underline;
}

/* Notify button */
.tc-notify-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    border: 1px solid #636363;
    background: transparent;
    color: rgba(224, 224, 224, 0.45);
    cursor: pointer;
    transition: all 0.15s;
}
.tc-notify-btn:hover {
    border-color: #e0e0e0;
    color: #e0e0e0;
}
.tc-notify-btn.active {
    border-color: rgba(28, 187, 140, 0.4);
    color: #1cbb8c;
    background: rgba(28, 187, 140, 0.08);
}

/* New reply badge */
.tc-new-badge {
    font-size: 0.62rem;
    font-weight: 700;
    background: rgba(23, 162, 184, 0.15);
    border: 1px solid rgba(23, 162, 184, 0.35);
    color: #17a2b8;
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
    white-space: nowrap;
    animation: tc-pulse 2s ease-in-out infinite;
}
/* Unread badge (closed tickets with unread reply) */
.tc-unread-badge {
    font-size: 0.62rem;
    font-weight: 700;
    background: rgba(255, 153, 0, 0.15);
    border: 1px solid rgba(255, 153, 0, 0.35);
    color: #ff9900;
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
    white-space: nowrap;
}
@keyframes tc-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}
/* ════════════════════════════════════════════════════════════ */
/* ══ Admin Home ══════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════ */

.adm-wrap {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Stat tiles ──────────────────────────────────────────── */
.adm-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}
.adm-tile {
    background: #1e2a38;
    border-radius: 8px;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.adm-tile-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.adm-tile-val {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
}
.adm-tile-lbl {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #636363;
    margin-top: 2px;
}

/* ── Generic card ────────────────────────────────────────── */
.adm-card {
    background: #1e2a38;
    border-radius: 8px;
    overflow: hidden;
}
.adm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #636363;
    gap: 0.5rem;
}
.adm-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #e0e0e0;
}
.adm-card-link {
    font-size: 0.7rem;
    color: rgba(224, 224, 224, 0.35);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.12s;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.adm-card-link:hover {
    color: #ff9900;
}

/* ── Two/three column row ────────────────────────────────── */
.adm-row {
    display: grid;
    gap: 1rem;
}
.adm-row-2 {
    grid-template-columns: 1fr 1fr;
}
.adm-row-3 {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
    .adm-row-2,
    .adm-row-3 {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 901px) and (max-width: 1200px) {
    .adm-row-3 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Ticket stats ────────────────────────────────────────── */
.adm-ticket-stats-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.adm-ticket-stats-bot {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid rgba(99, 99, 99, 0.3);
}
.adm-ts-cell {
    padding: 0.9rem 1rem;
    text-align: center;
    border-right: 1px solid rgba(99, 99, 99, 0.3);
}
.adm-ts-cell:last-child {
    border-right: none;
}
.adm-ts-val {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}
.adm-ts-lbl {
    font-size: 0.63rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #636363;
}

.adm-ts-open {
    color: #ff9900;
}
.adm-ts-unclaimed {
    color: #ffc107;
}
.adm-ts-claimed {
    color: #1cbb8c;
}
.adm-ts-closed {
    color: rgba(224, 224, 224, 0.35);
}

/* ── Stats table ─────────────────────────────────────────── */
.adm-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.adm-stats-table th {
    padding: 0.45rem 0.85rem;
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #636363;
    border-bottom: 1px solid #636363;
    text-align: right;
}
.adm-stats-table th:first-child,
.adm-stats-table th:nth-child(2) {
    text-align: left;
}
.adm-stats-table td {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid rgba(99, 99, 99, 0.2);
    text-align: right;
    color: #e0e0e0;
}
.adm-stats-table tr:last-child td {
    border-bottom: none;
}
.adm-stats-table td:first-child {
    text-align: left;
    color: #636363;
    width: 28px;
}
.adm-stats-table td:nth-child(2) {
    text-align: left;
    font-weight: 500;
}
.adm-stats-table .adm-stat-total {
    font-weight: 700;
    color: #e0e0e0;
}
.adm-delta {
    font-size: 0.72rem;
    color: rgba(28, 187, 140, 0.9);
}

/* ── Recent rows ─────────────────────────────────────────── */
.adm-recent-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.adm-recent-table td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid rgba(99, 99, 99, 0.2);
    color: rgba(224, 224, 224, 0.75);
    vertical-align: middle;
}
.adm-recent-table tr:last-child td {
    border-bottom: none;
}
.adm-recent-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}
.adm-recent-table .adm-id-col {
    color: #636363;
    font-family: monospace;
    font-size: 0.72rem;
    width: 52px;
}
.adm-recent-table td:last-child {
    text-align: right;
    color: rgba(224, 224, 224, 0.3);
    font-size: 0.7rem;
    white-space: nowrap;
}
.adm-recent-link {
    color: #e0e0e0;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.12s;
}
.adm-recent-link:hover {
    color: #ff9900;
    text-decoration: none;
}
.adm-recent-badge {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.13rem 0.45rem;
    border-radius: 2rem;
    white-space: nowrap;
}
.adm-badge-diamond {
    background: rgba(185, 242, 255, 0.1);
    color: #b9f2ff;
    border: 1px solid rgba(185, 242, 255, 0.3);
}
.adm-badge-gold {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.35);
}
.adm-badge-silver {
    background: rgba(173, 181, 189, 0.1);
    color: #adb5bd;
    border: 1px solid rgba(173, 181, 189, 0.3);
}

/* ════════════════════════════════════════════════════════════ */
/* ══ Admin Changelog Edit ════════════════════════════════ */
/* ════════════════════════════════════════════════════════════ */

:root {
    --ck-color-base-border: #4e5863;
    --ck-powered-by-text-color: #bdc0c5;
    --ck-color-base-background: #384350;
    --ck-color-text: #bdc0c5;
    --ck-content: #bdc0c5;
}

/* Custom height for the editor */
.ck-editor__editable {
    min-height: 150px;
    /* Set your desired height */
    background-color: #192230 !important;
    color: #bdc0c5 !important;
}

/* ════════════════════════════════════════════════════════════ */
/* ══ Admin Changelog New ═════════════════════════════════ */
/* ════════════════════════════════════════════════════════════ */

:root {
    --ck-color-base-border: #4e5863;
    --ck-powered-by-text-color: #bdc0c5;
    --ck-color-base-background: #384350;
    --ck-color-text: #bdc0c5;
    --ck-content: #bdc0c5;
}

/* Custom height for the editor */
.ck-editor__editable {
    min-height: 150px;
    /* Set your desired height */
    background-color: #192230 !important;
    color: #bdc0c5 !important;
}

/* ════════════════════════════════════════════════════════════ */
/* ══ Admin Blog Edit ═════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════ */

:root {
    --ck-color-base-border: #4e5863;
    --ck-powered-by-text-color: #bdc0c5;
    --ck-color-base-background: #384350;
    --ck-color-text: #bdc0c5;
    --ck-content: #bdc0c5;
}

/* Custom height for the editor */
.ck-editor__editable {
    min-height: 150px;
    /* Set your desired height */
    background-color: #192230 !important;
    color: #bdc0c5 !important;
}

/* ════════════════════════════════════════════════════════════ */
/* ══ Admin Blog New ══════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════ */

:root {
    --ck-color-base-border: #4e5863;
    --ck-powered-by-text-color: #bdc0c5;
    --ck-color-base-background: #384350;
    --ck-color-text: #bdc0c5;
    --ck-content: #bdc0c5;
}

/* Custom height for the editor */
.ck-editor__editable {
    min-height: 150px;
    /* Set your desired height */
    background-color: #192230 !important;
    color: #bdc0c5 !important;
}

/* ── Ticket live indicators ─────────────────────────────── */
.tv-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1cbb8c;
    margin-right: 4px;
    vertical-align: middle;
    box-shadow: 0 0 4px rgba(28, 187, 140, 0.6);
    animation: tvLivePulse 2s ease-in-out infinite;
}
@keyframes tvLivePulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}
.badge-boost {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1a1a1a;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   GARAGE SYSTEM - Command Center UI
   ═══════════════════════════════════════════════════════════════ */

/* Stat cards with background watermark icons */
.gs-stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 153, 0, 0.12);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.gs-stat-card:hover {
    border-color: rgba(255, 153, 0, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), 0 0 20px rgba(255, 153, 0, 0.06);
}
.gs-stat-card .gs-stat-icon {
    position: absolute;
    right: -4px;
    bottom: -10px;
    font-size: 3.5rem;
    opacity: 0.05;
    color: var(--main-color);
    pointer-events: none;
}
.gs-stat-value {
    font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Garage cards */
.gs-garage-card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.gs-garage-card:hover {
    border-color: rgba(255, 153, 0, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 153, 0, 0.04);
    transform: translateY(-3px);
}
.gs-level-badge {
    background: linear-gradient(135deg, var(--main-color), #cc7a00);
    color: #000 !important;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    text-shadow: none;
}

/* Animated shimmer progress bar */
.gs-progress {
    height: 5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}
.gs-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--main-color), #ffcc66);
    border-radius: 3px;
    position: relative;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gs-progress-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: gs-shimmer 2.5s ease-in-out infinite;
}
@keyframes gs-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Game color left accent strips */
.gs-game-strip {
    width: 3px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 0.325rem 0 0 0.325rem;
}

/* Upgrade level dots */
.gs-upgrade-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    transition: all 0.3s ease;
}
.gs-upgrade-dot.gs-dot-active {
    background: linear-gradient(135deg, var(--success), #0d9668);
    color: #fff !important;
    box-shadow: 0 0 8px rgba(28, 187, 140, 0.35);
}
.gs-upgrade-dot.gs-dot-lapsed {
    background: linear-gradient(135deg, #ffc107, #e6a800);
    color: #000 !important;
}
.gs-upgrade-dot.gs-dot-locked {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.2) !important;
}

/* Truck cards */
.gs-truck-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.gs-truck-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.gs-truck-card.gs-truck-retired {
    opacity: 0.45;
    pointer-events: none;
}

/* Bank dashboard */
.gs-bank-hero {
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.06) 0%, transparent 60%);
    border: 1px solid rgba(255, 153, 0, 0.15);
    border-radius: 0.325rem;
    position: relative;
    overflow: hidden;
}
.gs-bank-hero::before {
    content: "\f155";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    position: absolute;
    right: 20px;
    bottom: -15px;
    font-size: 5rem;
    opacity: 0.03;
    color: var(--main-color);
}
.gs-money {
    font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.gs-money-lg {
    font-size: 2rem;
}
.gs-money-md {
    font-size: 1.25rem;
}

/* Mini stat cards for bank */
.gs-mini-stat {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}
.gs-mini-stat:hover {
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}
.gs-mini-stat .gs-mini-icon {
    position: absolute;
    right: 8px;
    bottom: -4px;
    font-size: 2.5rem;
    opacity: 0.04;
    pointer-events: none;
}

/* Market cards */
.gs-market-card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.gs-market-card:hover {
    border-color: rgba(255, 153, 0, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}
.gs-market-price {
    font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
    font-weight: 700;
    color: var(--main-color) !important;
}

/* Compact buy chip - sits inline next to the market price */
.gs-buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--main-color);
    background: rgba(255, 153, 0, 0.08);
    border: 1px solid rgba(255, 153, 0, 0.3);
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gs-buy-btn:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}
.gs-buy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.gs-buy-btn i {
    font-size: 0.65rem;
}

/* Game switch - mirrors cargoMarket .cm-game-switch */
.mk-game-switch {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(72px, auto);
    background: #192230;
    border: 1px solid rgba(99, 99, 99, 0.25);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}
.mk-game-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: rgba(224, 224, 224, 0.45);
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.mk-game-btn:hover {
    color: rgba(224, 224, 224, 0.85);
}
.mk-game-btn.active {
    color: var(--main-color);
    background: rgba(255, 153, 0, 0.08);
}
.mk-game-btn img {
    height: 14px;
    width: auto;
    opacity: 0.85;
}
.mk-game-btn.active img {
    opacity: 1;
}

/* Section divider with gradient */
.gs-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    margin: 0.75rem 0;
}

/* Section title with accent bar */
.gs-section-title {
    position: relative;
    padding-left: 12px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}
.gs-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    background: var(--main-color);
    border-radius: 2px;
}

/* Segmented tab control */
.gs-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    margin: 0 0 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    list-style: none;
}
.gs-tabs .nav-item {
    margin: 0;
}
.gs-tabs .nav-link {
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    border: none;
    border-radius: 7px;
    padding: 0.5rem 1.1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.gs-tabs .nav-link:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.04);
}
.gs-tabs .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--main-color), #ff7a00);
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.gs-tabs .nav-link i {
    opacity: 0.9;
}

/* Transaction table improvements */
.gs-tx-table tbody tr {
    transition: background 0.15s ease;
}
.gs-tx-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}
.gs-tx-income {
    color: var(--success) !important;
}
.gs-tx-expense {
    color: var(--danger) !important;
}

/* Upgrade cards */
.gs-upgrade-card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}
.gs-upgrade-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Empty slot placeholder */
.gs-empty-slot {
    border: 2px dashed rgba(255, 153, 0, 0.15);
    transition: all 0.3s ease;
}
.gs-empty-slot:hover {
    border-color: rgba(255, 153, 0, 0.35);
    background: rgba(255, 153, 0, 0.02);
}

/* Locked slot */
.gs-locked-slot {
    border: 1px dashed rgba(255, 255, 255, 0.06);
    opacity: 0.4;
}

/* City game dot */
.gs-game-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Upgrade icon container */
.gs-upgrade-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.gs-upgrade-icon-active {
    background: rgba(28, 187, 140, 0.12);
    color: var(--success) !important;
}
.gs-upgrade-icon-lapsed {
    background: rgba(255, 193, 7, 0.12);
    color: #ffc107 !important;
}
.gs-upgrade-icon-locked {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.2) !important;
}

/* Fancy service status bar */
.gs-service-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.gs-service-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* Transfer/sell button group refinement */
.gs-action-btn {
    font-size: 0.72rem;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* Chart card glow */
.gs-chart-card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

/* Month navigator */
.gs-month-nav .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
}

/* Finance table striped rows for garage */
.gs-finance-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gs-finance-table td {
    font-size: 0.8rem;
    vertical-align: middle;
}
.gs-finance-table .gs-money {
    font-size: 0.8rem;
}

/* Activity log timeline */
.gs-activity-item {
    position: relative;
    padding-left: 28px;
    padding-bottom: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    margin-left: 8px;
}
.gs-activity-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}
.gs-activity-dot {
    position: absolute;
    left: -6px;
    top: 4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--card);
    background: var(--main-color);
}

/* Truck accordion list */
.gs-truck-row {
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0.325rem;
    margin-bottom: 4px;
    transition: all 0.2s ease;
    overflow: hidden;
}
.gs-truck-row:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.01);
}
.gs-truck-row.gs-truck-retired {
    opacity: 0.4;
}
.gs-truck-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.gs-truck-header::before {
    content: "";
    width: 3px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 0.325rem 0 0 0.325rem;
    background: var(--gs-gc, rgba(255, 255, 255, 0.1));
}
.gs-truck-chevron {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.3);
    transition: transform 0.2s ease;
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}
.gs-truck-row.open .gs-truck-chevron {
    transform: rotate(90deg);
}
.gs-truck-body {
    display: none;
    padding: 0 12px 10px 34px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}
.gs-truck-row.open .gs-truck-body {
    display: block;
}
.gs-truck-name {
    font-size: 0.8rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gs-truck-meta {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gs-truck-empty-row {
    border: 1px dashed rgba(255, 153, 0, 0.12);
    border-radius: 0.325rem;
    margin-bottom: 4px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Garage sub-navbar */
.gs-subnav {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.325rem;
    padding: 3px;
    margin-bottom: 1rem;
}
.gs-subnav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.gs-subnav-link:hover {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.04);
}
.gs-subnav-link.active {
    color: var(--main-color) !important;
    background: rgba(255, 153, 0, 0.08);
    font-weight: 600;
}
.gs-subnav-link .badge {
    font-size: 0.6rem;
    font-weight: 500;
}
@media (max-width: 576px) {
    .gs-subnav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .gs-subnav-link {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
}

/* Confirm modals */
.gs-modal .modal-content {
    border: 1px solid rgba(255, 153, 0, 0.15);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.gs-modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gs-modal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Leave-company confirm modal */
.vh-leave-modal .modal-content {
    border: 1px solid rgba(255, 91, 107, 0.25);
}
.vh-leave-modal .modal-title {
    color: #ff5b6b;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.vh-leave-modal .modal-title i {
    opacity: 0.85;
}
.vh-leave-lead {
    color: rgba(224, 224, 224, 0.85);
    font-size: 0.85rem;
}
.vh-leave-warn {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
    background: rgba(255, 91, 107, 0.08);
    border: 1px solid rgba(255, 91, 107, 0.2);
    border-radius: 6px;
    font-size: 0.75rem;
    color: rgba(255, 91, 107, 0.95);
    line-height: 1.4;
}
.vh-leave-warn i {
    margin-top: 2px;
    opacity: 0.8;
    flex-shrink: 0;
}
.vh-leave-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(224, 224, 224, 0.5);
    margin-bottom: 0.4rem;
}
.vh-leave-label code {
    color: #ff9900;
    background: rgba(255, 153, 0, 0.08);
    border: 1px solid rgba(255, 153, 0, 0.2);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.vh-leave-input {
    background: #192230;
    border: 1px solid rgba(99, 99, 99, 0.35);
    color: rgba(224, 224, 224, 0.9);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.vh-leave-input::placeholder {
    color: rgba(224, 224, 224, 0.25);
}
.vh-leave-input:focus {
    background: #192230;
    color: rgba(224, 224, 224, 0.95);
    border-color: rgba(255, 91, 107, 0.5);
    box-shadow: 0 0 0 2px rgba(255, 91, 107, 0.12);
}
.vh-leave-modal .btn-danger.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Generic vhConfirm() modal - reuses .vh-leave-modal palette + adds rows */
.vh-confirm-modal .modal-content { border-color: rgba(255, 153, 0, 0.25); }
.vh-confirm-modal .modal-title    { color: #ff9900; }
.vh-confirm-warn-soft {
    background: rgba(255, 153, 0, 0.08) !important;
    border-color: rgba(255, 153, 0, 0.22) !important;
    color: rgba(255, 199, 100, 0.95) !important;
}
.vh-confirm-rows {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(99, 99, 99, 0.22);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
}
.vh-confirm-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(99, 99, 99, 0.12);
}
.vh-confirm-row:last-child { border-bottom: 0; }
.vh-confirm-row .lbl {
    color: rgba(224, 224, 224, 0.55);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.65rem;
}
.vh-confirm-row .val {
    color: #e0e0e0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vh-confirm-row.accent      { background: rgba(255, 153, 0, 0.06); }
.vh-confirm-row.accent .val { color: #ff9900; }
.vh-confirm-row.warn        { background: rgba(255, 91, 107, 0.06); }
.vh-confirm-row.warn .val   { color: #ff5b6b; }

/* ════════════════════════════════════════════════════════════════════
   Truck Card v2 - fleet overview
   Industrial cockpit-telemetry. SVG wear gauge as focal point.
   ════════════════════════════════════════════════════════════════════ */

.truck-card-cell {
    animation: tc-cell-enter 0.55s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    animation-delay: var(--enter-delay, 0s);
}
@keyframes tc-cell-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.truck-card-v2 {
    --game-color: #6b7280;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.12) 100%), var(--card);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 14px 16px 14px 20px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
    transition: border-color 0.25s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease;
}

/* Faint instrument-panel grid + corner accent */
.truck-card-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--game-color) 14%, transparent) 0%, transparent 45%),
        repeating-linear-gradient(0deg, transparent 0, transparent 31px, rgba(255, 255, 255, 0.012) 31px, rgba(255, 255, 255, 0.012) 32px);
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.25s ease;
}

.truck-card-v2:hover {
    border-color: color-mix(in srgb, var(--game-color) 55%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42), 0 0 32px -8px color-mix(in srgb, var(--game-color) 55%, transparent);
}
.truck-card-v2:hover::before {
    opacity: 1;
}

.truck-card-v2.is-retired {
    opacity: 0.42;
    pointer-events: none;
    filter: grayscale(0.45);
}

/* Game-color accent stripe down the left edge */
.tc-strip {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--game-color) 0%, color-mix(in srgb, var(--game-color) 30%, transparent) 100%);
    box-shadow: 0 0 12px color-mix(in srgb, var(--game-color) 50%, transparent);
}

/* ─── Header ─── */
.tc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.tc-id {
    min-width: 0;
}
.tc-game {
    display: block;
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--game-color);
    margin-bottom: 3px;
}
.tc-name {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.2px;
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-model {
    display: block;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid;
    flex-shrink: 0;
    white-space: nowrap;
}
.tc-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tc-status.status-available {
    color: var(--success);
    border-color: rgba(28, 187, 140, 0.38);
    background: rgba(28, 187, 140, 0.07);
}
.tc-status.status-available .tc-status-dot {
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}
.tc-status.status-underway {
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.42);
    background: rgba(255, 193, 7, 0.08);
}
.tc-status.status-underway .tc-status-dot {
    background: #ffc107;
    animation: tc-pulse-dot 1.6s ease-in-out infinite;
}
.tc-status.status-retired {
    color: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}
.tc-status.status-retired .tc-status-dot {
    background: rgba(255, 255, 255, 0.25);
}
@keyframes tc-pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.85);
    }
}

/* ─── Telemetry: gauge + multiplier ─── */
.tc-telemetry {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 0;
    margin-bottom: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
}

.tc-gauge {
    position: relative;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
}
.tc-gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
.tc-gauge-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.07);
    stroke-width: 4;
}
.tc-gauge-fill {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dasharray 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 4px currentColor);
    animation: tc-gauge-draw 1s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
@keyframes tc-gauge-draw {
    from {
        stroke-dasharray: 0 999;
    }
}

.tc-gauge-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.tc-gauge-text strong {
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
    letter-spacing: -0.5px;
}
.tc-gauge-text strong small {
    font-size: 0.55rem;
    opacity: 0.5;
    margin-left: 1px;
    font-weight: 600;
}
.tc-gauge-text > span {
    font-size: 0.5rem;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.32);
    margin-top: 4px;
    font-weight: 700;
    text-transform: uppercase;
}

.tc-mult {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    min-width: 0;
}
.tc-mult strong {
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -1.2px;
    text-shadow: 0 0 22px currentColor;
}
.tc-mult strong small {
    font-size: 0.85rem;
    opacity: 0.6;
    font-weight: 500;
}
.tc-mult > span {
    font-size: 0.55rem;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.38);
    margin-top: 6px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

/* ─── Location block (prominent) ─── */
.tc-location {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--game-color) 6%, transparent) 0%, transparent 70%), rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.tc-location::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--game-color);
    opacity: 0.7;
}
.tc-location-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.tc-location-pin {
    font-size: 0.95rem;
    color: var(--main-color);
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--main-color) 50%, transparent));
}
.tc-location-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    gap: 2px;
}
.tc-location-city {
    font-size: 0.92rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-location-garage {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-location-garage i {
    font-size: 0.55rem;
    opacity: 0.7;
}
.tc-location-odo {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.85);
}
.tc-location-odo .gs-money {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.92);
}
.tc-location-odo small {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

/* ─── Service interval row ─── */
.tc-service {
    margin-top: auto;
    position: relative;
    z-index: 1;
}
.tc-service-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 5px;
    font-weight: 700;
}
.tc-service-status {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.68rem;
    font-weight: 600;
    text-align: right;
    font-family: "JetBrains Mono", "Fira Code", monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-service-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}
.tc-service-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px currentColor;
}

/* ─── Footer flags (overdue / engine-swap-ready) ─── */
.tc-flags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px -16px -14px -20px;
    padding: 9px 16px 9px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
    position: relative;
    z-index: 1;
}
.tc-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    padding: 3px 8px;
    border-radius: 4px;
}
.tc-flag i {
    font-size: 0.65rem;
}
.tc-flag-suspended {
    background: rgba(220, 53, 69, 0.14);
    color: #ff6b7a;
    border: 1px solid rgba(220, 53, 69, 0.36);
}
.tc-flag-swap {
    background: rgba(255, 153, 0, 0.1);
    color: var(--main-color);
    border: 1px solid rgba(255, 153, 0, 0.4);
    animation: tc-swap-glow 2.6s ease-in-out infinite;
}
@keyframes tc-swap-glow {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0);
    }
    50% {
        box-shadow: 0 0 14px rgba(255, 153, 0, 0.32);
    }
}

.truck-card-v2.is-overdue {
    border-color: rgba(220, 53, 69, 0.22);
}
.truck-card-v2.is-overdue:hover {
    border-color: rgba(220, 53, 69, 0.6);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42), 0 0 28px -6px rgba(220, 53, 69, 0.4);
}

/* Wear track with engine-swap milestone tick (truck single page) */
.tw-wear-track {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: visible;
}
.tw-wear-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.tw-wear-mark {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: rgba(255, 153, 0, 0.55);
    border-radius: 1px;
    transform: translateX(-1px);
    box-shadow: 0 0 6px rgba(255, 153, 0, 0.6);
}
.tw-wear-mark::after {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--main-color);
    white-space: nowrap;
    opacity: 0.7;
    font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────────
   .vh-subnav - slim section sub-navigation (shared across Premium/Profile/etc)
   Replaces the old `<nav class="navbar navbar-expand-lg navbar-light bg-light">`
   ────────────────────────────────────────────────────────────────────── */
.vh-subnav {
    background: #1e2a38;
    padding: 0 1.25rem;
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    border-bottom: 1px solid rgba(99, 99, 99, 0.15);
    min-height: 42px;
}
.vh-subnav-tabs {
    display: flex;
    align-items: stretch;
    flex: 1;
    flex-wrap: wrap;
}
.vh-subnav-tab {
    padding: 0.7rem 0.85rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(224, 224, 224, 0.4);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.vh-subnav-tab:hover {
    color: rgba(224, 224, 224, 0.85);
}
.vh-subnav-tab.active {
    color: #ff9900;
    border-bottom-color: #ff9900;
}
.vh-subnav-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-left: 0.5rem;
}
.vh-subnav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 12px;
    border-radius: 5px;
    background: rgba(255, 153, 0, 0.1);
    color: #ff9900;
    border: 1px solid rgba(255, 153, 0, 0.3);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.vh-subnav-cta:hover {
    background: rgba(255, 153, 0, 0.2);
    color: #ff9900;
}
.vh-subnav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    color: rgba(224, 224, 224, 0.5);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(99, 99, 99, 0.2);
    text-decoration: none;
    transition: all 0.15s;
}
.vh-subnav-icon-btn:hover {
    color: #ff9900;
    border-color: rgba(255, 153, 0, 0.3);
    background: rgba(255, 153, 0, 0.08);
}
.vh-subnav-icon-btn.danger:hover {
    color: #ff5b6b;
    border-color: rgba(255, 91, 107, 0.35);
    background: rgba(255, 91, 107, 0.08);
}
.vh-subnav-cooldown {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 91, 107, 0.85);
    padding: 0 0.25rem;
    white-space: nowrap;
}

/* dropdown variant: tab that opens a menu on hover */
.vh-subnav .vh-subnav-dd {
    position: relative;
    display: flex;
}
.vh-subnav-tab.has-menu::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 0.45rem;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid currentColor;
    opacity: 0.55;
    transition: transform 0.15s;
    align-self: center;
}
.vh-subnav .vh-subnav-dd:hover .vh-subnav-tab.has-menu::after,
.vh-subnav .vh-subnav-dd.open .vh-subnav-tab.has-menu::after {
    transform: rotate(180deg);
}

.vh-subnav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1040;
    background: #1e2a38;
    background-clip: padding-box;
    border: 1px solid rgba(99, 99, 99, 0.25);
    border-top: 6px solid transparent;
    border-radius: 6px;
    padding: 0.3rem;
    margin-top: 0;
    min-width: 180px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    list-style: none;
}
.vh-subnav .vh-subnav-dd:hover .vh-subnav-menu,
.vh-subnav .vh-subnav-dd:focus-within .vh-subnav-menu,
.vh-subnav .vh-subnav-dd.open .vh-subnav-menu {
    display: block;
}
.vh-subnav-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: rgba(224, 224, 224, 0.75);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.45rem 0.7rem;
    border-radius: 4px;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.vh-subnav-menu-item:hover,
.vh-subnav-menu-item:focus {
    background: #202d3c;
    color: #ff9900;
}
.vh-subnav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ff9900;
    color: #1a1a1a;
    font-size: 0.62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* dissolved-company banner sits flush below the subnav */
.vh-subnav-alert {
    background: rgba(255, 91, 107, 0.08);
    color: rgba(255, 91, 107, 0.95);
    border-bottom: 1px solid rgba(255, 91, 107, 0.25);
    padding: 0.55rem 1.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.02em;
}

/* =============================================================================
   Notification Dropdowns
   ============================================================================= */

.notif-dropdown {
    min-width: 320px;
    max-width: 360px;
}

.notif-dropdown .dropdown-menu-header {
    font-weight: 600;
}

.notif-scroll {
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.notif-scroll::-webkit-scrollbar {
    width: 5px;
}

.notif-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.notif-scroll .list-group-item {
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1rem;
    transition: background-color 0.15s;
}

.notif-scroll .list-group-item:last-child {
    border-bottom: none;
}

.notif-scroll .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.notif-scroll .list-group-item.notif-unread {
    background-color: rgba(59, 125, 221, 0.08);
    border-left: 3px solid #3b7ddd;
}

.notif-scroll .list-group-item.notif-unread:hover {
    background-color: rgba(59, 125, 221, 0.14);
}

/* =============================================================
   Topbar dropdowns - redesign palette
   Scoped to .topbar so we don't disturb dropdowns elsewhere.
   ============================================================= */
.topbar .dropdown-menu {
    background-color: #1e2a38;
    border: 1px solid rgba(99, 99, 99, 0.25);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    padding: 0.35rem;
    color: #e0e0e0;
    margin-top: 6px !important;
    min-width: 220px;
}

.topbar .dropdown-menu > .dropdown-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 5px;
    font-size: 0.82rem !important;
    font-weight: 500;
    color: rgba(224, 224, 224, 0.85);
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}
.topbar .dropdown-menu > .dropdown-item i,
.topbar .dropdown-menu > .dropdown-item svg {
    color: rgba(224, 224, 224, 0.55);
    font-size: 0.82rem; width: 14px; height: 14px;
    flex-shrink: 0;
}
.topbar .dropdown-menu > .dropdown-item:hover,
.topbar .dropdown-menu > .dropdown-item:focus {
    background-color: #202d3c;
    color: #ffffff;
}
.topbar .dropdown-menu > .dropdown-item:hover i,
.topbar .dropdown-menu > .dropdown-item:hover svg,
.topbar .dropdown-menu > .dropdown-item:focus i,
.topbar .dropdown-menu > .dropdown-item:focus svg {
    color: #ff9900;
}

.topbar .dropdown-menu .dropdown-divider {
    margin: 0.3rem 0.15rem;
    border: 0; height: 1px;
    background: rgba(99, 99, 99, 0.18);
}

.topbar .dropdown-menu .dropdown-header {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: rgba(224, 224, 224, 0.4);
    padding: 0.55rem 0.7rem 0.35rem;
    margin: 0;
}

/* Notification dropdown specifics (override generic + earlier scoped rules) */
.topbar .notif-dropdown {
    padding: 0;
    min-width: 340px;
    max-width: 380px;
}
.topbar .notif-dropdown .dropdown-menu-header {
    padding: 0.7rem 0.95rem;
    border-bottom: 1px dashed rgba(99, 99, 99, 0.18);
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: rgba(224, 224, 224, 0.55);
}
.topbar .notif-dropdown .dropdown-menu-header span {
    color: #ff9900;
    font-variant-numeric: tabular-nums;
}
.topbar .notif-dropdown .dropdown-menu-footer {
    padding: 0.55rem 0.95rem;
    border-top: 1px dashed rgba(99, 99, 99, 0.18);
    text-align: center;
}
.topbar .notif-dropdown .dropdown-menu-footer a {
    font-size: 0.74rem; font-weight: 600;
    color: rgba(224, 224, 224, 0.55) !important;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.12s;
}
.topbar .notif-dropdown .dropdown-menu-footer a:hover {
    color: #ff9900 !important;
}

.topbar .notif-dropdown .notif-scroll {
    background: transparent;
    padding: 0.25rem;
}
.topbar .notif-dropdown .notif-scroll .list-group-item {
    background: transparent;
    border: 0 !important;
    border-radius: 5px;
    padding: 0.6rem 0.7rem;
    color: rgba(224, 224, 224, 0.85);
    font-size: 0.8rem;
    margin-bottom: 1px;
    transition: background-color 0.12s;
}
.topbar .notif-dropdown .notif-scroll .list-group-item:hover {
    background-color: #202d3c;
}
.topbar .notif-dropdown .notif-scroll .list-group-item.notif-unread {
    background-color: rgba(255, 153, 0, 0.06);
    border-left: 2px solid #ff9900 !important;
    padding-left: calc(0.7rem - 2px);
}
.topbar .notif-dropdown .notif-scroll .list-group-item.notif-unread:hover {
    background-color: rgba(255, 153, 0, 0.12);
}
.topbar .notif-dropdown .notif-scroll .text-muted {
    color: rgba(224, 224, 224, 0.32) !important;
}

/* Avatar+name caret dropdown trigger */
.topbar .dropdown-username .fa-angle-down {
    color: rgba(224, 224, 224, 0.55);
    margin-left: 0.4rem; font-size: 0.7rem;
    transition: color 0.12s, transform 0.15s;
}
.topbar .dropdown-username.show .fa-angle-down,
.topbar .dropdown-username[aria-expanded="true"] .fa-angle-down {
    color: #ff9900; transform: rotate(180deg);
}

/* =============================================================
   Language switcher offcanvas
   ============================================================= */
.lang-canvas {
    background-color: #192230;
    color: #e0e0e0;
    width: 380px !important;
    max-width: 92vw;
    border-left: 1px solid rgba(99, 99, 99, 0.18);
}

.lang-canvas-h {
    padding: 0.85rem 1.1rem;
    background: #1e2a38;
    border-bottom: 1px solid rgba(99, 99, 99, 0.18);
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
}
.lang-canvas-title {
    font-size: 0.95rem; font-weight: 600;
    color: #e0e0e0;
    display: inline-flex; align-items: center; gap: 0.55rem;
}
.lang-canvas-title i { color: #ff9900; font-size: 0.85rem; }
.lang-canvas-close {
    background: transparent;
    border: 1px solid rgba(99, 99, 99, 0.25);
    color: rgba(224, 224, 224, 0.55);
    width: 28px; height: 28px;
    border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.lang-canvas-close:hover {
    color: #e0e0e0;
    border-color: rgba(255, 153, 0, 0.45);
    background: #202d3c;
}

.lang-canvas-body {
    padding: 0.85rem;
    display: flex; flex-direction: column;
    gap: 0.7rem;
    overflow: hidden;
    height: calc(100% - 56px);
}

.lang-search-wrap {
    position: relative;
}
.lang-search-wrap > i {
    position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%);
    color: rgba(224, 224, 224, 0.32);
    font-size: 0.78rem;
    pointer-events: none;
}
.lang-search {
    width: 100%;
    background: #1e2a38;
    border: 1px solid rgba(99, 99, 99, 0.25);
    color: #e0e0e0;
    border-radius: 5px;
    padding: 0.45rem 0.65rem 0.45rem 1.95rem;
    font-size: 0.82rem; outline: none;
    transition: border-color 0.12s;
}
.lang-search:focus { border-color: rgba(255, 153, 0, 0.45); }
.lang-search::placeholder { color: rgba(224, 224, 224, 0.32); }

.lang-list {
    display: flex; flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.lang-list::-webkit-scrollbar { width: 6px; }
.lang-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }

.lang-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto 14px;
    align-items: center; gap: 0.65rem;
    padding: 0.5rem 0.7rem;
    background: #1e2a38;
    border: 1px solid rgba(99, 99, 99, 0.12);
    border-radius: 5px;
    text-decoration: none !important;
    color: rgba(224, 224, 224, 0.85);
    font-size: 0.84rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.lang-item:hover {
    background: #202d3c;
    color: #ffffff;
    border-color: rgba(255, 153, 0, 0.25);
}
.lang-item.is-active {
    background: rgba(255, 153, 0, 0.06);
    border-left: 2px solid #ff9900;
    padding-left: calc(0.7rem - 2px);
    color: #ffffff;
}
.lang-item.is-active:hover { background: rgba(255, 153, 0, 0.1); }

.lang-item .lang-flag {
    width: 28px; height: 18px;
    border-radius: 2px;
    object-fit: cover;
    display: block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.lang-item .lang-name {
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lang-item .lang-code {
    font-size: 0.62rem; font-weight: 700;
    color: rgba(224, 224, 224, 0.32);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(99, 99, 99, 0.12);
}
.lang-item.is-active .lang-code { color: #ff9900; border-color: rgba(255, 153, 0, 0.3); background: rgba(255, 153, 0, 0.06); }
.lang-item .lang-check { color: #ff9900; font-size: 0.78rem; }
.lang-item:not(.is-active) .lang-check { display: none; }

.lang-empty {
    padding: 1.5rem 0.5rem;
    text-align: center;
    color: rgba(224, 224, 224, 0.32);
    font-size: 0.82rem;
}