:root {
    --a-bg: #050505;
    --a-surface: #0b0b0c;
    --a-surface-2: #111214;
    --a-text: #f5f5f3;
    --a-muted: #92959b;
    --a-line: rgba(255, 255, 255, 0.12);
    --a-line-strong: rgba(255, 255, 255, 0.22);
    --a-accent: #57e6ff;
    --a-green: #9aff65;
    --a-purple: #b39cff;
    --a-amber: #ffcc66;
    --a-max: 1320px;
}

html { background: var(--a-bg); }

body,
body.site-bg,
body.hero-bg {
    color: var(--a-text);
    background: var(--a-bg) !important;
    font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
    letter-spacing: 0;
}

a, button, input, select, textarea { letter-spacing: 0; }

.nav,
.site-bg .nav {
    position: sticky;
    top: 0;
    z-index: 80;
    height: 64px;
    border-bottom: 0 !important;
    background: linear-gradient(180deg, rgba(3, 3, 3, 0.96) 0%, rgba(3, 3, 3, 0.68) 58%, rgba(3, 3, 3, 0) 100%) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.nav-inner,
.site-bg .nav-inner {
    width: min(100% - 64px, var(--a-max));
    max-width: var(--a-max) !important;
    height: 64px;
    margin: 0 auto;
    padding: 0 !important;
}

.nav-inner > div { height: 100%; }
.nav img { width: auto; max-height: 34px !important; border-radius: 0 !important; }
.nav-link {
    position: relative;
    min-height: auto !important;
    padding: 4px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #8d9096 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 500;
}
.nav-link:hover, .nav-link.active { color: #fff !important; }
.nav-link.active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -9px;
    left: 0;
    height: 1px;
    background: var(--a-accent);
}

.page-shell,
.site-bg .page-shell,
.section {
    width: min(100% - 64px, var(--a-max)) !important;
    max-width: var(--a-max) !important;
    margin-right: auto;
    margin-left: auto;
}

.footer,
.footer-shell,
body > footer {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 28px max(32px, calc((100% - var(--a-max)) / 2)) 32px !important;
}

.footer-inner,
.footer-shell > div,
body > footer > div {
    width: 100% !important;
    max-width: var(--a-max) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.page-shell { padding: 0 0 96px !important; }
.home-v2 > .section { width: min(100% - 64px, var(--a-max)) !important; max-width: var(--a-max) !important; }
.page-shell > section:not(.hero-block):not(.hero-grid):not(.controls):not(#creator-list) {
    margin-top: 0 !important; padding: 0 !important; border: 0 !important;
    border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
.hero-block, .hero-grid {
    position: relative;
    min-height: 360px;
    margin: 0 0 56px !important;
    padding: 88px 0 48px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--a-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.hero-block::before, .hero-grid::before {
    content: "AIDIR / DISCOVER";
    display: block;
    margin-bottom: 24px;
    color: var(--a-accent);
    font: 600 11px/1 Inter, sans-serif;
}

.hero-title,
.site-bg .page-shell .hero-title {
    max-width: 1000px !important;
    margin: 0;
    color: var(--a-text) !important;
    background: none !important;
    font-size: clamp(48px, 6vw, 92px) !important;
    font-weight: 600 !important;
    line-height: 0.98 !important;
    -webkit-text-fill-color: currentColor !important;
}

.hero-subtitle {
    max-width: 700px;
    margin-top: 24px !important;
    color: var(--a-muted) !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
}

.toolbar, .filter-row, .tabs, .category-tabs, .summary-bar { gap: 8px !important; }
.toolbar { margin-top: 40px !important; }
.filter-btn, .tab, .category-tab, .search-btn, .prompt-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px !important;
    border: 1px solid var(--a-line) !important;
    border-radius: 5px !important;
    color: #aeb1b7 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}
.filter-btn:hover, .tab:hover, .category-tab:hover,
.filter-btn.active, .tab.active, .category-tab.active {
    border-color: var(--a-line-strong) !important;
    color: #050505 !important;
    background: var(--a-text) !important;
}

@media (max-width: 640px) {
    .nav-inner,
    .site-bg .nav-inner,
    .page-shell,
    .site-bg .page-shell,
    .section,
    .home-v2 > .section {
        width: calc(100% - 36px) !important;
    }
    .footer, .footer-shell, body > footer {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }
    .filter-row, .category-tabs { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
    .filter-row::-webkit-scrollbar, .category-tabs::-webkit-scrollbar { display: none; }
    .filter-btn, .category-tab { flex: 0 0 auto; }
}

input, select, textarea, .search-input {
    border: 1px solid var(--a-line) !important;
    border-radius: 5px !important;
    color: var(--a-text) !important;
    background: #09090a !important;
}

.section { padding: 88px 0 !important; }
.section + .section { border-top: 1px solid var(--a-line); }
.section-header {
    min-height: 80px;
    margin-bottom: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.section-title {
    max-width: 760px;
    color: var(--a-text) !important;
    font-size: clamp(32px, 4vw, 58px) !important;
    font-weight: 600 !important;
    line-height: 1.04 !important;
}
.section-description { max-width: 620px; margin: 14px 0 0; color: var(--a-muted); font-size: 14px; line-height: 1.7; }
.hero-title + .hero-subtitle { max-width: 720px; margin-top: 14px; color: var(--a-muted); font-size: 16px; line-height: 1.75; }
.feature-link { color: var(--a-muted) !important; font-size: 13px; }
.feature-link:hover { color: var(--a-accent) !important; }

.cards-grid, .videos-grid, .prompt-grid, .tutorials-grid, .creators-grid {
    gap: 24px !important;
}
body:not(.home-v2) .videos-grid,
body:not(.home-v2) .events-grid,
body:not(.home-v2) .prompt-grid,
body:not(.home-v2) .tutorials-grid,
body:not(.home-v2) .creators-grid {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.videos-grid, .prompt-grid, .tutorials-grid, .jobs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.prompt-grid { display: grid !important; column-count: auto !important; }
.creators-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.events-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

.card, .video-card, .event-card, .prompt-card, .tutorial-card, .creator-card,
.job-card, .result-card, .recommend-card, .about-card, .contact-card, .qrcode-card {
    overflow: hidden;
    border: 1px solid var(--a-line) !important;
    border-radius: 6px !important;
    color: var(--a-text) !important;
    background: var(--a-surface) !important;
    box-shadow: none !important;
    transition: border-color 180ms ease, transform 180ms ease, background 180ms ease !important;
}
.card:hover, .video-card:hover, .event-card:hover, .prompt-card:hover,
.tutorial-card:hover, .creator-card:hover, .job-card:hover, .result-card:hover {
    z-index: 1;
    border-color: var(--a-line-strong) !important;
    background: var(--a-surface-2) !important;
    transform: translateY(-3px) !important;
}

.video-thumb, .card-thumb, .tutorial-cover, .creator-cover {
    overflow: hidden;
    border-radius: 0 !important;
    background: #101113 !important;
}
.video-thumb { aspect-ratio: 16 / 10 !important; }
.video-thumb img, .card-thumb img, .tutorial-cover img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 500ms cubic-bezier(.2,.7,.2,1), opacity 180ms ease;
}
.video-card:hover img, .prompt-card:hover img, .tutorial-card:hover img { transform: scale(1.025); }
.video-body, .card-body { padding: 18px !important; }
.video-title, .card-title, .event-title, .tutorial-title, .creator-name {
    color: var(--a-text) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}
.video-meta, .card-meta, .event-meta, .summary-meta, .tutorial-meta { color: var(--a-muted) !important; }
.badge, .eyebrow {
    border-radius: 3px !important;
    color: #aeb1b7 !important;
    background: rgba(255,255,255,.06) !important;
}
.video-footer, .event-footer, .tutorial-footer, .creator-footer, .card-footer {
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--a-line) !important;
}
.detail-link, .prompt-btn-modal {
    display: inline-flex !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #d8dade !important;
    background: transparent !important;
    font-size: 12px !important;
}
.detail-link i, .prompt-btn-modal i { margin-left: 6px; color: var(--a-accent); }

.home-v2 .hero { padding: 0 !important; background: var(--a-bg) !important; }
.home-v2 .content-hero {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 1;
    background: #0b0b0b !important;
}
.home-v2 .home-banner-media { filter: saturate(.92) contrast(1.03); }
.home-pulse, .home-channels, .home-v2 .trust {
    width: min(100% - 64px, var(--a-max)) !important;
}
.home-pulse { padding: 38px 0 42px !important; border-color: var(--a-line) !important; }
.home-pulse-head { color: var(--a-muted) !important; text-transform: uppercase; }
.pulse-dot { background: var(--a-green) !important; box-shadow: none !important; }
.home-stats { margin-top: 38px !important; }
.home-stats strong { font-size: clamp(32px, 4vw, 58px) !important; font-weight: 500; }
.home-stats span { color: var(--a-muted) !important; }
.home-channels { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 0 !important; margin-top: 0 !important; border-bottom: 1px solid var(--a-line); }
.home-channels > a {
    min-height: 190px !important;
    padding: 24px !important;
    border-width: 0 1px 0 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.home-channels > a:last-child { border-right: 0 !important; }
.home-channels > a::before { display: none; }
.home-channels > a:hover { background: #0b0c0d !important; transform: none !important; }
.home-channels > a span { color: var(--a-muted) !important; }
.home-channels > a strong { margin-top: 54px !important; font-size: 18px !important; }
.home-channels > a small { color: var(--a-muted) !important; }
.home-v2 .trust { padding: 34px 0 !important; border-bottom: 1px solid var(--a-line); }
.logo-pill { border-radius: 3px !important; background: transparent !important; }

.countdown-panel, .controls, .map-panel, .sidebar-panel, .profile-card, .search-panel {
    border: 1px solid var(--a-line) !important;
    border-radius: 6px !important;
    background: var(--a-surface) !important;
    box-shadow: none !important;
}
.countdown-box { border-radius: 4px !important; background: #050505 !important; }
.footer, .footer-shell { border-top: 1px solid var(--a-line) !important; background: #050505 !important; }
