/* GridPredict Guide */
.guide-hero {
    padding: 5rem 0 3rem;
    background: linear-gradient(135deg, #181d2a, #0f1117)
}

.guide-container {
    max-width: 1280px;
    margin: auto
}

.guide-layout {
    display: grid;
    grid-template-columns:280px minmax(0, 1fr);
    gap: 2rem
}

.guide-sidebar {
    position: sticky;
    top: 100px;
    background: #171b27;
    border-radius: 16px;
    padding: 24px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.guide-sidebar h5 {
    margin-bottom: 1rem
}

.guide-sidebar a {
    display: block;
    color: #d7d7d7;
    padding: .45rem 0
}

.guide-sidebar a:hover {
    color: #fff
}

.guide-content {
    min-width: 0
}

.guide-content h2 {
    margin-top: 3rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.guide-content p, .guide-content li {
    font-size: 1.05rem;
    line-height: 1.85;
    color: #d8d8d8
}

.guide-callout {
    background: #171b27;
    border-left: 4px solid #e10600;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    margin: 2rem 0
}

.guide-note {
    background: #1b2638;
    border-left: 4px solid #0dcaf0
}

.guide-warning {
    background: #3a2d10;
    border-left: 4px solid #ffc107
}

.guide-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .08)
}

@media (max-width: 992px) {
    .guide-layout {
        grid-template-columns:1fr
    }

    .guide-sidebar {
        position: static
    }
}

.guide-sidebar-group{
    margin-bottom:2rem;
}

.guide-sidebar-group:last-child{
    margin-bottom:0;
}

.guide-sidebar-group h5{
    margin-bottom:1rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.78rem;
    color:#9ca3af;
}

.guide-sidebar-group a.disabled{
    opacity:.55;
    cursor:default;
    pointer-events:none;
}

/* ==========================
   Breadcrumb
   ========================== */

.guide-hero .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: .9rem;
}

.guide-hero .breadcrumb-item {
    color: rgba(255,255,255,.45);
}

.guide-hero .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.25);
    content: "›";
    padding: 0 .65rem;
}

.guide-hero .breadcrumb-item a {
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: color .15s ease;
}

.guide-hero .breadcrumb-item a:hover {
    color: #fff;
}

.guide-hero .breadcrumb-item.active {
    color: #fff;
    font-weight: 500;
}

.guide-card{
    display: block;
    height: auto !important;
    min-height: 0 !important;
    align-self: start;

    background:#171b27;
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
    padding:1.5rem;
    margin:2rem 0;
}

.guide-card h4{
    margin-bottom:1rem;
    color:#fff;
}

.guide-card .table{
    margin-bottom:0;
    --bs-table-bg:#212529;
    --bs-table-striped-bg:#2b3035;
    --bs-table-border-color:#3a3f44;
}