:root {
    --site-bg: #ffffff;
    --site-surface: #ffffff;
    --site-surface-2: #f7f4ff;
    --site-primary: #7c3aed;
    --site-secondary: #a78bfa;
    --site-text: #1f1a2e;
    --site-muted: #43325f;
    --site-border: rgba(124, 58, 237, 0.16);
    --site-shadow: 0 14px 34px rgba(65, 35, 130, 0.08);
}

body.site-body {
    background: #ffffff !important;
    color: var(--site-text) !important;
}

body.site-body::before {
    background-image:
        radial-gradient(circle at 20% 15%, rgba(124, 58, 237, 0.1) 0 2px, transparent 2px),
        radial-gradient(circle at 75% 28%, rgba(124, 58, 237, 0.08) 0 2px, transparent 2px),
        radial-gradient(circle at 34% 62%, rgba(124, 58, 237, 0.08) 0 1.6px, transparent 1.6px),
        radial-gradient(circle at 82% 75%, rgba(124, 58, 237, 0.08) 0 1.7px, transparent 1.7px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(124, 58, 237, 0.045) 1px, transparent 1px);
    background-size: auto, auto, auto, auto, 28px 28px, 28px 28px;
    opacity: 0.9;
}

.site-nav .container {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--site-border) !important;
    box-shadow: 0 10px 26px rgba(65, 35, 130, 0.09) !important;
}

.site-brand,
.nav-link.site-link,
.hero-title,
.section-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--site-text) !important;
}

.nav-link.site-link:hover,
.nav-link.site-link.active {
    background: rgba(124, 58, 237, 0.14) !important;
    color: #4c1d95 !important;
}

.btn-site-primary,
.btn.btn-site-primary {
    background: var(--site-primary) !important;
    border: 1px solid var(--site-primary) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.btn-site-primary:hover,
.btn.btn-site-primary:hover {
    background: #6d28d9 !important;
    border-color: #6d28d9 !important;
    transform: translateY(-1px);
}

.btn-site-outline,
.btn.btn-site-outline {
    background: #ffffff !important;
    border: 1px solid var(--site-border) !important;
    color: var(--site-primary) !important;
}

.btn-site-outline:hover,
.btn.btn-site-outline:hover {
    background: rgba(124, 58, 237, 0.08) !important;
    color: #5b21b6 !important;
}

.glass-card,
.service-card,
.course-card,
.auth-card,
.process-card,
.offer-card,
.notice-card,
.profile-section,
.profile-stat-box,
.profile-info-list > div,
.profile-check,
.table-auth td,
.table-auth th,
.chatbot-panel,
.chatbot-page-card,
.academy-lesson-card,
.roadmap-item,
.ctf-card,
.skill-card {
    background: #ffffff !important;
    border: 1px solid var(--site-border) !important;
    box-shadow: var(--site-shadow) !important;
    color: var(--site-text) !important;
}

.text-light-emphasis,
.section-subtitle,
.hero-subtitle,
.small,
.footer-site,
.academy-pill span,
.academy-feedback,
.module-btn .meta,
.academy-list-item,
.profile-info-list span,
.notice-card,
.link-light,
.portfolio-page .text-light-emphasis,
.portfolio-page .section-subtitle,
.portfolio-page .timeline-content p,
.portfolio-page .timeline-meta,
.portfolio-page .project-modal-description,
.portfolio-page .project-modal-detail-description,
.portfolio-page .project-description,
.portfolio-page .hero-visual-card p {
    color: var(--site-muted) !important;
}

.offer-price,
.offer-points li,
.academy-pill span,
.academy-list-item,
.academy-feedback,
.module-btn .meta,
.roadmap-head span,
.roadmap-item p,
.week-card,
.week-card span,
.week-card small,
.method-mnemonic,
.method-card li,
.academy-message-item small,
.academy-message-item p,
.check-item,
.small,
.notice-card,
.link-light {
    color: #4a3570 !important;
}

.offer-price,
.academy-stat strong,
.academy-lesson-head strong,
.roadmap-head strong,
.method-card h4 {
    color: #2f1e4c !important;
}

.academy-hero p,
.academy-value-list li,
.academy-list-item,
.academy-feedback,
.academy-pill span,
.module-btn .meta,
.academy-lesson-card p,
.academy-lesson-card li,
.academy-lesson-head span,
.academy-lesson-example,
.roadmap-item p,
.roadmap-head span,
.week-card,
.week-card span,
.week-card small,
.method-mnemonic,
.method-card li,
.academy-message-item small,
.academy-message-item p,
.check-item,
.weekly-quiz-wrap {
    color: #4b4264 !important;
}

.academy-lesson-head strong,
.roadmap-head strong,
.method-card h4,
.academy-stat strong,
.academy-message-item h4,
.module-btn {
    color: #241b39 !important;
}

.option-btn {
    color: #2f2448 !important;
}

.footer-site {
    border-top: 1px solid var(--site-border) !important;
    background: rgba(247, 244, 255, 0.65);
}

.form-control,
.form-select,
.chatbot-input,
textarea.form-control {
    background: #ffffff !important;
    color: var(--site-text) !important;
    border: 1px solid var(--site-border) !important;
}

.form-control::placeholder,
.chatbot-input::placeholder {
    color: #8f84aa !important;
}

.form-control:focus,
.form-select:focus,
.chatbot-input:focus {
    border-color: rgba(124, 58, 237, 0.45) !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.14) !important;
}

.badge-soft,
.hero-pill,
.portfolio-page .hero-kicker,
.portfolio-page .hero-points span,
.portfolio-page .interest-tag,
.portfolio-page .project-tags span,
.portfolio-page .skill-badge,
.portfolio-page .project-type,
.academy-pill,
.academy-stat,
.academy-lesson-example,
.game-step,
.module-btn.active,
.roadmap-item.active {
    background: rgba(124, 58, 237, 0.08) !important;
    border: 1px solid rgba(124, 58, 237, 0.24) !important;
    color: #4c1d95 !important;
}

.offer-card::after,
.portfolio-page .hero-visual-card::before {
    display: none !important;
}

.nav-avatar-btn,
.chatbot-toggle {
    background: #ffffff !important;
    border: 1px solid rgba(124, 58, 237, 0.28) !important;
    color: var(--site-primary) !important;
}

.nav-avatar-menu,
.chatbot-message.is-assistant .chatbot-bubble,
.chatbot-page-message.is-assistant .chatbot-page-bubble {
    background: #ffffff !important;
    border: 1px solid var(--site-border) !important;
    color: var(--site-text) !important;
}

.chatbot-message.is-user .chatbot-bubble,
.chatbot-page-message.is-user .chatbot-page-bubble {
    background: rgba(124, 58, 237, 0.12) !important;
    border: 1px solid rgba(124, 58, 237, 0.28) !important;
    color: #4c1d95 !important;
}

.portfolio-page .hero-visual-card,
.portfolio-page .stat-card,
.portfolio-page .info-card,
.portfolio-page .skill-category,
.portfolio-page .project-card,
.portfolio-page .timeline-content,
.portfolio-page .contact-form,
.portfolio-page .project-modal-content,
.academy-sidebar,
.academy-hero,
.academy-value,
.academy-progress-track,
.module-btn,
.option-btn,
.roadmap-item,
.game-step,
#certificateCard {
    background: #ffffff !important;
    border-color: var(--site-border) !important;
    color: var(--site-text) !important;
}

.academy-progress-bar {
    background: var(--site-primary) !important;
}

.portfolio-page .timeline-marker {
    background: var(--site-primary) !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.16) !important;
}

.portfolio-page .project-modal-backdrop {
    background: rgba(80, 64, 130, 0.26) !important;
}

a {
    color: #5b21b6;
}

a:hover {
    color: #4c1d95;
}

.theme-toggle-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 0;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
}

.theme-toggle-svg {
    width: 24px;
    height: 24px;
    display: block;
}

.live-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(124, 58, 237, 0.24);
    background: rgba(124, 58, 237, 0.08);
    color: #41206b;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.sticky-mobile-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 380;
    display: none;
}

.sticky-mobile-cta .btn {
    width: 100%;
    height: 48px;
}

.chatbot-toolbar {
    padding: 0.55rem 0.85rem 0;
}

.chatbot-persona {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--site-border);
    background: #fff;
    color: #2f1e4c;
    padding: 0.45rem 0.55rem;
    font-size: 0.85rem;
}

[data-theme="dark"] {
    --site-bg: #08070d;
    --site-surface: #12101b;
    --site-surface-2: #171325;
    --site-primary: #a855f7;
    --site-secondary: #d8b4fe;
    --site-text: #f4efff;
    --site-muted: #d6c9ef;
    --site-border: rgba(216, 180, 254, 0.24);
    --site-shadow: 0 16px 42px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] body.site-body {
    background: #08070d !important;
    color: var(--site-text) !important;
}

[data-theme="dark"] body.site-body::before {
    background-image:
        radial-gradient(circle at 18% 18%, rgba(168, 85, 247, 0.22) 0 2px, transparent 2px),
        radial-gradient(circle at 76% 24%, rgba(168, 85, 247, 0.16) 0 2px, transparent 2px),
        radial-gradient(circle at 30% 68%, rgba(168, 85, 247, 0.14) 0 1.8px, transparent 1.8px),
        radial-gradient(circle at 82% 75%, rgba(168, 85, 247, 0.14) 0 1.8px, transparent 1.8px),
        linear-gradient(90deg, rgba(216, 180, 254, 0.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(216, 180, 254, 0.06) 1px, transparent 1px);
}

[data-theme="dark"] .site-nav .container {
    background: rgba(10, 8, 16, 0.92) !important;
    border-color: var(--site-border) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38) !important;
}

[data-theme="dark"] .site-brand,
[data-theme="dark"] .nav-link.site-link,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .section-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .academy-lesson-head strong,
[data-theme="dark"] .roadmap-head strong,
[data-theme="dark"] .method-card h4,
[data-theme="dark"] .academy-stat strong,
[data-theme="dark"] .module-btn,
[data-theme="dark"] .option-btn {
    color: var(--site-text) !important;
}

[data-theme="dark"] .nav-link.site-link:hover,
[data-theme="dark"] .nav-link.site-link.active {
    background: rgba(168, 85, 247, 0.24) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-site-primary,
[data-theme="dark"] .btn.btn-site-primary {
    background: #8b3dfa !important;
    border-color: #8b3dfa !important;
}

[data-theme="dark"] .btn-site-primary:hover,
[data-theme="dark"] .btn.btn-site-primary:hover {
    background: #7a2bea !important;
    border-color: #7a2bea !important;
}

[data-theme="dark"] .btn-site-outline,
[data-theme="dark"] .btn.btn-site-outline,
[data-theme="dark"] .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--site-border) !important;
    color: #f1e7ff !important;
}

[data-theme="dark"] .btn-site-outline:hover,
[data-theme="dark"] .btn.btn-site-outline:hover,
[data-theme="dark"] .theme-toggle-btn:hover {
    background: rgba(168, 85, 247, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .glass-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .course-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .process-card,
[data-theme="dark"] .offer-card,
[data-theme="dark"] .notice-card,
[data-theme="dark"] .profile-section,
[data-theme="dark"] .profile-stat-box,
[data-theme="dark"] .profile-info-list > div,
[data-theme="dark"] .profile-check,
[data-theme="dark"] .table-auth td,
[data-theme="dark"] .table-auth th,
[data-theme="dark"] .chatbot-panel,
[data-theme="dark"] .chatbot-page-card,
[data-theme="dark"] .academy-lesson-card,
[data-theme="dark"] .roadmap-item,
[data-theme="dark"] .ctf-card,
[data-theme="dark"] .skill-card,
[data-theme="dark"] .portfolio-page .hero-visual-card,
[data-theme="dark"] .portfolio-page .stat-card,
[data-theme="dark"] .portfolio-page .info-card,
[data-theme="dark"] .portfolio-page .skill-category,
[data-theme="dark"] .portfolio-page .project-card,
[data-theme="dark"] .portfolio-page .timeline-content,
[data-theme="dark"] .portfolio-page .contact-form,
[data-theme="dark"] .portfolio-page .project-modal-content,
[data-theme="dark"] .academy-sidebar,
[data-theme="dark"] .academy-hero,
[data-theme="dark"] .academy-value,
[data-theme="dark"] .academy-progress-track,
[data-theme="dark"] .module-btn,
[data-theme="dark"] .option-btn,
[data-theme="dark"] .game-step,
[data-theme="dark"] #certificateCard {
    background: var(--site-surface) !important;
    border-color: var(--site-border) !important;
    color: var(--site-text) !important;
    box-shadow: var(--site-shadow) !important;
}

[data-theme="dark"] .text-light-emphasis,
[data-theme="dark"] .section-subtitle,
[data-theme="dark"] .hero-subtitle,
[data-theme="dark"] .small,
[data-theme="dark"] .footer-site,
[data-theme="dark"] .academy-pill span,
[data-theme="dark"] .academy-feedback,
[data-theme="dark"] .module-btn .meta,
[data-theme="dark"] .academy-list-item,
[data-theme="dark"] .profile-info-list span,
[data-theme="dark"] .notice-card,
[data-theme="dark"] .link-light,
[data-theme="dark"] .portfolio-page .text-light-emphasis,
[data-theme="dark"] .portfolio-page .section-subtitle,
[data-theme="dark"] .portfolio-page .timeline-content p,
[data-theme="dark"] .portfolio-page .timeline-meta,
[data-theme="dark"] .portfolio-page .project-modal-description,
[data-theme="dark"] .portfolio-page .project-modal-detail-description,
[data-theme="dark"] .portfolio-page .project-description,
[data-theme="dark"] .portfolio-page .hero-visual-card p,
[data-theme="dark"] .academy-hero p,
[data-theme="dark"] .academy-value-list li,
[data-theme="dark"] .academy-lesson-card p,
[data-theme="dark"] .academy-lesson-card li,
[data-theme="dark"] .academy-lesson-head span,
[data-theme="dark"] .roadmap-item p,
[data-theme="dark"] .roadmap-head span,
[data-theme="dark"] .week-card,
[data-theme="dark"] .week-card span,
[data-theme="dark"] .week-card small,
[data-theme="dark"] .method-mnemonic,
[data-theme="dark"] .method-card li,
[data-theme="dark"] .academy-message-item small,
[data-theme="dark"] .academy-message-item p,
[data-theme="dark"] .check-item,
[data-theme="dark"] .weekly-quiz-wrap {
    color: var(--site-muted) !important;
}

[data-theme="dark"] .footer-site {
    border-top-color: var(--site-border) !important;
    background: rgba(14, 11, 23, 0.82) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .chatbot-input,
[data-theme="dark"] textarea.form-control {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .chatbot-input::placeholder {
    color: #b7a7d6 !important;
}

[data-theme="dark"] .badge-soft,
[data-theme="dark"] .hero-pill,
[data-theme="dark"] .portfolio-page .hero-kicker,
[data-theme="dark"] .portfolio-page .hero-points span,
[data-theme="dark"] .portfolio-page .interest-tag,
[data-theme="dark"] .portfolio-page .project-tags span,
[data-theme="dark"] .portfolio-page .skill-badge,
[data-theme="dark"] .portfolio-page .project-type,
[data-theme="dark"] .academy-pill,
[data-theme="dark"] .academy-stat,
[data-theme="dark"] .academy-lesson-example,
[data-theme="dark"] .module-btn.active,
[data-theme="dark"] .roadmap-item.active,
[data-theme="dark"] .game-step.selected,
[data-theme="dark"] .chatbot-message.is-user .chatbot-bubble,
[data-theme="dark"] .chatbot-page-message.is-user .chatbot-page-bubble {
    background: rgba(168, 85, 247, 0.2) !important;
    border-color: rgba(216, 180, 254, 0.35) !important;
    color: #f4ecff !important;
}

[data-theme="dark"] .chatbot-message.is-assistant .chatbot-bubble,
[data-theme="dark"] .chatbot-page-message.is-assistant .chatbot-page-bubble,
[data-theme="dark"] .nav-avatar-menu {
    background: var(--site-surface) !important;
    border-color: var(--site-border) !important;
    color: var(--site-text) !important;
}

[data-theme="dark"] .nav-avatar-btn,
[data-theme="dark"] .chatbot-toggle {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(216, 180, 254, 0.4) !important;
    color: #f4ecff !important;
}

[data-theme="dark"] .academy-progress-bar,
[data-theme="dark"] .portfolio-page .timeline-marker {
    background: #a855f7 !important;
}

[data-theme="dark"] .portfolio-page .timeline-marker {
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.25) !important;
}

[data-theme="dark"] .portfolio-page .project-modal-backdrop {
    background: rgba(6, 5, 10, 0.74) !important;
}

[data-theme="dark"] a {
    color: #d8b4fe;
}

[data-theme="dark"] a:hover {
    color: #f0ddff;
}

[data-theme="dark"] .live-trust-badge {
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(216, 180, 254, 0.34);
    color: #f1e7ff;
}

[data-theme="dark"] .chatbot-persona {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--site-border);
    color: var(--site-text);
}

@media (max-width: 991px) {
    .sticky-mobile-cta {
        display: block;
    }

    body {
        padding-bottom: 74px;
    }
}