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

body {
    font-family: 'Inter', sans-serif;
    color: #f3f4f6;
    overflow: hidden;
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #1f2937; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #6b7280; }
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #4b5563 #1f2937; }
.chart-container { position: relative; width: 100%; }
#item-price-chart-container { width: 100%; height: 100%; }
canvas { display: block; max-width: 100%; height: auto; }
.item-selected { border-left: 3px solid #818cf8; padding-left: calc(0.5rem - 3px); transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; }
#item-list li:not(.item-selected) { transition: background-color 0.2s ease-in-out; }
#item-list li:not(.item-selected):hover { background-color: #1f2937; cursor: pointer; }
.trend-up { color: #34d399; }
.trend-down { color: #f87171; }
.trend-neutral { color: #9ca3af; }
#item-list img { vertical-align: middle; }
.footer-logo { height: 0.75rem; width: 0.75rem; margin-right: 0.375rem; display: inline-block; vertical-align: baseline; }
button { transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.15s ease-in-out; }

/* 1.9.9 authenticated header: brand first, player/settings underneath. */
aside > div.flex.items-center.justify-between:first-of-type {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center !important;
    column-gap: 0.75rem;
    row-gap: 0.45rem;
}
aside > div.flex.items-center.justify-between:first-of-type > :first-child {
    grid-column: 1 / -1;
    grid-row: 1;
    flex-direction: row !important;
    align-items: center !important;
    min-width: 0 !important;
}
aside > div.flex.items-center.justify-between:first-of-type > :first-child img {
    width: 1.75rem !important;
    height: 1.75rem !important;
}
aside > div.flex.items-center.justify-between:first-of-type > :first-child span {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
#nascraft-player-identity {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    justify-self: start !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow: visible !important;
}
#nascraft-player-identity #user-display {
    max-width: 9.5rem !important;
    min-width: 0;
    margin: 0 !important;
    text-align: left !important;
    flex: 0 1 auto;
}
#nascraft-settings-btn {
    flex: 0 0 auto !important;
    margin-left: 0.25rem !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}
#auth-controls {
    grid-column: 2;
    grid-row: 2;
    justify-self: end !important;
    min-width: max-content;
}
#auth-controls > div {
    justify-content: flex-end !important;
}