/* =========================================================
   SkillBridge Theme Refresh
   Dark, but layered and readable instead of black-on-black.
   ========================================================= */

:root {
    --bg: #11161d;
    --surface: #1a212a;
    --surface-2: #222b35;
    --surface-3: #2c3743;
    --text: #f7f8fa;
    --muted: #aeb6c1;
    --accent: #ffb000;
    --accent-2: #ff7957;
    --accent-soft: rgba(255, 176, 0, .14);
    --border: rgba(255,255,255,.12);
    --shadow: 0 18px 46px rgba(0,0,0,.25);
}

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

body {
    color: var(--text);
    background:
        radial-gradient(circle at 8% -4%, rgba(26,86,132,.20), transparent 31rem),
        radial-gradient(circle at 96% 18%, rgba(255,176,0,.055), transparent 27rem),
        linear-gradient(180deg, #111821 0%, #11161d 52%, #0f141a 100%);
    background-attachment: fixed;
}

/* Header: separated from the page without becoming jet black. */
.site-header,
.modern-app-header {
    background: rgba(15,21,28,.94) !important;
    border-bottom-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
}

.main-nav {
    background-color: #171f28;
}

.currency-chip,
.icon-button,
.books-menu-button {
    background: #1b232d !important;
    border-color: rgba(255,255,255,.11) !important;
}

/* Main homepage spacing and section separation. */
.app-home {
    background: transparent;
}

.app-home-inner {
    gap: 24px;
}

.app-search {
    background: #1c242e;
    border-color: rgba(255,255,255,.13);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.app-search input {
    color: #f7f8fa;
}

.app-search input::placeholder {
    color: #8f99a5;
}

.category-pill {
    background: #1a222c;
    color: #d2d8de;
    border-color: rgba(255,255,255,.11);
}

.category-pill small {
    color: #929ba6;
}

.home-section {
    position: relative;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(28,36,46,.88), rgba(20,27,35,.84));
    box-shadow: 0 16px 42px rgba(0,0,0,.12);
}

.home-section:nth-of-type(even) {
    background: linear-gradient(145deg, rgba(31,39,49,.90), rgba(21,28,36,.86));
}

.home-section-head {
    padding-bottom: 14px;
    margin-bottom: 17px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.section-eyebrow {
    color: #96a0ab;
}

.home-section-head h2 {
    color: #fbfcfd;
}

.home-section-head > a {
    color: #ff8b6d;
}

/* Course cards: visibly distinct from each section panel. */
.app-course-card {
    background: linear-gradient(180deg, #202833 0%, #1a222c 100%);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 14px 34px rgba(0,0,0,.20);
}

.app-course-image {
    background: #26313c;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.app-course-body h3 {
    color: #f7f8fa;
}

.provider-line {
    color: #aab3be;
}

.card-meta {
    color: #cbd1d7;
    border-color: rgba(255,255,255,.09);
}

.card-meta span:last-child {
    color: #f4cf78;
}

.card-bottom strong {
    color: #ffffff;
}

.mode-badge {
    color: #d2d7dd;
    background: #2a3440;
    border: 1px solid rgba(255,255,255,.06);
}

.course-tag {
    box-shadow: 0 5px 15px rgba(0,0,0,.18);
}

/* Featured rows get a little more definition. */
.featured-course-rail .app-course-card {
    background: linear-gradient(135deg, #202a35 0%, #1a222c 100%);
}

.featured-course-rail .app-course-card:hover,
.app-course-card:hover {
    border-color: rgba(255,176,0,.25);
}

.live-item {
    background: #1b242e;
    border-color: rgba(255,255,255,.11);
}

.live-item small,
.live-item time {
    color: #aeb6c1;
}

.dark-empty {
    background: #18212a;
    border-color: rgba(255,255,255,.15);
}

.provider-callout {
    background: linear-gradient(125deg, #1b2530, #24291c);
    border-color: rgba(255,176,0,.23);
    box-shadow: 0 14px 36px rgba(0,0,0,.14);
}

/* Generic pages / dashboards also benefit from clearer layers. */
.card,
.panel,
.metric-card,
.dashboard-card,
.auth-card,
.course-detail-card {
    background-color: var(--surface);
    border-color: var(--border);
}

.site-footer {
    background: #0f151c;
    border-top-color: rgba(255,255,255,.09);
}

.mobile-bottom-nav {
    background: rgba(14,20,27,.97) !important;
    border-top-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 -12px 30px rgba(0,0,0,.22);
}

/* Mobile: panels should still be obvious but not boxed-in or cramped. */
@media (max-width: 760px) {
    body {
        background:
            radial-gradient(circle at 20% 0%, rgba(27,82,126,.16), transparent 22rem),
            linear-gradient(180deg, #111821 0%, #11171e 100%);
    }

    .app-home {
        padding-top: 18px;
    }

    .app-home-inner {
        gap: 18px;
    }

    .home-section {
        margin-inline: -4px;
        padding: 18px 14px 16px;
        border-radius: 22px;
        border-color: rgba(255,255,255,.085);
        background: linear-gradient(160deg, rgba(31,40,51,.96), rgba(19,27,35,.96));
        box-shadow: 0 10px 26px rgba(0,0,0,.15);
    }

    .home-section:nth-of-type(even) {
        background: linear-gradient(160deg, rgba(35,44,55,.95), rgba(21,29,38,.95));
    }

    .home-section-head {
        padding-bottom: 12px;
        margin-bottom: 13px;
    }

    .home-section-head h2 {
        font-size: 23px;
    }

    .section-eyebrow {
        color: #9ca6b1;
    }

    .course-rail:not(.featured-course-rail) {
        padding-bottom: 5px;
    }

    .app-course-card {
        background: linear-gradient(180deg, #222c37, #19222b);
        border-color: rgba(255,255,255,.115);
        box-shadow: 0 12px 28px rgba(0,0,0,.20);
    }

    .featured-course-rail .app-course-card {
        background: linear-gradient(135deg, #25303c, #1b242e);
        border-color: rgba(255,255,255,.13);
        box-shadow: 0 9px 22px rgba(0,0,0,.17);
    }

    .featured-course-rail .app-course-body {
        background: transparent;
    }

    .featured-course-rail .provider-line {
        color: #aeb7c1;
    }

    .featured-course-rail .card-meta {
        color: #cbd1d8;
    }

    .featured-course-rail .mode-badge {
        color: #d6dbe1;
        background: #2b3642;
    }

    .app-search {
        background: #1b2530;
    }

    .category-pill {
        background: #1e2832;
    }
}

@media (max-width: 420px) {
    .home-section {
        padding-inline: 12px;
        border-radius: 20px;
    }
}