.page-header {
    background: var(--bg-white);
    margin: -2rem -1.5rem 2rem;
    padding: 2rem 1.5rem;
    border-bottom: 1px solid var(--border)
}

.page-header-inner {
    max-width: 960px
}

.breadcrumb {
    font-size: .8rem;
    color: var(--text-muted);
    margin-bottom: .75rem
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap
}

.page-subtitle {
    font-size: 1.3rem;
    font-weight: 600;
    margin: .75rem 0 .25rem;
    color: var(--text)
}

.occupation-code {
    font-size: .8rem;
    font-weight: 600;
    background: var(--accent-light);
    color: var(--accent-dark);
    padding: .3rem .75rem;
    border-radius: 4px
}

.featured-indicator {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--success);
    background: var(--success-light);
    padding: .25rem .6rem;
    border-radius: 4px
}

.page-description {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 800px
}

.also-known-as {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.also-known-as-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: .35rem
}

.alt-title {
    white-space: nowrap
}

.alt-sep {
    margin: 0 .35rem;
    color: var(--border)
}

.page-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem
}

.page-title-row .page-title {
    margin-bottom: 0
}

.save-profession-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0
}

.save-profession-btn:hover {
    border-color: #eab308;
    color: #eab308;
    text-decoration: none
}

.save-profession-btn.saved {
    background: #fef9c3;
    border-color: #eab308;
    color: #ca8a04
}

.save-profession-btn .icon-bookmark {
    width: 18px;
    height: 18px
}

.content-wrapper {
    max-width: 960px
}

.section {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 2.5rem;
    overflow: hidden
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--bg-section);
    border-bottom: 1px solid var(--border)
}

.heading-mobile {
    display: none
}

.section-heading h2,
.section-heading h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem
}

.skills-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 .75rem;
    color: var(--text)
}

.section-heading .count {
    font-weight: 400;
    color: var(--text-muted);
    font-size: .85rem
}

.show-toggle-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .125rem
}

.show-toggle-group .count {
    padding-right: .5rem
}

.section-heading .show-toggle {
    font-size: .85rem;
    font-weight: 500;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: .25rem .5rem
}

.section-heading .show-toggle:hover {
    text-decoration: underline
}

.section-body {
    padding: 0
}

.skills-list {
    list-style: none
}

.skill-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    transition: background .15s
}

.skill-row:last-child {
    border-bottom: none
}

.skill-row:hover {
    background: var(--bg-primary)
}

.skill-row.expanded {
    background: var(--bg-primary)
}

.skill-importance {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    min-width: 60px
}

.importance-stars {
    display: flex;
    gap: 1px
}

.importance-stars svg {
    width: 14px;
    height: 14px
}

.importance-stars svg.filled {
    fill: var(--star-filled)
}

.importance-stars svg.empty {
    fill: var(--star-empty)
}

.importance-label {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: .03em
}

.skill-main {
    flex: 1;
    min-width: 0
}

.skill-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer
}

.skill-title {
    font-weight: 600;
    font-size: .95rem;
    color: var(--text-primary)
}

.skill-type-badge {
    font-size: .65rem;
    font-weight: 600;
    padding: .15rem .4rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .02em
}

.skill-type-badge.knowledge {
    background: #fef3c7;
    color: #92400e
}

.skill-type-badge.skill {
    background: #dbeafe;
    color: #1e40af
}

.skill-type-badge.language {
    background: #d1fae5;
    color: #065f46
}

html.dark-mode .skill-type-badge.knowledge {
    background: #78350f;
    color: #fef3c7
}

html.dark-mode .skill-type-badge.skill {
    background: #1e3a5f;
    color: #bfdbfe
}

html.dark-mode .skill-type-badge.language {
    background: #064e3b;
    color: #a7f3d0
}

.skill-description {
    font-size: .875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: .5rem
}

.skill-expand {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-section);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all .15s
}

.skill-expand:hover {
    background: var(--border);
    color: var(--text-primary)
}

.skill-expand svg {
    width: 16px;
    height: 16px;
    transition: transform .2s
}

.skill-row.expanded .skill-expand svg {
    transform: rotate(180deg)
}

.skill-books {
    display: none;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm)
}

.skill-row.expanded .skill-books {
    display: block
}

.books-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem
}

.books-header h4 {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-primary)
}

.books-count {
    font-size: .8rem;
    color: var(--text-muted)
}

.books-carousel {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding: .25rem 0 .75rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch
}

.books-carousel::-webkit-scrollbar {
    height: 5px
}

.books-carousel::-webkit-scrollbar-track {
    background: var(--bg-section);
    border-radius: 3px
}

.books-carousel::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: 3px
}

.book-card {
    flex: 0 0 200px;
    background: var(--bg-section);
    border-radius: var(--radius-sm);
    padding: .875rem;
    scroll-snap-align: start;
    transition: all .2s;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column
}

.book-card:hover {
    background: var(--bg-white);
    border-color: var(--border);
    box-shadow: var(--shadow-sm)
}

.book-cover {
    width: 100%;
    height: 140px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    margin-bottom: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box
}

.book-cover img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
}

.book-cover .placeholder {
    color: #9ca3af;
    font-size: .7rem;
    text-align: center;
    padding: .5rem
}

html.dark-mode .book-cover img[src$="book-placeholder.svg"] {
    opacity: .75;
    filter: brightness(0.85) hue-rotate(10deg)
}

.book-content {
    flex: 1;
    display: flex;
    flex-direction: column
}

.book-title {
    font-weight: 600;
    font-size: .8rem;
    line-height: 1.35;
    margin-bottom: .25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-primary)
}

.book-author {
    font-size: .7rem;
    color: var(--text-muted);
    margin-bottom: .4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.book-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    margin-bottom: .5rem
}

.book-rating {
    display: flex;
    align-items: center;
    gap: .2rem
}

.book-rating svg {
    width: 12px;
    height: 12px;
    fill: var(--star-filled)
}

.book-rating span {
    color: var(--text-secondary);
    font-weight: 500
}

.book-year {
    color: var(--text-muted)
}

.book-preview-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin-top: auto;
    padding: .4rem .65rem;
    background: var(--accent-light, #e7f3ff);
    color: var(--accent, #2563eb);
    font-size: .7rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all .15s ease
}

.book-preview-link:hover {
    background: var(--accent, #2563eb);
    color: white
}

.book-preview-link.book-preview-locked {
    background: var(--bg-section);
    color: var(--text-secondary);
    border: 1px dashed var(--border-dark)
}

.book-preview-link.book-preview-locked:hover {
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent)
}

.book-preview-link svg {
    flex-shrink: 0
}

.no-books {
    font-size: .85rem;
    color: var(--text-muted);
    font-style: italic;
    padding: .5rem 0
}

.back-link {
    text-align: right;
    padding: .5rem 1.25rem 1rem;
    font-size: .8rem
}

.back-link a {
    color: var(--accent);
    text-decoration: none
}

.back-link a:hover {
    color: var(--accent-dark);
    text-decoration: underline
}

.skills-list.collapsed .skill-row:nth-child(n+6) {
    display: none
}

.empty-section {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted)
}

.affiliate-disclosure-inline {
    font-size: .85rem;
    color: var(--text-muted);
    margin-top: 1rem
}

.affiliate-disclosure-inline a {
    color: var(--accent);
    text-decoration: none
}

.affiliate-disclosure-inline a:hover {
    text-decoration: underline
}

.affiliate-banner {
    background: linear-gradient(135deg, #fef3c7 0, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: .75rem 1rem;
    margin-top: 1rem;
    font-size: .9rem;
    color: #92400e;
    font-weight: 500
}

.affiliate-banner a {
    color: #b45309;
    font-weight: 600
}

.affiliate-banner a:hover {
    text-decoration: underline
}

html.dark-mode .affiliate-banner {
    background: linear-gradient(135deg, #78350f 0, #92400e 100%);
    border-color: #b45309;
    color: #fef3c7
}

html.dark-mode .affiliate-banner a {
    color: #fde68a
}

.affiliate-callout {
    background: #f0fdf4;
    border-left: 4px solid #22c55e;
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    font-size: .9rem;
    color: #166534
}

html.dark-mode .affiliate-callout {
    background: #14532d;
    border-color: #22c55e;
    color: #bbf7d0
}

.affiliate-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: #dbeafe;
    color: #1d4ed8;
    padding: .2rem .5rem;
    border-radius: 4px;
    margin-left: .5rem;
    vertical-align: middle
}

html.dark-mode .affiliate-badge {
    background: #1e40af;
    color: #bfdbfe
}

.affiliate-link-label {
    font-size: .7rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: .25rem;
    font-style: italic
}

.track-skill-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s ease;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    text-decoration: none
}

.skill-row:hover .skill-header .track-skill-btn {
    opacity: 1 !important;
    pointer-events: auto !important
}

.track-skill-btn:hover {
    background: var(--accent);
    color: white;
    text-decoration: none
}

.track-skill-btn svg {
    width: 12px;
    height: 12px
}

.track-skill-btn .icon-check,
.track-skill-btn .tracked-text {
    display: none
}

.track-skill-btn.tracked {
    opacity: 1;
    pointer-events: auto;
    background: var(--success-light);
    border-color: var(--success);
    color: var(--success)
}

.track-skill-btn.tracked:hover {
    background: var(--success);
    color: white
}

.track-skill-btn.tracked .icon-plus,
.track-skill-btn.tracked .track-text {
    display: none
}

.track-skill-btn.tracked .icon-check,
.track-skill-btn.tracked .tracked-text {
    display: inline
}

html.dark-mode .track-skill-btn {
    border-color: var(--accent);
    color: var(--accent)
}

html.dark-mode .track-skill-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white
}

html.dark-mode .track-skill-btn.tracked {
    background: rgba(34, 197, 94, 0.2);
    border-color: var(--success);
    color: var(--success)
}

html.dark-mode .track-skill-btn.tracked:hover {
    background: var(--success);
    color: white
}

.track-skill-btn.mobile-track {
    display: none
}

@media(max-width:768px) {
    .skill-row {
        flex-direction: column;
        gap: .5rem;
        padding: .875rem 1rem
    }

    .skill-importance {
        flex-direction: row;
        align-items: center;
        gap: .5rem;
        min-width: 0
    }

    .skill-main {
        width: 100%
    }

    .skill-header .track-skill-btn:not(.mobile-track) {
        display: none !important
    }

    .skill-expand {
        position: absolute;
        top: .875rem;
        right: .25rem
    }

    .focus-controls .tier-badge,
    .focus-controls .wave-badge {
        display: none
    }

    .skill-row {
        position: relative
    }

    .skill-row.expanded .skill-books {
        margin-top: .75rem;
        padding: .75rem;
    }

    .skill-row.expanded .book-card {
        flex: 0 0 170px
    }

    .skill-row.show-track .track-skill-btn.mobile-track {
        display: inline-flex;
        opacity: 1;
        pointer-events: auto;
        margin-top: 0
    }
}

html.dark-mode .track-skill-btn.mobile-track {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(176, 122, 247, 0.1)
}

html.dark-mode .track-skill-btn.mobile-track:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white
}

html.dark-mode .track-skill-btn.mobile-track.tracked {
    background: rgba(52, 211, 153, 0.15);
    border-color: var(--success);
    color: var(--success)
}

.book-title a {
    color: var(--accent);
    text-decoration: none;
    transition: text-decoration .15s
}

.book-title a:hover {
    color: var(--accent-dark);
    text-decoration: underline
}

html.dark-mode .book-title a {
    color: #d8b4fe;
    text-decoration: none
}

html.dark-mode .book-title a:hover {
    color: #a855f7;
    text-decoration: underline
}

#related-professions {
    overflow: visible
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    padding: 1.25rem
}

.related-card,
.related-card:hover,
.related-card:visited {
    text-decoration: none;
    color: var(--text-primary)
}

.related-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    transition: all .2s ease
}

.related-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px)
}

.related-badge {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.related-badge svg {
    width: 20px;
    height: 20px
}

.related-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.related-title {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.related-desc {
    font-size: .75rem;
    color: var(--text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.related-group {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-top: .15rem
}

.related-arrow {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: all .2s;
    margin-top: .15rem;
    opacity: .5
}

.related-card:hover .related-arrow {
    transform: translateX(3px);
    opacity: 1
}

html.dark-mode .related-desc {
    color: var(--text-secondary)
}

@media(max-width:900px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:600px) {
    .related-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: .5rem;
        padding: 1rem;
        padding-bottom: .75rem
    }

    .related-grid::-webkit-scrollbar {
        height: 4px
    }

    .related-grid::-webkit-scrollbar-track {
        background: var(--bg-section);
        border-radius: 3px
    }

    .related-grid::-webkit-scrollbar-thumb {
        background: var(--border-dark);
        border-radius: 3px
    }

    .related-card {
        flex: 0 0 260px;
        scroll-snap-align: start;
        padding: .875rem
    }
}

/* === Spotlight Card === */
.spotlight-section {
    border: 2px solid var(--accent);
    background: var(--bg-white)
}

.spotlight-heading {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--bg-section) 100%);
    border-bottom-color: var(--accent)
}

.spotlight-heading h2 {
    color: var(--accent-dark)
}

.spotlight-body {
    padding: 1.5rem 1.25rem
}

.spotlight-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start
}

.spotlight-skill-info {
    flex: 1;
    min-width: 0
}

.spotlight-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--accent);
    margin-bottom: .5rem
}

.spotlight-skill-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: var(--text-primary)
}

.spotlight-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem
}

.spotlight-description {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 1rem
}

.spotlight-track {
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: .4rem .9rem;
    font-size: .8rem
}

.spotlight-book {
    flex: 0 0 220px
}

.spotlight-book-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: .5rem
}

.spotlight-book-card {
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem
}

.spotlight-book-card .book-cover {
    height: 160px;
    margin-bottom: .75rem
}

.spotlight-book-info .book-title {
    -webkit-line-clamp: 3;
    font-size: .85rem
}

.spotlight-book-info .book-author {
    white-space: normal;
    font-size: .75rem
}

.spotlight-book-links {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .75rem
}

.spotlight-book-links .book-preview-link {
    text-align: center
}

.spotlight-nudge {
    font-size: .85rem;
    color: var(--text-muted);
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border)
}

/* === Experience Note === */
.experience-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: var(--accent-light, #f0f7ff);
    border-left: 3px solid var(--accent, #2563eb);
    border-radius: 6px;
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: .82rem;
    color: var(--text-muted, #64748b);
    line-height: 1.5
}

.experience-note svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent, #2563eb)
}

.experience-note p {
    margin: 0
}

/* === Focus Controls === */
.focus-controls {
    display: flex;
    align-items: center;
    gap: .75rem
}

.wave-badge {
    font-size: .7rem;
    font-weight: 600;
    color: var(--accent-dark);
    background: var(--accent-light);
    padding: .2rem .5rem;
    border-radius: 4px;
    letter-spacing: .03em
}

.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .2rem .625rem;
    border-radius: 10px
}

.tier-badge.tier-foundations {
    background: #dbeafe;
    color: #1e40af
}

.tier-badge.tier-practitioner {
    background: #e0e7ff;
    color: #4338ca
}

.tier-badge.tier-specialist {
    background: #fef3c7;
    color: #92400e
}

.tier-badge.tier-expert {
    background: #ede9fe;
    color: #5b21b6
}

html.dark-mode .tier-badge.tier-foundations {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd
}

html.dark-mode .tier-badge.tier-practitioner {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc
}

html.dark-mode .tier-badge.tier-specialist {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d
}

html.dark-mode .tier-badge.tier-expert {
    background: rgba(124, 58, 237, 0.15);
    color: #c4b5fd
}

.focus-counter {
    font-size: .8rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-light);
    padding: .25rem .6rem;
    border-radius: 4px
}

.focus-counter.complete {
    background: var(--success-light);
    color: var(--success)
}

.focus-prompt {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.25rem;
    background: var(--accent-light);
    border-bottom: 1px solid var(--border);
    font-size: .85rem;
    color: var(--accent-dark);
    font-weight: 500
}

.focus-prompt svg {
    flex-shrink: 0
}

/* === Focus Button === */
.focus-skill-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--warning);
    background: transparent;
    border: 1px solid var(--warning);
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s ease;
    margin-left: .25rem;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none
}

.skill-row:hover .skill-header .focus-skill-btn {
    opacity: 1 !important;
    pointer-events: auto !important
}

.focus-skill-btn:hover {
    background: var(--warning);
    color: white
}

.focus-skill-btn svg {
    width: 12px;
    height: 12px
}

.focus-skill-btn .icon-check-focus,
.focus-skill-btn .focused-text {
    display: none
}

.focus-skill-btn.focused {
    opacity: 1;
    pointer-events: auto;
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--warning);
    color: var(--warning)
}

.focus-skill-btn.focused:hover {
    background: var(--warning);
    color: white
}

.focus-skill-btn.focused .icon-target,
.focus-skill-btn.focused .focus-text {
    display: none
}

.focus-skill-btn.focused .icon-check-focus,
.focus-skill-btn.focused .focused-text {
    display: inline
}

.focus-skill-btn.mobile-focus {
    display: none
}

/* === Focused/Dimmed Skill Rows === */
.skill-focused {
    border-left: 3px solid var(--warning);
    background: rgba(245, 158, 11, 0.04)
}

.skill-focused:hover {
    background: rgba(245, 158, 11, 0.08)
}

.skills-list.has-focus .skill-row:not(.skill-focused) {
    opacity: .6
}

.skills-list.has-focus .skill-row:not(.skill-focused):hover {
    opacity: 1
}

/* === Completed Skill Rows === */
.skill-completed {
    border-left-color: var(--success) !important;
    background: rgba(34, 197, 94, 0.03) !important
}

.skill-completed .skill-main,
.skill-completed .skill-importance {
    filter: blur(1.5px);
    opacity: .55;
    transition: filter .2s, opacity .2s
}

.skill-completed:hover .skill-main,
.skill-completed:hover .skill-importance {
    filter: none;
    opacity: 1
}

.skill-completed .skill-header::after {
    content: '✓ Learned';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: .7rem;
    font-weight: 700;
    color: var(--success);
    text-transform: uppercase;
    letter-spacing: .05em;
    pointer-events: none;
    z-index: 1
}

.skill-completed:hover .skill-header::after {
    opacity: 0
}

.skill-completed .skill-header {
    position: relative
}

.skill-completed .track-skill-btn,
.skill-completed .focus-skill-btn {
    display: none !important
}

/* === Focus Summary Card === */
.focus-summary {
    margin: 1rem 1.25rem;
    padding: 1rem;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm)
}

.focus-summary-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .9rem;
    color: var(--warning);
    margin-bottom: .5rem
}

.focus-summary-list {
    padding-left: 1.5rem;
    font-size: .85rem;
    color: var(--text-primary)
}

.focus-summary-list li {
    padding: .15rem 0
}

.focus-summary-note {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: .5rem
}

/* === Optional Skills Note === */
.optional-skills-note {
    padding: .6rem 1.25rem;
    background: var(--bg-section);
    border-bottom: 1px solid var(--border);
    font-size: .85rem;
    color: var(--text-muted);
    font-style: italic
}

.optional-skills-note p {
    margin: 0
}

/* === Shake Animation === */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-4px)
    }

    50% {
        transform: translateX(4px)
    }

    75% {
        transform: translateX(-4px)
    }
}

/* === Dark Mode Overrides === */
html.dark-mode .spotlight-heading {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--bg-section) 100%)
}

html.dark-mode .spotlight-section {
    border-color: var(--accent)
}

html.dark-mode .focus-skill-btn {
    border-color: var(--warning);
    color: var(--warning)
}

html.dark-mode .focus-skill-btn:hover {
    background: var(--warning);
    color: white
}

html.dark-mode .focus-skill-btn.focused {
    background: rgba(245, 158, 11, 0.2)
}

html.dark-mode .focus-skill-btn.focused:hover {
    background: var(--warning);
    color: white
}

html.dark-mode .skill-focused {
    background: rgba(245, 158, 11, 0.06)
}

html.dark-mode .skill-focused:hover {
    background: rgba(245, 158, 11, 0.1)
}

html.dark-mode .skill-completed .skill-header::after {
    color: #86efac
}

html.dark-mode .focus-summary {
    background: rgba(245, 158, 11, 0.1)
}

html.dark-mode .focus-prompt {
    background: var(--accent-light)
}

/* === Responsive: Spotlight + Focus === */
@media(max-width:768px) {
    .spotlight-content {
        flex-direction: column
    }

    .spotlight-book {
        flex: none;
        width: 100%
    }

    .spotlight-book-card {
        display: flex;
        gap: 1rem
    }

    .spotlight-book-card .book-cover {
        flex: 0 0 100px;
        height: 140px;
        margin-bottom: 0
    }

    .skill-header .focus-skill-btn:not(.mobile-focus) {
        display: none !important
    }

    .skill-row.show-track .focus-skill-btn.mobile-focus {
        display: inline-flex;
        opacity: 1;
        pointer-events: auto
    }

    html.dark-mode .focus-skill-btn.mobile-focus {
        border-color: var(--warning);
        color: var(--warning)
    }

    html.dark-mode .focus-skill-btn.mobile-focus:hover {
        background: var(--warning);
        color: white
    }

    html.dark-mode .focus-skill-btn.mobile-focus.focused {
        background: rgba(245, 158, 11, 0.2)
    }

    html.dark-mode .focus-skill-btn.mobile-focus.focused:hover {
        background: var(--warning);
        color: white
    }
}

/* === Mobile: Compact sizing === */
@media(max-width:600px) {
    .page-header {
        margin: -1.5rem -1rem 1.25rem;
        padding: 1.25rem 1rem
    }

    .page-title {
        font-size: 1.4rem;
        gap: .5rem
    }

    .page-subtitle {
        font-size: 1.05rem
    }

    .occupation-code {
        font-size: .7rem;
        padding: .2rem .5rem
    }

    .featured-indicator {
        font-size: .65rem;
        padding: .2rem .5rem
    }

    .page-description {
        font-size: .85rem;
        line-height: 1.6
    }

    .save-profession-btn {
        padding: .375rem .75rem;
        font-size: .8rem
    }

    .section {
        margin-bottom: 1.75rem;
        border-radius: 8px
    }

    .section-heading {
        padding: .75rem 1rem
    }

    .heading-desktop {
        display: none
    }

    .heading-mobile {
        display: flex;
        flex-direction: column;
        gap: .25rem
    }

    .heading-mobile-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%
    }

    .heading-mobile-row h3 {
        font-size: .9rem
    }

    .heading-mobile-row .count {
        font-size: .75rem;
        padding-right: .5rem
    }

    .skills-section-title {
        font-size: 1rem
    }

    .skill-row {
        padding: .75rem .875rem;
        gap: .625rem
    }

    .skill-title {
        font-size: .85rem
    }

    .skill-type-badge {
        font-size: .6rem;
        padding: .1rem .35rem
    }

    .skill-description {
        font-size: .8rem;
        margin-top: .375rem
    }

    .importance-stars svg {
        width: 12px;
        height: 12px
    }

    .importance-label {
        font-size: .6rem
    }

    .skill-importance {
        min-width: 50px
    }

    .skill-expand {
        width: 24px;
        height: 24px
    }

    .skill-expand svg {
        width: 14px;
        height: 14px
    }

    .skill-books {
        padding: .75rem .875rem
    }

    .book-card {
        flex: 0 0 150px;
        padding: .625rem
    }

    .book-cover {
        height: 110px
    }

    .book-title {
        font-size: .7rem
    }

    .book-author {
        font-size: .65rem
    }

    .book-preview-link {
        font-size: .65rem;
        padding: .3rem .5rem
    }

    .spotlight-body {
        padding: 1rem
    }

    .spotlight-label {
        font-size: .7rem
    }

    .spotlight-skill-name {
        font-size: 1.1rem
    }

    .spotlight-description {
        font-size: .8rem;
        line-height: 1.55
    }

    .spotlight-book-label {
        font-size: .65rem
    }

    .spotlight-book-card {
        padding: .75rem
    }

    .spotlight-book-card .book-cover {
        flex: 0 0 80px;
        height: 110px
    }

    .spotlight-book-info .book-title {
        font-size: .75rem
    }

    .spotlight-nudge {
        font-size: .8rem
    }

    .experience-note {
        font-size: .75rem;
        padding: .625rem .875rem;
        margin-bottom: 1.25rem
    }

    .experience-note svg {
        width: 14px;
        height: 14px
    }

    .content-wrapper {
        margin-top: 0
    }

    .track-skill-btn,
    .focus-skill-btn {
        font-size: .7rem;
        padding: .25rem .5rem
    }
}