.permispro-guide {
    --guide-accent: #23466f;
    --guide-accent-strong: #153653;
    --guide-accent-soft: #eaf2f8;
    --guide-warm: #c98c25;
}

.permispro-guide .guide-progress span,
.permispro-guide .guide-badge,
.permispro-guide .guide-chapter-number,
.permispro-guide .guide-stage-grid a:hover b {
    background: var(--guide-accent);
}

.permispro-guide .guide-hero {
    background:
        radial-gradient(circle at 14% 20%, rgba(63, 178, 205, .16), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(201, 140, 37, .18), transparent 34%),
        linear-gradient(135deg, #f8fbfd 0%, #eef5f9 58%, #fff8e9 100%);
}

.permispro-guide .guide-cover-window {
    background: linear-gradient(145deg, #102a49, #1d4f72 65%, #287f86);
}

.permispro-guide .guide-cover-window > img {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    object-fit: contain;
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .22));
}

.permispro-guide .guide-chapter-icon,
.permispro-guide .guide-support-icon,
.permispro-guide .guide-tip > span {
    color: var(--guide-accent);
    background: var(--guide-accent-soft);
}

.permispro-guide .guide-image img {
    width: 100%;
    max-height: 680px;
    object-fit: contain;
    object-position: top center;
    background: #edf3f7;
}

:root[data-theme="dark"] .permispro-guide .guide-hero {
    background:
        radial-gradient(circle at 14% 20%, rgba(63, 178, 205, .13), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(201, 140, 37, .12), transparent 34%),
        linear-gradient(135deg, #0b1624, #10263a 60%, #241e14);
}