@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Sora:wght@300;400;500;600;700;800&display=swap');

:root {
    --tc-bg: #07090f;
    --tc-card: #0d1220;
    --tc-card-2: #121a2f;
    --tc-border: rgba(255, 255, 255, 0.06);
    --tc-accent: #3461d2;
    --tc-accent-2: #274aa8;
    --tc-accent-soft: rgba(52, 97, 210, 0.2);
    --tc-text: #e2e8f0;
    --tc-muted: #94a3b8;
    --tc-scroll-track: rgba(15, 23, 42, 0.58);
    --tc-scroll-thumb: #3461d2;
    --tc-scroll-thumb-hover: #4a77e8;
}

html {
    font-size: 15px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Sora', sans-serif !important;
    background: radial-gradient(900px 520px at 18% -10%, rgba(52, 97, 210, 0.26), transparent 60%),
                radial-gradient(700px 420px at 80% 10%, rgba(39, 74, 168, 0.16), transparent 55%),
                var(--tc-bg) !important;
    color: var(--tc-text) !important;
    line-height: 1.6;
    font-weight: 400;
}

/* Keep pixel style on key labels only, not all body text. */
h1,
h2,
h3,
.dashboard-section-title,
.dashboard-hero h1,
.dashboard-hero h2,
.pixel-font {
    font-family: 'Press Start 2P', 'Sora', sans-serif !important;
    line-height: 1.25;
}

.dashboard-hero h1 {
    padding-top: 0.05em;
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

.bg-card {
    background-color: var(--tc-card) !important;
    border-color: var(--tc-border) !important;
}

.sidebar-link {
    font-family: 'Sora', sans-serif !important;
    font-weight: 600;
    color: var(--tc-muted) !important;
    border-left-color: transparent !important;
    font-size: 1.12rem !important;
    letter-spacing: 0.01em;
}

.sidebar-link i {
    font-size: 1rem;
}

/* SPA page-style injection can place `.sidebar-link { display:flex }` after Tailwind utilities.
   Force hidden staff entries to stay hidden regardless of style order. */
.sidebar-link.hidden,
#staff-section.hidden {
    display: none !important;
}

.sidebar-link:hover,
.sidebar-link.active {
    background: rgba(52, 97, 210, 0.2) !important;
    color: #fff !important;
    border-left-color: var(--tc-accent) !important;
}

/* Unified scrollbar styling for page content (right side) and custom scroll regions. */
main {
    scrollbar-width: thin;
    scrollbar-color: var(--tc-scroll-thumb) var(--tc-scroll-track);
}

main::-webkit-scrollbar,
.custom-scroll::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

main::-webkit-scrollbar-track,
.custom-scroll::-webkit-scrollbar-track {
    background: var(--tc-scroll-track) !important;
    border-radius: 999px !important;
}

main::-webkit-scrollbar-thumb,
.custom-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--tc-scroll-thumb), var(--tc-accent-2)) !important;
    border-radius: 999px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}

main::-webkit-scrollbar-thumb:hover,
.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--tc-scroll-thumb-hover), var(--tc-scroll-thumb)) !important;
}

.tab-btn,
.subtab-btn {
    background: var(--tc-card-2) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--tc-muted) !important;
}

.tab-btn.active,
.subtab-btn.active {
    background: var(--tc-accent) !important;
    color: #fff !important;
    border-color: var(--tc-accent) !important;
}

button,
.btn-primary {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover,
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(52, 97, 210, 0.3);
}

.tc-no-glow-btn,
.tc-no-glow-btn:hover {
    transform: none !important;
    box-shadow: none !important;
}

input,
textarea,
select {
    background-color: #0b1220 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--tc-accent) !important;
    box-shadow: 0 0 0 3px rgba(52, 97, 210, 0.24) !important;
}

.card-shadow {
    box-shadow: 0 20px 40px rgba(2, 8, 23, 0.65);
}

.badge-accent {
    background: var(--tc-accent-soft) !important;
    color: #b9c8ff !important;
    border: 1px solid rgba(52, 97, 210, 0.35) !important;
}

.shop-item-section {
    padding-top: 1.9rem;
    padding-bottom: 1.9rem;
    min-height: 60vh;
}

.shop-item-grid {
    align-items: stretch;
    height: 100%;
}

.shop-item-media {
    height: 100%;
    min-height: 100%;
    padding: 0;
    justify-content: stretch;
}

.shop-item-media-frame {
    width: 100%;
    height: 100%;
    max-width: none;
    background: rgba(2, 6, 23, 0.35);
}

@media (min-width: 1024px) {
    .shop-item-grid {
        grid-template-columns: 550px minmax(0, 1fr) !important;
    }

    .shop-item-section {
        padding-top: 2.2rem;
        padding-bottom: 2.2rem;
        min-height: 62vh;
    }
}

.dashboard-hero {
    background: radial-gradient(120% 120% at 10% 0%, rgba(52, 97, 210, 0.32), transparent 55%),
                linear-gradient(120deg, rgba(15, 23, 42, 0.95), rgba(8, 14, 30, 0.92));
}

.dashboard-hero-glow {
    background: radial-gradient(circle, rgba(34, 211, 238, 0.25), transparent 60%);
}

.dashboard-status {
    background: rgba(2, 6, 23, 0.55);
}

.dashboard-stat {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(2, 8, 23, 0.6);
}

.dashboard-shop {
    background: linear-gradient(115deg, rgba(39, 74, 168, 0.85), rgba(52, 97, 210, 0.7));
}

.dashboard-vote {
    background: linear-gradient(160deg, rgba(6, 95, 70, 0.45), rgba(13, 18, 32, 0.92));
}

.dashboard-section-title {
    position: static;
}

.dashboard-wiki-card {
    background: linear-gradient(135deg, rgba(13, 18, 32, 0.9), rgba(15, 23, 42, 0.9));
}

.dashboard-wiki-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #cbd5f5;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.85), rgba(10, 16, 32, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dashboard-wiki-card:hover .dashboard-wiki-icon {
    transform: translateY(-1px) scale(1.02);
    border-color: rgba(52, 97, 210, 0.55);
}

.tc-card,
main .bg-card {
    background: linear-gradient(145deg, rgba(13, 18, 32, 0.96), rgba(10, 15, 28, 0.9));
    border-color: rgba(148, 163, 184, 0.08);
    box-shadow: 0 18px 32px rgba(2, 8, 23, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tc-card:hover,
main .bg-card:hover {
    transform: translateY(-2px);
    border-color: rgba(52, 97, 210, 0.45);
    box-shadow: 0 24px 40px rgba(2, 8, 23, 0.65);
}

.tc-section-title {
    position: static;
}