/* ═══════════════════════════════════════════════════
   GREENLIGHT.CSS — Grizzly Stream v2.0
   ═══════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────── */
:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-card: #161616;
    --bg-card-hover: #1c1c1c;
    --text-primary: #ffffff;
    --text-secondary: #888888;
    --text-muted: rgba(255,255,255,0.4);
    --accent-red: #e50914;
    --accent-gold: #ffd700;
    --green: #00ff88;
    --green-dim: rgba(0,255,136,0.12);
    --green-border: rgba(0,255,136,0.25);
    --blue: #0ea5e9;
    --blue-dim: rgba(14,165,233,0.12);
    --purple: #a855f7;
    --purple-dim: rgba(168,85,247,0.12);
    --border: rgba(255,255,255,0.07);
    --border-hover: rgba(255,255,255,0.14);
    --radius-card: 14px;
    --radius-btn: 10px;
    --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
    --shadow-glow-green: 0 0 40px rgba(0,255,136,0.15);
    --transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Work Sans', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════ */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 60px; gap: 20px;
    background: transparent;
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
.navbar.scrolled {
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.logo {
    font-family: 'Bebas Neue', cursive;
    font-size: 36px; letter-spacing: 3px;
    color: var(--accent-red);
    text-decoration: none;
    text-shadow: 0 0 20px rgba(229,9,20,0.4);
    transition: text-shadow 0.3s;
    flex-shrink: 0;
}
.logo:hover { text-shadow: 0 0 30px rgba(229,9,20,0.7); }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a {
    color: rgba(255,255,255,0.75); text-decoration: none;
    font-size: 15px; font-weight: 500;
    transition: color 0.3s; position: relative;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 2px; background: var(--accent-red);
    transition: width 0.3s;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); }

.nav-right { display: flex; align-items: center; gap: 12px; }
.search-container { position: relative; }
.search-wrapper { position: relative; }
.search-input {
    width: 230px; padding: 9px 38px 9px 38px;
    border-radius: 24px; border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.6); color: white;
    transition: var(--transition); outline: none;
    font-family: 'Work Sans', sans-serif; font-size: 14px;
    backdrop-filter: blur(10px);
}
.search-input:focus { border-color: rgba(255,255,255,0.35); background: rgba(0,0,0,0.8); }
.search-input::placeholder { color: rgba(255,255,255,0.45); }
.search-icon {
    position: absolute; top: 50%; left: 11px;
    transform: translateY(-50%);
    fill: rgba(255,255,255,0.5); width: 17px; height: 17px;
    pointer-events: none; transition: fill 0.3s;
}
.search-input:focus + .search-icon { fill: var(--accent-red); }
.search-clear {
    position: absolute; top: 50%; right: 10px;
    transform: translateY(-50%); background: transparent; border: none;
    color: rgba(255,255,255,0.5); font-size: 18px; cursor: pointer;
    width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s;
}
.search-clear:hover { color: white; }
.search-results {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; width: 100%;
    background: rgba(18,18,18,0.98); backdrop-filter: blur(20px);
    border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.7);
    border: 1px solid var(--border); max-height: 560px; overflow-y: auto; z-index: 1001;
}
.search-results.active { display: block; }
.search-results::-webkit-scrollbar { width: 4px; }
.search-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.search-result-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.2s; }
.search-result-item:hover { background: rgba(255,255,255,0.04); }
.search-result-poster { width: 40px; height: 60px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.search-result-info { flex: 1; min-width: 0; }
.search-result-title { font-size: 13px; font-weight: 600; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.search-result-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.search-result-type { font-weight: 700; }
.result-type-film { color: var(--accent-red) !important; }
.result-type-serie { color: var(--blue) !important; }
.search-result-rating { color: var(--accent-gold); font-weight: 600; }
.search-result-empty { padding: 16px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.search-show-all { padding: 12px; text-align: center; color: var(--accent-red); font-weight: 600; font-size: 13px; cursor: pointer; border-top: 1px solid var(--border); transition: background 0.2s; }
.search-show-all:hover { background: rgba(229,9,20,0.06); }

.btn-connexion {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; background: transparent; color: white;
    text-decoration: none; border-radius: 50px;
    font-size: 14px; font-weight: 400;
    border: 1px solid rgba(255,255,255,0.18);
    transition: var(--transition); white-space: nowrap;
}
.btn-connexion:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); }
.connexion-icon {
    width: 18px; height: 18px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>') no-repeat center;
    background-size: contain;
}
.connexion-text { margin-right: 2px; }
.connexion-arrow { font-size: 9px; opacity: 0.6; }

/* BURGER */
.burger { position: relative; width: 38px; height: 28px; background: transparent; cursor: pointer; display: none; flex-shrink: 0; z-index: 1001; }
.burger input { display: none; }
.burger span { display: block; position: absolute; height: 3px; width: 100%; background: white; border-radius: 6px; left: 0; transition: 0.25s ease-in-out; }
.burger span:nth-of-type(1) { top: 0; transform-origin: left center; }
.burger span:nth-of-type(2) { top: 50%; transform: translateY(-50%); transform-origin: left center; }
.burger span:nth-of-type(3) { top: 100%; transform-origin: left center; transform: translateY(-100%); }
.burger input:checked ~ span:nth-of-type(1) { transform: rotate(45deg); top: 0; left: 4px; }
.burger input:checked ~ span:nth-of-type(2) { width: 0; opacity: 0; }
.burger input:checked ~ span:nth-of-type(3) { transform: rotate(-45deg); top: 26px; left: 4px; }

/* MOBILE MENU */
.mobile-menu {
    position: fixed; top: 65px; left: 0; right: 0;
    background: rgba(10,10,10,0.97); backdrop-filter: blur(20px);
    transform: translateY(-110%); opacity: 0; visibility: hidden;
    transition: all 0.4s cubic-bezier(0.68,-0.55,0.27,1.55);
    z-index: 999; border-bottom: 1px solid var(--border);
    max-height: calc(100vh - 65px); overflow-y: auto;
}
.mobile-menu.active { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-menu nav { display: flex; flex-direction: column; padding: 16px; }
.mobile-menu a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 17px; font-weight: 500; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: var(--transition); }
.mobile-menu a:hover { color: var(--accent-red); padding-left: 26px; }

/* RESPONSIVE NAVBAR */
@media (min-width: 1801px) { .nav-links { display: flex !important; } .burger { display: none !important; } }
@media (max-width: 1800px) {
    .navbar { padding: 14px 20px; gap: 12px; }
    .logo { font-size: 28px; }
    .nav-links { display: none !important; }
    .burger { display: block !important; }
    .search-input { width: 200px; }
}
@media (max-width: 500px) {
    .search-input { width: 110px; }
    .search-input:focus { width: 150px; }
    .connexion-text { display: none; }
}

/* ═══════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════ */
.hero-container {
    position: relative;
    padding: 130px 60px 60px;
    text-align: center;
    overflow: hidden;
    min-height: 440px;
    display: flex; align-items: center; justify-content: center;
}

/* Animated background grid */
.hero-container::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,255,136,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,136,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridScroll 20s linear infinite;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
}

/* Radial glow */
.hero-container::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(0,255,136,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.hero-bg-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-particle {
    position: absolute;
    width: 3px; height: 3px;
    background: var(--green);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}

.hero-inner { position: relative; z-index: 1; }

.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0,255,136,0.08);
    border: 1px solid rgba(0,255,136,0.2);
    color: var(--green); font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
    padding: 6px 16px; border-radius: 100px;
    margin-bottom: 24px;
    animation: fadeUp 0.6s ease forwards;
}
.hero-badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green);
    animation: pulse 2s ease-in-out infinite;
}

.hero-title {
    font-family: 'Bebas Neue', cursive;
    font-size: 100px; line-height: 0.95; letter-spacing: -2px;
    margin-bottom: 22px;
    animation: fadeUp 0.6s ease 0.1s both;
}
.hero-title-main {
    color: white;
    text-shadow: 0 0 80px rgba(255,255,255,0.15);
}
.hero-title-accent {
    background: linear-gradient(135deg, #00ff88 0%, #00e5ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(0,255,136,0.5));
}

.hero-subtitle {
    font-size: 18px; line-height: 1.6; color: var(--text-secondary);
    margin-bottom: 44px;
    animation: fadeUp 0.6s ease 0.2s both;
}

.tagline {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin: 0;
    animation: fadeUp 0.6s ease 0.3s both;
}
.tagline-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tagline-sep { color: rgba(0,255,136,0.4); font-size: 20px; margin: 0 20px; padding-bottom: 4px; }
.tagline-icon {
    width: 56px; height: 56px;
    background: var(--green-dim);
    border: 1px solid var(--green-border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    transition: var(--transition);
}
.tagline-item:hover .tagline-icon {
    background: rgba(0,255,136,0.2);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0,255,136,0.2);
}
.tagline-text {
    font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85);
}

/* ═══════════════════════════════════════════════════
   ACTION BAR
═══════════════════════════════════════════════════ */
.action-bar {
    padding: 0 60px 40px;
    display: flex; justify-content: center;
    animation: fadeUp 0.6s ease 0.4s both;
}
.action-bar-inner {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
}

.action-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 26px;
    border-radius: var(--radius-btn);
    font-family: 'Work Sans', sans-serif;
    font-size: 15px; font-weight: 600;
    cursor: pointer; transition: var(--transition);
    white-space: nowrap;
}
.action-btn-icon { font-size: 17px; line-height: 1; }

.action-btn--primary {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.3);
    color: white;
}
.action-btn--primary:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.action-btn--link {
    background: var(--green-dim);
    border: 1.5px solid var(--green-border);
    color: var(--green);
}
.action-btn--link:hover {
    background: rgba(0,255,136,0.2);
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-green);
}

.action-btn--myprojects {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7);
}
.action-btn--myprojects:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.4);
    color: white;
    transform: translateY(-2px);
}

.action-btn-help {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.6);
    font-size: 17px; font-weight: 700;
    cursor: pointer; transition: var(--transition);
    font-family: 'Work Sans', sans-serif;
    display: flex; align-items: center; justify-content: center;
}
.action-btn-help:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.4);
    color: white; transform: scale(1.08);
}

/* ═══════════════════════════════════════════════════
   MAIN CONTENT LAYOUT
═══════════════════════════════════════════════════ */
.main-content {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 36px;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 60px 100px;
    align-items: start;
}

/* ═══════════════════════════════════════════════════
   FILTERS
═══════════════════════════════════════════════════ */
.search-filters {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 22px 24px;
    margin-bottom: 28px;
}

.filter-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.filter-row--top { margin-bottom: 16px; }

.filter-icon-label {
    display: flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.7);
    flex-shrink: 0;
}

.project-search-wrap {
    position: relative; flex: 1; min-width: 200px;
}
.project-search-input {
    width: 100%; padding: 9px 14px 9px 38px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px; color: white;
    font-family: 'Work Sans', sans-serif; font-size: 14px;
    outline: none; transition: var(--transition);
}
.project-search-input::placeholder { color: rgba(255,255,255,0.35); }
.project-search-input:focus { border-color: rgba(0,255,136,0.35); background: rgba(0,255,136,0.03); }
.project-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: 15px; pointer-events: none; opacity: 0.5;
}

.filter-type-group {
    display: flex; gap: 8px; align-items: center;
}
.filter-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    font-family: 'Work Sans', sans-serif;
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: var(--transition);
}
.filter-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--border-hover);
    color: white;
}
.filter-btn.active {
    background: var(--green-dim);
    border-color: var(--green-border);
    color: var(--green);
}

.filter-select-group {
    display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap;
}
.custom-select-wrap {
    position: relative;
}
.custom-select {
    appearance: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: rgba(255,255,255,0.65);
    font-family: 'Work Sans', sans-serif;
    font-size: 13px; font-weight: 500;
    padding: 8px 32px 8px 14px;
    cursor: pointer; outline: none;
    transition: var(--transition);
}
.custom-select:hover, .custom-select:focus {
    border-color: var(--border-hover);
    color: white;
    background: rgba(255,255,255,0.07);
}
.custom-select option { background: #1a1a1a; color: white; }
.select-arrow {
    position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.4); font-size: 12px;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   PROJECTS GRID
═══════════════════════════════════════════════════ */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* ── Skeleton Cards ── */
.skeleton-card {
    border-radius: var(--radius-card);
    overflow: hidden;
    height: 380px;
    background: linear-gradient(90deg,
        var(--bg-card) 25%,
        rgba(255,255,255,0.04) 50%,
        var(--bg-card) 75%
    );
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
}

/* ── Project Card ── */
.project-card {
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: var(--transition);
    animation: cardIn 0.5s ease both;
    cursor: pointer;
    position: relative;
}
.project-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: var(--green-border);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), var(--shadow-glow-green);
}

/* Poster area */
.project-poster {
    position: relative;
    width: 100%; padding-top: 148%; /* 2:3 ratio */
    overflow: hidden;
    background: #111;
}
.project-poster img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}
.project-card:hover .project-poster img { transform: scale(1.06); }

/* Gradient overlay at bottom of poster */
.project-poster::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    pointer-events: none;
}

/* Badges on poster */
.badge-row {
    position: absolute; top: 10px; left: 10px;
    display: flex; flex-direction: column; gap: 6px;
    z-index: 2;
}

.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px; border-radius: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
    backdrop-filter: blur(8px);
    width: fit-content;
}
.badge--film {
    background: rgba(14,165,233,0.25);
    border: 1px solid rgba(14,165,233,0.5);
    color: #7dd3fc;
}
.badge--tv {
    background: rgba(168,85,247,0.25);
    border: 1px solid rgba(168,85,247,0.5);
    color: #d8b4fe;
}
.badge--greenlighted {
    background: rgba(0,255,136,0.2);
    border: 1px solid rgba(0,255,136,0.45);
    color: var(--green);
}
.badge--unavailable {
    background: rgba(80,80,80,0.35);
    border: 1px solid rgba(120,120,120,0.4);
    color: rgba(255,255,255,0.55);
}
.badge--rejected {
    background: rgba(229,9,20,0.2);
    border: 1px solid rgba(229,9,20,0.4);
    color: #f87171;
}
.badge--vip {
    background: rgba(255,215,0,0.2);
    border: 1px solid rgba(255,215,0,0.4);
    color: var(--accent-gold);
}

/* Vote bar at bottom of poster */
.project-vote-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 2;
    padding: 10px 12px;
    display: flex; align-items: center; justify-content: space-between;
}
.project-vote-count {
    display: flex; align-items: center; gap: 6px;
    font-size: 15px; font-weight: 700;
    color: white;
}
.vote-arrow-icon {
    width: 22px; height: 22px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: var(--transition);
}

.vote-btn-inline {
    padding: 6px 14px;
    border-radius: 6px;
    background: var(--green-dim);
    border: 1px solid var(--green-border);
    color: var(--green);
    font-family: 'Work Sans', sans-serif;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    opacity: 0;
    transform: translateY(4px);
}
.project-card:hover .vote-btn-inline {
    opacity: 1; transform: translateY(0);
}
.vote-btn-inline:hover {
    background: var(--green); color: #000;
    box-shadow: 0 0 16px rgba(0,255,136,0.4);
}
.vote-btn-inline.voted {
    background: rgba(0,255,136,0.15);
    border-color: rgba(0,255,136,0.35);
    color: rgba(0,255,136,0.6);
    cursor: default; opacity: 1; transform: translateY(0);
}
.vote-btn-inline.voted:hover { background: rgba(0,255,136,0.15); color: rgba(0,255,136,0.6); box-shadow: none; }

/* Card info below poster */
.project-info {
    padding: 12px 14px 14px;
}
.project-title {
    font-size: 14px; font-weight: 700; line-height: 1.3;
    margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.project-year {
    font-size: 12px; color: var(--text-secondary);
}
.project-team-note {
    margin-top: 8px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.04);
    border-left: 2px solid var(--green);
    border-radius: 0 6px 6px 0;
    font-size: 11px; color: rgba(255,255,255,0.6);
    line-height: 1.4;
}

/* Empty state */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: var(--text-secondary);
}
.empty-icon { font-size: 56px; margin-bottom: 20px; opacity: 0.5; }
.empty-state p { font-size: 15px; }

/* Load more */
.load-more-wrap { text-align: center; margin-top: 36px; }
.load-more-btn {
    padding: 13px 36px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: rgba(255,255,255,0.7);
    font-family: 'Work Sans', sans-serif;
    font-size: 14px; font-weight: 600;
    cursor: pointer; transition: var(--transition);
}
.load-more-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--border-hover);
    color: white; transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════ */
.sidebar {
    display: flex; flex-direction: column; gap: 20px;
    position: sticky; top: 90px;
}

/* ── Stats Card ── */
.stats-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
}
.stats-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 20px;
    color: var(--text-secondary);
}
.stats-header h3 { font-size: 15px; font-weight: 700; color: white; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px; padding: 16px;
}
.stat-value {
    font-family: 'Bebas Neue', cursive;
    font-size: 44px; line-height: 1;
    color: white; letter-spacing: -1px;
    margin-bottom: 6px;
}
.stat-value--green { color: var(--green); }
.stat-label {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--text-secondary); font-weight: 500;
}

/* ── Distribution Card ── */
.distribution-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
}
.distribution-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 18px; color: var(--text-secondary);
}
.distribution-header h3 { font-size: 15px; font-weight: 700; color: white; }

.distrib-row {
    display: flex; justify-content: space-between;
    margin-bottom: 12px;
}
.distrib-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600;
}
.distrib-label--green { color: var(--green); }
.distrib-label--blue { color: var(--blue); }

.distrib-bar-track {
    height: 8px;
    background: rgba(255,255,255,0.07);
    border-radius: 99px; overflow: hidden;
    display: flex;
    margin-bottom: 14px;
}
.distrib-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.distrib-bar-fill--green { background: linear-gradient(90deg, #00ff88, #00e5a0); }
.distrib-bar-fill--blue { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }

.distrib-total {
    text-align: center;
    font-size: 13px; color: var(--text-secondary);
}
.distrib-total strong { color: white; }

/* ── VIP Card ── */
.vip-card {
    position: relative;
    background: linear-gradient(135deg, #0f1a12 0%, #0a1220 100%);
    border: 1px solid rgba(0,255,136,0.2);
    border-radius: var(--radius-card);
    padding: 24px; overflow: hidden;
}
.vip-card::before {
    content: '';
    position: absolute; top: -40px; right: -40px;
    width: 130px; height: 130px;
    background: radial-gradient(circle, rgba(0,255,136,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.vip-card::after {
    content: '';
    position: absolute; bottom: -30px; left: -30px;
    width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(0,136,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.vip-lightning {
    position: absolute; top: 18px; right: 20px;
    font-size: 40px; opacity: 0.15;
    animation: float 3s ease-in-out infinite;
}
.vip-card-inner { position: relative; z-index: 1; }
.vip-title {
    font-size: 20px; font-weight: 700; margin-bottom: 10px;
    color: white;
}
.vip-title-d { color: var(--green); }
.vip-desc { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.5; margin-bottom: 16px; }
.vip-perks { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.vip-perk {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: rgba(255,255,255,0.7);
}
.perk-icon { font-size: 15px; width: 20px; flex-shrink: 0; }
.vip-perk em { color: var(--text-secondary); font-style: normal; font-size: 12px; }
.vip-btn {
    width: 100%; padding: 12px;
    background: rgba(0,255,136,0.08);
    border: 1px solid rgba(0,255,136,0.3);
    border-radius: var(--radius-btn);
    color: var(--green); font-family: 'Work Sans', sans-serif;
    font-size: 14px; font-weight: 700;
    cursor: pointer; transition: var(--transition);
    letter-spacing: 0.3px;
}
.vip-btn:hover {
    background: var(--green); color: #000;
    box-shadow: 0 0 24px rgba(0,255,136,0.3);
}

/* ── User Quota Card ── */
.user-quota-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px;
}
.quota-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.quota-header h3 { font-size: 15px; font-weight: 700; }
.quota-badge {
    padding: 4px 10px; border-radius: 6px;
    font-size: 12px; font-weight: 700;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
}
.quota-badge.vip {
    background: rgba(255,215,0,0.15);
    color: var(--accent-gold);
}
.quota-item { margin-bottom: 14px; }
.quota-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; font-weight: 500; }
.quota-bar-wrap { display: flex; align-items: center; gap: 10px; }
.quota-bar-track { flex: 1; height: 5px; background: rgba(255,255,255,0.07); border-radius: 99px; overflow: hidden; }
.quota-bar-fill { height: 100%; background: linear-gradient(90deg, var(--green), #00ccff); border-radius: 99px; transition: width 0.8s ease; }
.quota-value { font-size: 13px; font-weight: 700; color: var(--green); flex-shrink: 0; }
.quota-count { font-size: 22px; font-weight: 800; color: white; font-family: 'Bebas Neue', cursive; }

/* ═══════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════ */
.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(12px);
    z-index: 2000; align-items: center; justify-content: center;
    padding: 20px;
}
.modal-overlay.active {
    display: flex;
    animation: overlayIn 0.2s ease;
}

.modal-content {
    background: #111;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px;
    width: 100%; max-width: 520px;
    max-height: 90vh; overflow-y: auto;
    position: relative;
    animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.modal-content--large { max-width: 740px; }
.modal-content--detail { max-width: 800px; }

.modal-content::-webkit-scrollbar { width: 4px; }
.modal-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 34px; height: 34px;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: rgba(255,255,255,0.6); font-size: 20px;
    cursor: pointer; transition: var(--transition);
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.modal-close:hover { background: rgba(255,255,255,0.12); color: white; }

.modal-header { margin-bottom: 26px; padding-right: 36px; }
.modal-header h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.modal-header p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

/* ── Propose Modal ── */
.propose-search-wrap {
    position: relative; margin-bottom: 16px;
}
.propose-search-input {
    width: 100%; padding: 12px 14px 12px 42px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 10px; color: white;
    font-family: 'Work Sans', sans-serif; font-size: 15px;
    outline: none; transition: var(--transition);
}
.propose-search-input::placeholder { color: rgba(255,255,255,0.3); }
.propose-search-input:focus { border-color: var(--green-border); background: rgba(0,255,136,0.03); }
.propose-search-icon {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%); font-size: 17px; opacity: 0.5;
}

.propose-results {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 360px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.propose-results::-webkit-scrollbar { width: 4px; }
.propose-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.propose-result-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 10px; cursor: pointer;
    transition: var(--transition);
}
.propose-result-item:hover {
    background: rgba(0,255,136,0.06);
    border-color: var(--green-border);
}
.propose-result-poster {
    width: 44px; height: 66px; object-fit: cover;
    border-radius: 6px; flex-shrink: 0;
    background: #222;
}
.propose-result-info { flex: 1; min-width: 0; }
.propose-result-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.propose-result-meta {
    font-size: 12px; color: var(--text-secondary);
    display: flex; gap: 8px; align-items: center;
}
.propose-result-type--movie { color: var(--blue); font-weight: 700; }
.propose-result-type--tv { color: var(--purple); font-weight: 700; }

/* Propose Selected */
.propose-selected {
    display: flex; gap: 20px;
    background: rgba(0,255,136,0.05);
    border: 1px solid var(--green-border);
    border-radius: 12px; padding: 20px;
    animation: fadeUp 0.3s ease;
}
.propose-selected-poster {
    width: 90px; height: 134px; flex-shrink: 0;
}
.propose-selected-poster img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 8px;
}
.propose-selected-info { flex: 1; min-width: 0; }
.propose-selected-type {
    font-size: 12px; font-weight: 700; margin-bottom: 6px;
    padding: 3px 8px; border-radius: 5px;
    display: inline-block;
}
.propose-selected-info h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.propose-selected-year { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.propose-selected-overview { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.5; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.propose-quota-info { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 14px; }
.propose-actions { display: flex; gap: 10px; }

/* ── Forms ── */
.link-form { display: flex; flex-direction: column; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); }
.form-optional { color: var(--text-secondary); font-weight: 400; }
.form-input, .form-select, .form-textarea {
    width: 100%; padding: 11px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px; color: white;
    font-family: 'Work Sans', sans-serif; font-size: 14px;
    outline: none; transition: var(--transition);
}
.form-input::placeholder, .form-textarea::placeholder { color: rgba(255,255,255,0.3); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--green-border);
    background: rgba(0,255,136,0.03);
}
.form-select { appearance: none; cursor: pointer; }
.form-select option { background: #1a1a1a; }
.form-textarea { resize: vertical; min-height: 80px; }

/* ── Buttons ── */
.btn-submit {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px;
    background: var(--green);
    border: none; border-radius: var(--radius-btn);
    color: #000; font-family: 'Work Sans', sans-serif;
    font-size: 14px; font-weight: 800;
    cursor: pointer; transition: var(--transition);
    text-decoration: none; white-space: nowrap;
}
.btn-submit:hover {
    background: #00e07a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,255,136,0.35);
}
.btn-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-cancel {
    padding: 11px 18px;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: rgba(255,255,255,0.6);
    font-family: 'Work Sans', sans-serif;
    font-size: 14px; font-weight: 600;
    cursor: pointer; transition: var(--transition);
}
.btn-cancel:hover { background: rgba(255,255,255,0.1); color: white; }

/* ── My Projects Modal ── */
.my-projects-list { display: flex; flex-direction: column; gap: 14px; max-height: 500px; overflow-y: auto; scrollbar-width: thin; }
.my-project-item {
    display: flex; gap: 14px; align-items: center;
    padding: 14px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border); border-radius: 10px;
}
.my-project-poster { width: 44px; height: 66px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #222; }
.my-project-info { flex: 1; min-width: 0; }
.my-project-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-project-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.my-project-votes { font-size: 13px; color: var(--green); font-weight: 700; }

/* ── Help Modal ── */
.help-steps { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.help-step { display: flex; gap: 16px; align-items: flex-start; }
.help-step-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--green-dim); border: 1px solid var(--green-border);
    color: var(--green); font-size: 14px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.help-step-content h4 { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.help-step-content p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; }
.help-quotas { border-top: 1px solid var(--border); padding-top: 24px; }
.help-quotas h4 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.quota-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quota-tier {
    padding: 16px; border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    text-align: center;
}
.quota-tier--vip {
    background: var(--green-dim); border-color: var(--green-border);
}
.quota-tier-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.quota-tier--vip .quota-tier-label { color: var(--green); }
.quota-tier-value { font-size: 24px; font-weight: 800; color: white; font-family: 'Bebas Neue', cursive; }
.quota-tier-plus { font-size: 11px; color: var(--green); margin-top: 6px; font-weight: 600; }

/* ── VIP Compare Table ── */
.vip-compare-table { margin-bottom: 24px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.vip-compare-head {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    background: rgba(255,255,255,0.04); border-bottom: 1px solid var(--border);
    padding: 12px 16px;
}
.vip-compare-col { text-align: center; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.vip-compare-col--vip { color: var(--green); }
.vip-compare-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    padding: 11px 16px; border-bottom: 1px solid var(--border);
    align-items: center; font-size: 13px;
}
.vip-compare-row:last-child { border-bottom: none; }
.vip-compare-row:nth-child(even) { background: rgba(255,255,255,0.02); }
.vip-compare-row > :nth-child(2) { text-align: center; color: var(--text-secondary); }
.vip-highlight { text-align: center; color: var(--green); font-weight: 700; }

/* ── Project Detail Modal ── */
.detail-backdrop {
    position: relative; width: 100%; height: 200px; overflow: hidden;
    border-radius: 10px; margin-bottom: 20px;
}
.detail-backdrop img { width: 100%; height: 100%; object-fit: cover; }
.detail-backdrop::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(transparent 30%, rgba(17,17,17,0.95));
}
.detail-body { display: flex; gap: 24px; }
.detail-poster { width: 130px; flex-shrink: 0; }
.detail-poster img { width: 100%; border-radius: 8px; }
.detail-info h2 { font-size: 24px; font-weight: 800; margin-bottom: 8px; line-height: 1.2; }
.detail-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.detail-overview { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 20px; }
.detail-vote-section { display: flex; align-items: center; gap: 16px; }
.detail-votes { font-size: 28px; font-weight: 800; color: var(--green); font-family: 'Bebas Neue', cursive; display: flex; align-items: center; gap: 8px; }
.detail-team-note {
    padding: 12px 16px; background: rgba(255,255,255,0.04);
    border-left: 2px solid var(--green); border-radius: 0 8px 8px 0;
    margin-top: 16px;
}
.detail-team-note-label { font-size: 11px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.detail-team-note p { font-size: 13px; color: rgba(255,255,255,0.6); }

/* ═══════════════════════════════════════════════════
   TOAST NOTIFICATIONS
═══════════════════════════════════════════════════ */
.toast-container {
    position: fixed; bottom: 30px; right: 24px;
    z-index: 9999; display: flex; flex-direction: column; gap: 10px;
}
.toast {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    background: #1a1a1a; border: 1px solid var(--border);
    border-radius: 12px; min-width: 280px; max-width: 380px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    animation: toastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 14px; font-weight: 500;
}
.toast.removing { animation: toastOut 0.3s ease forwards; }
.toast--success { border-color: rgba(0,255,136,0.35); }
.toast--error { border-color: rgba(229,9,20,0.35); }
.toast--info { border-color: rgba(14,165,233,0.35); }
.toast--warning { border-color: rgba(255,200,0,0.35); }
.toast-icon { font-size: 20px; flex-shrink: 0; }
.toast-text { flex: 1; }

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
.footer {
    background: linear-gradient(to bottom, transparent 0%, var(--bg-primary) 12%);
    padding: 60px 60px 30px;
    border-top: 1px solid var(--border);
    margin-top: 40px;
}
.footer-main {
    max-width: 1420px; margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr;
    gap: 80px; margin-bottom: 50px; align-items: start;
}
.footer-left { padding-right: 40px; }
.footer-right { display: flex; flex-direction: column; gap: 24px; }
.footer-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.footer-text { color: var(--text-secondary); font-size: 13px; line-height: 1.8; }
.footer-copyright { color: var(--text-secondary); font-size: 12px; opacity: 0.8; }
.footer-author { color: var(--accent-red); text-decoration: none; font-weight: 600; transition: color 0.3s; }
.footer-author:hover { color: #ff3340; }
.footer-icons-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; justify-items: center; }
.social-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: transparent; transition: background 0.3s, transform 0.2s; text-decoration: none; }
.social-icon:hover { transform: scale(1.12); }
.social-icon img { width: 28px; height: 28px; object-fit: contain; transition: filter 0.2s; }
.social-icon:hover img { filter: brightness(0) invert(1); }
.social-icon.github:hover { background: #24292e; }
.social-icon.discord:hover { background: #5865F2; }
.social-icon.telegram:hover { background: #0088cc; }
.social-icon.link:hover { background: #666; }
.social-icon.trustpilot:hover { background: #00B67A; }
.social-icon.coffee:hover { background: #FFDD00; }
.social-icon.beacons:hover { background: #8B5CF6; }
.social-icon.dmca:hover { background: var(--accent-red); }
.social-icon.extension:hover { background: #FF7139; }
.social-icon.info:hover { background: #0078D7; }

/* ═══════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,255,136,0.4); }
    50%       { opacity: 0.8; box-shadow: 0 0 0 6px rgba(0,255,136,0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
@keyframes gridScroll {
    0%   { background-position: 0 0; }
    100% { background-position: 60px 60px; }
}
@keyframes particleFloat {
    0%   { opacity: 0; transform: translateY(0) scale(0); }
    20%  { opacity: 0.8; }
    80%  { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(-80px) scale(1.5); }
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes toastIn {
    from { opacity: 0; transform: translateX(30px) scale(0.9); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); }
}
@keyframes voteJump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .main-content { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .hero-title { font-size: 72px; }
    .action-bar { padding: 0 20px 30px; }
    .main-content { padding: 0 20px 80px; }
    .projects-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
}
@media (max-width: 700px) {
    .hero-container { padding: 110px 20px 40px; min-height: 360px; }
    .hero-title { font-size: 56px; }
    .hero-subtitle { font-size: 15px; }
    .tagline { gap: 0; }
    .tagline-sep { margin: 0 12px; font-size: 16px; }
    .tagline-icon { width: 44px; height: 44px; font-size: 18px; }
    .action-bar-inner { gap: 10px; }
    .action-btn { padding: 10px 18px; font-size: 13px; }
    .filter-select-group { margin-left: 0; }
    .vip-compare-head, .vip-compare-row { grid-template-columns: 1.5fr 0.75fr 0.75fr; }
    .footer-main { grid-template-columns: 1fr; gap: 40px; }
    .footer-left { padding-right: 0; }
    .footer { padding: 50px 20px 24px; }
    .modal-content { padding: 24px 20px; }
    .propose-selected { flex-direction: column; }
    .detail-body { flex-direction: column; }
    .detail-poster { width: 90px; }
}
@media (max-width: 480px) {
    .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .search-filters { padding: 16px; }
    .filter-row { flex-direction: column; align-items: flex-start; }
    .filter-row--bottom { flex-direction: column; gap: 10px; }
    .filter-select-group { width: 100%; }
    .custom-select-wrap { flex: 1; }
    .custom-select { width: 100%; }
}

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