body.weekly-challenge-theme {
            --weekly-night: #0f1d34;
            --weekly-night-soft: #18304f;
            --weekly-glow: #f4c95d;
            --weekly-paper: #fffaf1;
            --weekly-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 241, 232, 0.98));
        }

        body.weekly-challenge-theme::after {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 16% 18%, rgba(244, 201, 93, 0.12), transparent 22%),
                radial-gradient(circle at 82% 24%, rgba(194, 84, 45, 0.12), transparent 20%),
                radial-gradient(circle at 68% 82%, rgba(36, 70, 102, 0.10), transparent 22%);
            mix-blend-mode: multiply;
        }

        .weekly-challenge-page {
            position: relative;
            overflow: hidden;
            display: grid;
            gap: 26px;
            padding: clamp(24px, 3.6vw, 36px);
            background:
                radial-gradient(circle at top right, rgba(244, 201, 93, 0.18), transparent 26%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 242, 233, 0.99));
        }

        .weekly-challenge-page::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(135deg, rgba(20, 33, 61, 0.025), transparent 34%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 28%);
        }

        .weekly-challenge-page > * {
            position: relative;
            z-index: 1;
        }

        .weekly-challenge-hero {
            position: relative;
            overflow: hidden;
            display: grid;
            gap: 24px;
            grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
            padding: clamp(26px, 4vw, 38px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 32px;
            background:
                radial-gradient(circle at top right, rgba(244, 201, 93, 0.34), transparent 28%),
                linear-gradient(135deg, rgba(10, 24, 43, 0.98), rgba(24, 48, 79, 0.96) 56%, rgba(194, 84, 45, 0.92));
            color: #fdf8ef;
            box-shadow: 0 30px 60px rgba(13, 24, 41, 0.22);
        }

        .weekly-challenge-hero::before,
        .weekly-challenge-hero::after {
            content: "";
            position: absolute;
            border-radius: 999px;
            pointer-events: none;
        }

        .weekly-challenge-hero::before {
            top: -120px;
            right: -80px;
            width: 280px;
            height: 280px;
            background: radial-gradient(circle, rgba(244, 201, 93, 0.36), rgba(244, 201, 93, 0));
        }

        .weekly-challenge-hero::after {
            bottom: -150px;
            left: -90px;
            width: 260px;
            height: 260px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
        }

        .weekly-challenge-hero-copy,
        .weekly-challenge-hero-panel {
            position: relative;
            z-index: 1;
        }

        .weekly-challenge-kicker,
        .weekly-challenge-meta-card span {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.12);
            color: #fff6dd !important;
            letter-spacing: 0.14em;
        }

        #weekly-challenge-headline {
            margin: 18px 0 14px;
            color: #fffdf7 !important;
            font-size: clamp(2.2rem, 5vw, 4.2rem) !important;
            max-width: 11ch;
        }

        #weekly-challenge-subtitle {
            margin: 0;
            max-width: 58ch;
            color: rgba(253, 248, 239, 0.84) !important;
            font-size: clamp(1rem, 1.8vw, 1.14rem);
        }

        .weekly-challenge-hero-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 22px;
        }

        .weekly-challenge-hero-tags span {
            padding: 10px 14px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(255, 255, 255, 0.12);
            color: #fffaf0;
            font-size: 0.9rem;
            font-weight: 700;
        }

        .weekly-challenge-hero-panel {
            display: grid;
            gap: 14px;
            align-content: center;
        }

        .weekly-challenge-meta-card,
        .weekly-challenge-status,
        .weekly-challenge-list-card,
        .weekly-challenge-brief,
        .weekly-challenge-editor-card,
        .weekly-challenge-preview-card {
            position: relative;
            overflow: hidden;
            border-radius: 28px;
        }

        .weekly-challenge-meta-card {
            padding: 18px 18px 20px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }

        .weekly-challenge-meta-card strong {
            display: block;
            margin: 14px 0 8px;
            color: #fffdf5;
            font-size: 1.18rem;
            line-height: 1.2;
        }

        .weekly-challenge-meta-card p {
            margin: 0;
            color: rgba(253, 248, 239, 0.8) !important;
            font-size: 0.97rem;
        }

        .weekly-challenge-shell {
            display: grid;
            gap: 24px;
            grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
            align-items: start;
        }

        .weekly-challenge-sidebar {
            position: sticky;
            top: 24px;
            display: grid;
            gap: 18px;
        }

        .weekly-challenge-status,
        .weekly-challenge-list-card,
        .weekly-challenge-brief,
        .weekly-challenge-editor-card,
        .weekly-challenge-preview-card {
            padding: 24px;
            border: 1px solid rgba(20, 33, 61, 0.1);
            background: var(--weekly-surface);
            box-shadow: 0 24px 44px rgba(20, 33, 61, 0.1);
        }

        .weekly-challenge-status {
            background:
                radial-gradient(circle at top right, rgba(244, 201, 93, 0.24), transparent 28%),
                linear-gradient(180deg, rgba(15, 29, 52, 0.98), rgba(24, 48, 79, 0.96));
            border-color: rgba(255, 255, 255, 0.08);
            color: #fff8eb;
        }

        .weekly-challenge-status .label,
        .weekly-challenge-status h2,
        .weekly-challenge-status-item strong {
            color: #fffaf1 !important;
        }

        .weekly-challenge-status h2 {
            margin-bottom: 0;
            max-width: 11ch;
        }

        .weekly-challenge-status-grid {
            display: grid;
            gap: 12px;
            margin: 18px 0 20px;
        }

        .weekly-challenge-status-item {
            padding: 16px 18px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.08);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

        .weekly-challenge-status-item span,
        .weekly-challenge-list-button span,
        .weekly-challenge-brief .label,
        .weekly-challenge-panel-label,
        .weekly-challenge-section-label {
            display: block;
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .weekly-challenge-status-item span {
            color: rgba(255, 248, 235, 0.74);
        }

        .weekly-challenge-status-item strong {
            display: block;
            margin-top: 6px;
            font-size: 1.28rem;
            line-height: 1.2;
        }

        .weekly-challenge-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .weekly-challenge-clear-button {
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            background: rgba(255, 255, 255, 0.12) !important;
            color: #fff8ed !important;
            box-shadow: none !important;
        }

        .weekly-challenge-clear-button:hover {
            background: rgba(255, 255, 255, 0.18) !important;
            box-shadow: none !important;
        }

        .weekly-challenge-list-card::before,
        .weekly-challenge-brief::before,
        .weekly-challenge-editor-card::before,
        .weekly-challenge-preview-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto;
            height: 4px;
            background: linear-gradient(90deg, rgba(194, 84, 45, 0.95), rgba(244, 201, 93, 0.85));
        }

        .weekly-challenge-list-card p,
        .weekly-challenge-brief p,
        .weekly-challenge-panel-head p {
            margin: 0;
        }

        .weekly-challenge-list-intro {
            margin: 0 0 18px;
            padding: 14px 16px;
            border-radius: 18px;
            background: rgba(20, 33, 61, 0.04);
            border: 1px solid rgba(20, 33, 61, 0.08);
        }

        .weekly-challenge-list-intro p {
            color: var(--ink-soft) !important;
            font-size: 0.96rem;
        }

        .weekly-challenge-list {
            display: grid;
            gap: 12px;
        }

        .weekly-challenge-list-button {
            position: relative;
            width: 100%;
            display: grid;
            gap: 8px;
            padding: 18px 18px 18px 22px;
            border-radius: 22px;
            border: 1px solid rgba(20, 33, 61, 0.1);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 245, 237, 0.98));
            color: var(--ink) !important;
            text-align: left;
            box-shadow: 0 14px 28px rgba(20, 33, 61, 0.06);
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
        }

        .weekly-challenge-list-button::before {
            content: "";
            position: absolute;
            inset: 16px auto 16px 0;
            width: 5px;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(20, 33, 61, 0.16), rgba(20, 33, 61, 0.04));
        }

        .weekly-challenge-list-button::after {
            content: "Started";
            position: absolute;
            top: 14px;
            right: 14px;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(194, 84, 45, 0.1);
            color: var(--brand);
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .weekly-challenge-list-button:hover {
            transform: translateY(-4px);
            box-shadow: 0 22px 34px rgba(20, 33, 61, 0.1);
        }

        .weekly-challenge-list-button.is-active {
            border-color: rgba(244, 201, 93, 0.24);
            background:
                radial-gradient(circle at top right, rgba(244, 201, 93, 0.2), transparent 30%),
                linear-gradient(135deg, rgba(15, 29, 52, 0.98), rgba(31, 61, 96, 0.96));
            box-shadow: 0 24px 36px rgba(15, 29, 52, 0.18);
        }

        .weekly-challenge-list-button.is-active::before {
            background: linear-gradient(180deg, rgba(244, 201, 93, 1), rgba(194, 84, 45, 0.9));
        }

        .weekly-challenge-list-button.is-active span,
        .weekly-challenge-list-button.is-active strong,
        .weekly-challenge-list-button.is-active p {
            color: #fff9ef !important;
        }

        .weekly-challenge-list-button.is-started {
            border-color: rgba(194, 84, 45, 0.22);
        }

        .weekly-challenge-list-button.is-started::after {
            opacity: 1;
            transform: translateY(0);
        }

        .weekly-challenge-list-button.is-submitted::after {
            content: "Submitted";
            background: rgba(29, 122, 76, 0.12);
            color: #1d7a4c;
            opacity: 1;
            transform: translateY(0);
        }

        .weekly-challenge-list-button span {
            color: var(--ink-soft);
        }

        .weekly-challenge-list-button strong {
            display: block;
            margin-right: 84px;
            color: var(--ink);
            font-size: 1.1rem;
            line-height: 1.25;
        }

        .weekly-challenge-list-button p {
            margin: 0;
            color: var(--ink-soft) !important;
            font-size: 0.95rem !important;
            line-height: 1.55;
        }

        .weekly-challenge-workspace {
            display: grid;
            gap: 18px;
        }

        .weekly-challenge-brief {
            display: grid;
            gap: 18px;
            background:
                radial-gradient(circle at top right, rgba(244, 201, 93, 0.14), transparent 28%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 234, 0.98));
        }

        .weekly-challenge-brief-head {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 14px;
            align-items: flex-start;
        }

        .weekly-challenge-brief-copy {
            display: grid;
            gap: 10px;
        }

        .weekly-challenge-brief-badge {
            padding: 10px 14px;
            border-radius: 999px;
            background: rgba(194, 84, 45, 0.1);
            border: 1px solid rgba(194, 84, 45, 0.16);
            color: var(--brand-deep);
            font-size: 0.88rem;
            font-weight: 800;
            line-height: 1.2;
        }

        .weekly-challenge-brief .label,
        .weekly-challenge-panel-label,
        .weekly-challenge-section-label {
            color: var(--ink-soft);
        }

        .weekly-challenge-goal-card,
        .weekly-challenge-check-card,
        .weekly-challenge-tip-card {
            padding: 18px;
            border-radius: 22px;
            border: 1px solid rgba(20, 33, 61, 0.08);
            background: rgba(255, 255, 255, 0.68);
        }

        .weekly-challenge-goal-card {
            background:
                linear-gradient(135deg, rgba(255, 250, 240, 0.96), rgba(255, 255, 255, 0.84));
        }

        #weekly-active-goal {
            margin-top: 10px;
            color: var(--ink) !important;
            font-size: 1.08rem;
            line-height: 1.7;
        }

        .weekly-challenge-brief-grid {
            display: grid;
            gap: 18px;
            grid-template-columns: minmax(0, 1.08fr) minmax(240px, 0.82fr);
        }

        .weekly-challenge-checklist {
            margin: 12px 0 0;
            padding: 0;
            list-style: none;
        }

        .weekly-challenge-checklist li {
            position: relative;
            margin: 0;
            padding: 10px 0 10px 34px;
            border-bottom: 1px dashed rgba(20, 33, 61, 0.12);
            color: var(--ink-soft);
        }

        .weekly-challenge-checklist li:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .weekly-challenge-checklist li::before {
            content: "";
            position: absolute;
            top: 15px;
            left: 0;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            background:
                radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.9), transparent 36%),
                linear-gradient(135deg, rgba(194, 84, 45, 0.94), rgba(244, 201, 93, 0.94));
            box-shadow: 0 6px 12px rgba(194, 84, 45, 0.18);
        }

        #weekly-active-hint {
            margin-top: 10px;
            color: var(--ink-soft) !important;
        }

        .weekly-challenge-panels {
            display: grid;
            gap: 18px;
            grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.92fr);
        }

        .weekly-challenge-editor-card,
        .weekly-challenge-preview-card {
            display: grid;
            gap: 16px;
        }

        .weekly-challenge-panel-head {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 14px;
            align-items: flex-start;
        }

        .weekly-challenge-panel-head h3 {
            margin: 8px 0 0;
            color: var(--ink);
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.35rem;
            line-height: 1.1;
        }

        .weekly-challenge-panel-head p {
            max-width: 27ch;
            color: var(--ink-soft) !important;
            font-size: 0.94rem;
        }

        .weekly-challenge-editor {
            width: 100%;
            min-height: 470px;
            padding: 18px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 22px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 16%),
                linear-gradient(180deg, #0f1d34, #132845);
            color: #f8f3e7;
            resize: vertical;
            line-height: 1.6;
            font-family: Consolas, "Courier New", monospace;
            font-size: 0.95rem;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 38px rgba(15, 29, 52, 0.18);
        }

        .weekly-challenge-submit-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
        }

        .weekly-challenge-submit-button {
            min-width: 150px;
            background: linear-gradient(135deg, rgba(194, 84, 45, 0.98), rgba(210, 141, 27, 0.96)) !important;
            color: #fffaf1 !important;
        }

        .weekly-challenge-submit-button.is-submitted {
            background: linear-gradient(135deg, #1d7a4c, #2f9461) !important;
        }

        .weekly-challenge-submit-status {
            flex: 1 1 220px;
            margin: 0;
            color: var(--ink-soft) !important;
            font-size: 0.94rem;
            font-weight: 700;
        }

        .weekly-challenge-preview {
            width: 100%;
            min-height: 470px;
            border: 1px solid rgba(20, 33, 61, 0.1);
            border-radius: 22px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 246, 239, 0.96));
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
        }

        .weekly-challenge-list-button:focus-visible,
        .weekly-challenge-clear-button:focus-visible,
        .weekly-challenge-submit-button:focus-visible,
        .weekly-challenge-editor:focus-visible {
            outline: 3px solid rgba(244, 201, 93, 0.7);
            outline-offset: 3px;
        }

        @media (max-width: 1180px) {
            .weekly-challenge-hero {
                grid-template-columns: 1fr;
            }

            .weekly-challenge-sidebar {
                position: static;
            }

            .weekly-challenge-brief-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 980px) {
            .weekly-challenge-shell,
            .weekly-challenge-panels {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 720px) {
            .weekly-challenge-page {
                padding: 20px;
            }

            .weekly-challenge-hero,
            .weekly-challenge-status,
            .weekly-challenge-list-card,
            .weekly-challenge-brief,
            .weekly-challenge-editor-card,
            .weekly-challenge-preview-card {
                padding: 20px;
                border-radius: 24px;
            }

            .weekly-challenge-brief-badge,
            .weekly-challenge-list-button::after {
                position: static;
            }

            .weekly-challenge-list-button strong {
                margin-right: 0;
            }

            .weekly-challenge-actions,
            .weekly-challenge-clear-button,
            .weekly-challenge-submit-button {
                width: 100%;
            }

            .weekly-challenge-editor,
            .weekly-challenge-preview {
                min-height: 360px;
            }
        }