/* ====== base.css - yfsp.tv Clone - Variables, Reset, Fonts ====== */
:root {
    --bg-body: #090B21;
    --bg-nav: rgba(9,11,33,0.95);
    --bg-nav-solid: #0a0c24;
    --bg-secondary: #0f1232;
    --bg-card: #151840;
    --bg-card-hover: #1a1f50;
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255,255,255,0.7);
    --text-muted: rgba(255,255,255,0.4);
    --accent-red: #FF4757;
    --accent-red-hover: #ff5a6a;
    --accent-gold: #FFD700;
    --accent-blue: #4A90D9;
    --search-bg: rgba(152,152,152,0.2);
    --search-focus: rgba(152,152,152,0.35);
    --rank-1: #FFD700;
    --rank-2: #C0C0C0;
    --rank-3: #CD7F32;
    --border-color: rgba(255,255,255,0.06);
    --container-width: 1270px;
    --nav-height: 62px;
    --subnav-height: 42px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-full: 50px;
    --shadow-card: 0 2px 12px rgba(0,0,0,0.3);
    --transition: all 0.25s ease;
    --font-family: -apple-system, system-ui, arial, "Segoe UI", Roboto, "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei", sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:13px; scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }

body {
    font-family: var(--font-family);
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color:inherit; text-decoration:none; transition: var(--transition); }
a:hover { color: var(--accent-red); }
img { max-width:100%; display:block; }
ul, ol { list-style:none; }
button { border:none; background:none; cursor:pointer; font:inherit; color:inherit; }
input { border:none; outline:none; font:inherit; color:inherit; background:none; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.22); }

::selection { background: var(--accent-red); color:#fff; }

/* Utility */
.d-flex { display:flex; }
.d-inline { display:inline; }
.align-items-center { align-items:center; }
.ml-4 { margin-left:16px; }
.text-gold { color: var(--accent-gold); }
.text-muted { color: var(--text-muted); }
.hide { display:none !important; }

/* Skeleton loading */
@keyframes shimmer {
    0% { background-position:-200% 0; }
    100% { background-position:200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
    background-size:200% 100%;
    animation: shimmer 1.5s infinite;
}