tu/*
 * ============================================================
 * FILE PATH: frontend/styles/challenge.css
 * ============================================================
 * PURPOSE
 * -------
 * SQL Learning Platform module.
 *
 * DOCUMENTATION
 * -------------
 * Keep this path header during future revisions. Add section
 * comments before every new major feature, state object,
 * event group, API call, or validation rule.
 *
 * Existing functionality is preserved in this documentation
 * revision.
 * ============================================================
 */

.challenge-container {

    padding: 40px;
}

.subtitle {

    color: #cbd5e1;

    margin-bottom: 30px;
}

.difficulty-cards {

    display: flex;

    justify-content: space-between;

    align-items: stretch;

    gap: 25px;

    margin-bottom: 25px;

}

.challenge-card {

    background: #1e293b;

    padding: 25px;

    border-radius: 12px;

    flex: 1;

}

.challenge-card h2 {

    margin-bottom: 15px;
}

.challenge-card p {

    color: #cbd5e1;

    margin-bottom: 20px;
}

.challenge-card button {

    padding: 10px 18px;

    background: #2563eb;

    color: white;

    border: none;

    border-radius: 8px;
}

.sample-question {

    margin-top: 40px;

    background: #111827;

    padding: 25px;

    border-radius: 12px;
}


.sample-question {

    margin-top: 40px;

    padding: 25px;

    background: #1e293b;

    border-radius: 12px;
}

.sample-question h2 {

    margin-bottom: 15px;
}

.sample-question p {

    margin-bottom: 12px;
}

.sample-question table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 15px;
}

.sample-question th,
.sample-question td {

    border: 1px solid #475569;

    padding: 12px;

    text-align: left;
}

.sample-question th {

    background: #0f172a;
}

.question-buttons {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 20px;

}

.question-buttons button {

    width: 100%;

    padding: 12px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    background: #2563eb;

    color: white;

}

#questions-popup {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 90%;

    max-width: 750px;

    max-height: 80vh;

    background: #1e293b;

    padding: 20px;

    border-radius: 12px;

    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);

    z-index: 1000;

    overflow: hidden;

}

/* The list remains scrollable while each question card grows naturally. */
.questions-grid {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin: 20px 0;

    max-height: 60vh;

    overflow-y: auto;

    overflow-x: hidden;

    padding-right: 8px;

}

.question-filters {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin: 15px 0;

}

.filter-btn {

    padding: 8px 14px;

    border: 1px solid #475569;

    border-radius: 8px;

    background: #334155;

    color: #e2e8f0;

    cursor: pointer;

    font-size: 14px;

}

.filter-btn:hover {

    background: #475569;

}

.filter-btn.active {

    background: #3b82f6;

    color: white;

    border: 2px solid #93c5fd;

    font-weight: 600;

    box-shadow: 0 0 8px rgba(59, 130, 246, 0.45);

}

/* ============================================================
 * QUESTION POPUP CARDS - AUTO HEIGHT
 * ------------------------------------------------------------
 * Short and long questions must occupy only the space they need.
 * The previous minimum-height/flex-centering combination could make
 * long descriptive questions visually collide with the next card.
 * ============================================================ */
.question-popup-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 16px;
    background: #334155;
    border: 1px solid #475569;
    border-radius: 10px;
    min-height: 0;
    height: auto;
    box-sizing: border-box;
    /* FIX (overlapping question rows / hidden Start button):
       .questions-grid caps its height at 60vh and scrolls. Without
       flex-shrink:0, flexbox is allowed to compress each card BELOW
       its actual text height once the list is long enough to exceed
       that 60vh cap (min-height:0 above removes the browser's normal
       "never shrink under content" protection). That compression is
       exactly what made rows visually collide and swallowed the
       Start button into the next card. Locking flex-shrink/grow to 0
       forces every card to keep its natural, content-based height —
       short questions stay compact, long ones grow — and the list
       simply scrolls instead of overlapping. */
    flex: 0 0 auto;
}

.question-popup-text {
    flex: 1 1 auto;
    min-width: 0;
    color: #f8fafc;
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
} 

.question-popup-text strong {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.question-popup-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    align-self: flex-start;
}

.question-status {

    font-size: 20px;

}

.popup-start-btn {

    padding: 9px 16px;

    border: none;

    border-radius: 7px;

    background: #2563eb;

    color: white;

    cursor: pointer;

    font-weight: 600;

}

.popup-start-btn:hover {

    background: #1d4ed8;

}

/* FIX (Start button forced to 90px / not displaying correctly):
   This rule is leftover from an older design where the entire
   question card was a single <button>. Cards are now <div class=
   "question-popup-card"> with a small nested <button class=
   "popup-start-btn">, but ".questions-grid button" still matches
   that nested button — and because "class + tag" (0,1,1) beats
   ".popup-start-btn" alone (0,1,0), it was overriding padding,
   border-radius, text-align and forcing min-height:90px onto the
   small Start button. Combined with the card-shrinking bug above,
   that oversized/misaligned button is what disappeared into the
   overlap. Scoped to :not(.popup-start-btn) so it no longer touches
   the Start button, restoring its intended compact size. */
.questions-grid button:not(.popup-start-btn) {

    padding: 15px;

    border: none;

    border-radius: 10px;

    background: #334155;

    color: white;

    cursor: pointer;

    min-height: 90px;

    text-align: center;

    line-height: 1.5;
}

.questions-grid small {

    color: #cbd5e1;

    font-size: 12px;
}

#close-popup {

    padding: 10px 18px;

    border: none;

    border-radius: 8px;

    background: #ef4444;

    color: white;

    cursor: pointer;
}

#overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    z-index: 999;
}

.difficulty-progress {

    margin-top: 20px;

}

.progress-item {

    margin-bottom: 20px;

}

.progress-item p {

    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

    font-weight: bold;

}

.progress-bar {

    width: 100%;

    height: 14px;
    position: relative;

    background-color: #e0e0e0;

    border-radius: 10px;

    overflow: hidden;

}

.progress-fill {

    width: 0%;

    height: 100%;

    display: block;

    background: linear-gradient(
        to right,
        #4caf50,
        #81c784
    );

    transition: width 0.5s ease;

}

.challenge-layout {

    display: flex;

    gap: 30px;

    margin-top: 30px;

}

.sample-question {

    width: 40%;

}

.editor-panel {

    width: 60%;

}

.editor-panel textarea {

    width: 100%;

    min-height: 500px;

    background: #0f172a;

    color: white;

    border-radius: 10px;

    padding: 15px;

    font-size: 16px;

}

.popup-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}

#question-search {

    width: 100%;

    padding: 12px;

    margin-bottom: 20px;

    border: none;

    border-radius: 8px;

    background: #334155;

    color: white;

    font-size: 16px;

}

/* ============================================================
   VIEW TABLE SCHEMA
   ------------------------------------------------------------
   Matched to Share Challenge button.
   ============================================================ */
.view-schema-btn {
    margin: 0;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    background: #2563eb;
    color: #ffffff;
    transition: background .2s ease, transform .2s ease;
}

.view-schema-btn:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}
/* ============================================================
 * SCHEMA OVERLAY
 * ============================================================
 */

.schema-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.55);

    z-index: 9998;

}


/* ============================================================
 * SCHEMA POPUP
 * ============================================================
 */

.schema-popup {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: min(900px, 92vw);

    max-height: 85vh;

    overflow-y: auto;

    background: white;

    border-radius: 14px;

    padding: 20px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3);

    z-index: 9999;

}


/* ============================================================
 * SCHEMA HEADER
 * ============================================================
 */

.schema-popup-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}

.schema-popup-header h2 {

    margin: 0;

}

.close-schema-btn {

    border: none;

    background: transparent;

    font-size: 20px;

    cursor: pointer;

}


/* ============================================================
 * DATABASE NAME
 * ============================================================
 */

.schema-database-name {

    margin-bottom: 20px;

    padding: 10px;

    background: #f3f4f6;

    border-radius: 8px;

}


/* ============================================================
 * TABLE CARD
 * ============================================================
 */

.schema-table-card {

    border: 1px solid #d1d5db;

    border-radius: 10px;

    margin-bottom: 20px;

    overflow: hidden;

}

.schema-table-title {

    padding: 12px 15px;

    background: #eef2ff;

    font-size: 18px;

    font-weight: 700;

}


/* ============================================================
 * SCHEMA TABLE
 * ============================================================
 */

.schema-columns-table {

    width: 100%;

    border-collapse: collapse;

}

.schema-columns-table th,
.schema-columns-table td {

    padding: 10px;

    text-align: left;

    border-bottom: 1px solid #e5e7eb;

}

.schema-columns-table th {

    background: #f9fafb;

    font-weight: 700;

}


/* ============================================================
 * PRIMARY KEY
 * ============================================================
 */

.schema-primary-key {

    color: #b45309;

    font-weight: 700;

}


/* ============================================================
 * FOREIGN KEY
 * ============================================================
 */

.schema-foreign-key {

    color: #2563eb;

    font-weight: 600;

}


/* ============================================================
 * RELATIONSHIPS
 * ============================================================
 */

.schema-relationships {

    margin-top: 12px;

    padding: 12px;

    background: #eff6ff;

    border-radius: 8px;

}

.schema-relationships h4 {

    margin-top: 0;

}

.schema-relationship-item {

    padding: 6px 0;

    font-family: monospace;

}


/* ============================================================
 * MOBILE
 * ============================================================
 */

@media (max-width: 700px) {

    .schema-popup {

        width: 94vw;

        padding: 12px;

    }

    .schema-columns-table {

        font-size: 13px;

    }

    .schema-columns-table th,
    .schema-columns-table td {

        padding: 7px;

    }

}

/* ============================================================
 * SCHEMA POPUP - VISIBILITY FIX
 * ============================================================
 */

.schema-popup {
    background: #ffffff !important;
    color: #1f2937 !important;
}

.schema-popup-header {
    background: #ffffff !important;
    color: #111827 !important;
}

.schema-popup-header h2 {
    color: #111827 !important;
}

.close-schema-btn {
    color: #111827 !important;
}

.schema-database-name {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

.schema-content {
    background: #ffffff !important;
    color: #1f2937 !important;
}

.schema-table-card {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
}

.schema-table-title {
    background: #e0e7ff !important;
    color: #111827 !important;
}

.schema-columns-table {
    background: #ffffff !important;
    color: #1f2937 !important;
}

.schema-columns-table th {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

.schema-columns-table td {
    background: #ffffff !important;
    color: #1f2937 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.schema-primary-key {
    color: #b45309 !important;
}

.schema-foreign-key {
    color: #2563eb !important;
}

.schema-relationships {
    background: #eff6ff !important;
    color: #1e3a8a !important;
}

.schema-relationships h4 {
    color: #1e3a8a !important;
}

.schema-relationship-item {
    color: #1e3a8a !important;
}


/* ============================================================
   QUERY RESULTS - FULL RESULT SET + COMPACT SCROLL VIEW
   ------------------------------------------------------------
   All returned rows remain available. The viewport starts compact
   and scrolls vertically/horizontally instead of truncating data.
   ============================================================ */
.query-results-table-wrapper {
    position: relative;
    width: 100%;
    max-height: 280px;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
}

.query-results-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.query-results-control {
    width: 32px;
    height: 30px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.query-results-control:hover {
    background: #e5e7eb;
}

.query-results-close {
    font-size: 20px;
}

.query-results-resize-handle {
    width: 100%;
    height: 10px;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-bottom: 1px solid #d1d5db;
    touch-action: none;
}

.query-results-resize-handle::after {
    content: "";
    width: 48px;
    height: 3px;
    border-radius: 3px;
    background: #9ca3af;
}

.query-results-minimized .query-results-table-wrapper,
.query-results-minimized .query-results-resize-handle {
    display: none;
}

.query-results-maximized {
    position: relative;
    z-index: 50;
}

.query-results-maximized .query-results-table-wrapper {
    max-height: 70vh;
}

.query-results-table-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.query-results-table-wrapper::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 8px;
    border: 2px solid #f3f4f6;
}

.query-results-table-wrapper::-webkit-scrollbar-track {
    background: #f3f4f6;
}

body.query-results-resizing {
    cursor: ns-resize !important;
    user-select: none !important;
}

@media (max-width: 768px) {
    .query-results-table-wrapper {
        max-height: 240px;
    }

    .query-results-actions {
        gap: 5px;
    }

    .query-results-control {
        width: 30px;
        height: 30px;
    }

    .query-results-maximized .query-results-table-wrapper {
        max-height: 65vh;
    }
}

/* ============================================================
   SQL QUERY RESULTS TABLE
   ============================================================ */

.query-results-container {
    width: 100%;
    margin-top: 20px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

.query-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
    background: #f3f4f6;
    border-bottom: 1px solid #d1d5db;
}

.query-results-header h3 {
    margin: 0;
    color: #111827;
}

#query-result-summary {
    color: #4b5563;
    font-size: 14px;
}

.query-results-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

#query-results-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

#query-results-table thead th {
    background: #e5e7eb;
    color: #111827;
    font-weight: 700;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    white-space: nowrap;
}

#query-results-table tbody td {
    padding: 11px 14px;
    border: 1px solid #e5e7eb;
    color: #1f2937;
    background: #ffffff;
    vertical-align: top;
}

#query-results-table tbody tr:nth-child(even) td {
    background: #f9fafb;
}

#query-results-table tbody tr:hover td {
    background: #eef2ff;
}

/* NULL values */
#query-results-table tbody td {
    max-width: 350px;
    word-break: break-word;
}

/* Mobile */
@media (max-width: 768px) {

    .query-results-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #query-results-table {
        min-width: 600px;
    }

    #query-results-table thead th,
    #query-results-table tbody td {
        padding: 9px 11px;
        font-size: 13px;
    }

}

/* ============================================================
   EXPECTED OUTPUT - HORIZONTAL SCROLL
   ============================================================ */

/* ============================================================
   EXPECTED OUTPUT - SCROLLABLE PREVIEW
   ------------------------------------------------------------
   The question data may contain hundreds/thousands of rows.
   We keep the complete expected result in the DOM for reference,
   but constrain the visible area so long outputs never push the
   question card out of shape. Users can scroll vertically through
   every matching row and horizontally when many columns exist.
   ============================================================ */
.expected-output-wrapper {
    width: 100%;
    max-width: 100%;
    max-height: 240px;
    overflow-x: auto;
    overflow-y: auto;
    margin-top: 10px;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

/*
 * Keep the table wide enough to display all columns.
 * The wrapper above will provide horizontal scrolling.
 */
#expected-output {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

#expected-output th,
#expected-output td {
    padding: 11px 14px;
    border: 1px solid #d1d5db;
    text-align: left;
}

#expected-output th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #e5e7eb;
    color: #111827;
    font-weight: 700;
}

#expected-output td {
    background: #ffffff;
    color: #1f2937;
}

#expected-output tbody tr:nth-child(even) td {
    background: #f9fafb;
}

/* Mobile */
@media (max-width: 768px) {

    .expected-output-wrapper {
        max-width: 100%;
        max-height: 220px;
        overflow-x: auto;
        overflow-y: auto;
    }

    #expected-output {
        min-width: max-content;
    }

    #expected-output th,
    #expected-output td {
        padding: 9px 12px;
        font-size: 13px;
    }

}

/* ============================================================
 * YOUR LEVEL CARD
 * ============================================================
 * Compact status-only card requested for the top of the Challenge page.
 * Detailed milestone messages are intentionally kept out of this card.
 * ============================================================ */

.challenge-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 25px;
}

.challenge-heading {
    flex: 1;
    min-width: 0;
}

.challenge-heading .subtitle {
    margin-bottom: 0;
}

/* ============================================================
 * YOUR LEVEL CARD
 * ------------------------------------------------------------
 * Compact status-only card for the top-right of the Challenge page.
 * All three levels are visible; milestone messages stay in the popup.
 * ============================================================ */
.your-level-card {
    width: 330px;
    flex-shrink: 0;
    padding: 16px 18px;
    border: 2px solid #f59e0b;
    border-radius: 16px;
    background: linear-gradient(145deg, #172033, #111827);
    box-shadow: 0 10px 28px rgba(245, 158, 11, 0.16);
}

.your-level-header {
    margin-bottom: 8px;
    color: #fbbf24;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.your-level-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 38px;
    padding: 8px 2px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
}

.level-status-label {
    color: #cbd5e1;
    font-weight: 700;
}

.your-level-row strong {
    color: #ffffff;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-align: right;
}

.level-status-beginner strong {
    color: #86efac;
}

.level-status-intermediate strong {
    color: #facc15;
}

.level-status-expert strong {
    color: #f87171;
}

/* ============================================================
 * LEVEL-UP CELEBRATION POPUP
 * ============================================================
 * Appears only when a new Intermediate star or Expert rank is earned.
 * ============================================================ */

.level-celebration-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 6, 23, 0.78);
    z-index: 12000;
}

.level-celebration-popup {
    position: relative;
    width: min(460px, 92vw);
    padding: 34px 28px 28px;
    overflow: hidden;
    text-align: center;
    border: 2px solid #f59e0b;
    border-radius: 20px;
    background: #1e293b;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.level-celebration-pop {
    animation: levelCelebrationPop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

.level-celebration-badge {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    margin-bottom: 12px;
    font-size: 3.4rem;
    animation: levelBadgeBounce 0.9s ease-in-out infinite alternate;
}

.level-celebration-popup h2 {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    color: #fbbf24;
    font-size: 1.65rem;
}

.level-celebration-popup p {
    position: relative;
    z-index: 2;
    margin: 0 auto 22px;
    max-width: 360px;
    color: #f8fafc;
    font-size: 1.05rem;
    line-height: 1.55;
}

.level-celebration-close {
    position: relative;
    z-index: 2;
    padding: 11px 22px;
    border: none;
    border-radius: 9px;
    background: #2563eb;
    color: #ffffff;
    cursor: pointer;
    font-weight: 700;
}

.level-celebration-close:hover {
    background: #1d4ed8;
}

.celebration-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.celebration-particles span {
    position: absolute;
    font-size: 1.25rem;
    animation: celebrationFloat 1.8s ease-in-out infinite;
}

.celebration-particles span:nth-child(1) { top: 12%; left: 12%; animation-delay: 0s; }
.celebration-particles span:nth-child(2) { top: 18%; right: 13%; animation-delay: 0.25s; }
.celebration-particles span:nth-child(3) { top: 52%; left: 7%; animation-delay: 0.45s; }
.celebration-particles span:nth-child(4) { top: 58%; right: 8%; animation-delay: 0.7s; }
.celebration-particles span:nth-child(5) { bottom: 13%; left: 20%; animation-delay: 0.9s; }
.celebration-particles span:nth-child(6) { bottom: 12%; right: 19%; animation-delay: 1.1s; }

@keyframes levelCelebrationPop {
    0% {
        transform: scale(0.72) translateY(20px);
        opacity: 0;
    }
    70% {
        transform: scale(1.03) translateY(-2px);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes levelBadgeBounce {
    from {
        transform: translateY(0) rotate(-4deg);
    }
    to {
        transform: translateY(-8px) rotate(4deg);
    }
}

@keyframes celebrationFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.65;
    }
    50% {
        transform: translateY(-12px) scale(1.18);
        opacity: 1;
    }
}

@media (max-width: 800px) {

    .challenge-header-row {
        flex-direction: column;
        gap: 18px;
    }

    .your-level-card {
        width: 100%;
        box-sizing: border-box;
    }

    .question-popup-card {
        flex-direction: column;
        align-items: stretch;
    }

    .question-popup-actions {
        width: 100%;
        justify-content: flex-end;
    }

}


/* ============================================================
   PLATFORM BRAND — same identity as Home and Tutorial.
   Existing challenge UI styles remain untouched.
   ============================================================ */
.challenge-platform-header{width:100%;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 5vw;box-sizing:border-box;background:rgba(7,17,31,.94);border-bottom:1px solid rgba(120,170,230,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);position:sticky;top:0;z-index:1000}
.challenge-platform-brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;color:#edf5ff;text-decoration:none;border-radius:14px;transition:transform .2s ease,opacity .2s ease}
.challenge-platform-brand:hover{transform:translateY(-1px);opacity:.96}
.challenge-platform-brand:focus-visible{outline:2px solid #55c2ff;outline-offset:4px}
.challenge-platform-brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#35a7ff,#7773ff);color:#04101e;font-size:13px;font-weight:900;line-height:1;box-shadow:0 8px 22px rgba(53,167,255,.18)}
.challenge-platform-brand-text{display:block;line-height:1.1}
.challenge-platform-brand-text strong{display:block;color:#edf5ff;font-size:16px;font-weight:800;letter-spacing:-.01em}
.challenge-platform-brand-text small{display:block;margin-top:4px;color:#9eb1c8;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.challenge-platform-header nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:20px}
.challenge-platform-header nav a{color:#9eb1c8;text-decoration:none;font-size:14px;font-weight:500;transition:color .2s ease,transform .2s ease}
.challenge-platform-header nav a:hover{color:#fff;transform:translateY(-1px)}
.challenge-platform-header nav a[aria-current=page]{color:#fff;font-weight:700}
.challenge-platform-header nav a:focus-visible{outline:2px solid #55c2ff;outline-offset:4px;border-radius:4px}
@media(max-width:760px){.challenge-platform-header{min-height:auto;padding:12px 4vw;align-items:flex-start;flex-wrap:wrap;gap:10px 18px}.challenge-platform-brand-mark{width:40px;height:40px}.challenge-platform-brand-text strong{font-size:15px}.challenge-platform-header nav{width:100%;justify-content:flex-start;gap:8px 16px}.challenge-platform-header nav a{font-size:13px}}
@media(max-width:480px){.challenge-platform-header nav{gap:7px 13px}.challenge-platform-header nav a{font-size:12px}}
@media(prefers-reduced-motion:reduce){.challenge-platform-brand,.challenge-platform-header nav a{transition:none}}

/* ============================================================
   GLOBAL FOOTER
   ------------------------------------------------------------
   Desktop footer remains compact and consistent with the platform
   identity. Mobile rules below stack it for narrow screens.
   ============================================================ */
.challenge-site-footer {
    width: 100%;
    box-sizing: border-box;
    margin-top: 40px;
    padding: 32px 5vw 28px;
    background: #07111f;
    border-top: 1px solid rgba(120, 170, 230, 0.18);
}

.challenge-footer-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: start;
    gap: 36px;
}

.challenge-footer-brand a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #edf5ff;
    text-decoration: none;
}

.challenge-footer-brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #35a7ff, #7773ff);
    color: #04101e;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(53, 167, 255, 0.18);
}

.challenge-footer-brand strong {
    display: block;
    color: #edf5ff;
    font-size: 16px;
    line-height: 1.2;
}

.challenge-footer-brand small {
    display: block;
    margin-top: 5px;
    color: #9eb1c8;
    font-size: 12px;
    line-height: 1.45;
}

.challenge-footer-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 22px;
    text-align: center;
}

.challenge-footer-links a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
    transition: color .2s ease, transform .2s ease;
}

.challenge-footer-links a:hover,
.challenge-footer-links a[aria-current="page"] {
    color: #ffffff;
    transform: translateX(2px);
}

.challenge-footer-copy {
    color: #9eb1c8;
    font-size: 13px;
    line-height: 1.6;
}

.challenge-footer-copy p {
    margin: 0 0 8px;
}

/* ============================================================
   MOBILE-ONLY RESPONSIVE EXPERIENCE
   ------------------------------------------------------------
   IMPORTANT: Everything above this section is the desktop design.
   These rules intentionally apply only below 768px so the desktop
   layout, spacing, cards and editor remain unchanged.
   ============================================================ */

.challenge-mobile-menu-button {
    display: none;
}

@media (max-width: 768px) {

    /* ----------------------------------------------------------
       MOBILE HEADER
       ----------------------------------------------------------
       The hamburger stays on the LEFT. The platform logo uses the
       exact same mark, typography and colours as the desktop brand.
       The logo is positioned beside the menu instead of being
       centered independently.
       ---------------------------------------------------------- */

    .challenge-platform-header {
        position: sticky;
        top: 0;
        z-index: 2000;
        width: 100%;
        min-height: 64px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 10px 14px;
        gap: 12px;
        box-sizing: border-box;
        background: rgba(7, 17, 31, 0.94);
        border-bottom: 1px solid rgba(120, 170, 230, 0.18);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .challenge-mobile-menu-button {
        display: grid !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        place-items: center;
        padding: 0;
        margin: 0;
        border: 1px solid rgba(120, 170, 230, 0.22);
        border-radius: 10px;
        background: rgba(14, 28, 48, 0.86);
        color: #ffffff;
        font-size: 23px;
        line-height: 1;
        cursor: pointer;
        z-index: 3;
        -webkit-tap-highlight-color: transparent;
    }

    .challenge-mobile-menu-button:focus-visible {
        outline: 2px solid #55c2ff;
        outline-offset: 3px;
    }

    .challenge-mobile-menu-button[aria-expanded="true"] {
        background: rgba(53, 167, 255, 0.16);
    }

    /* Desktop brand dimensions/colours are intentionally retained. */
    .challenge-platform-brand {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        flex: 0 1 auto;
        margin: 0 !important;
        max-width: none;
        color: #edf5ff;
        text-decoration: none;
    }

    .challenge-platform-brand-mark {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px;
        border-radius: 12px;
        background: linear-gradient(135deg, #35a7ff, #7773ff) !important;
        color: #04101e !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1;
        box-shadow: 0 8px 22px rgba(53, 167, 255, 0.18);
    }

    .challenge-platform-brand-text strong {
        display: block;
        color: #edf5ff !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        letter-spacing: -0.01em;
    }

    .challenge-platform-brand-text small {
        display: block;
        margin-top: 4px;
        color: #9eb1c8 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .challenge-platform-header nav {
        display: none !important;
        position: absolute;
        top: calc(100% + 8px);
        left: 12px;
        right: 12px;
        width: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 10px;
        border: 1px solid rgba(120, 170, 230, 0.20);
        border-radius: 14px;
        background: rgba(7, 17, 31, 0.98);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.40);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .challenge-platform-header nav.mobile-open {
        display: flex !important;
    }

    .challenge-platform-header nav a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 13px;
        border-radius: 9px;
        color: #cbd5e1;
        text-decoration: none;
        font-size: 15px;
        line-height: 1.2;
    }

    .challenge-platform-header nav a:hover,
    .challenge-platform-header nav a[aria-current="page"] {
        background: rgba(53, 167, 255, 0.10);
        color: #ffffff;
    }

    /* ----------------------------------------------------------
       MOBILE PAGE FLOW
       ---------------------------------------------------------- */

    .challenge-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 24px 14px 40px;
        overflow-x: hidden;
    }

    .challenge-header-row {
        width: 100%;
        box-sizing: border-box;
        display: block;
        margin-bottom: 18px;
    }

    .challenge-heading {
        width: 100%;
        box-sizing: border-box;
    }

    .challenge-heading h1 {
        font-size: clamp(1.7rem, 7vw, 2.2rem);
        line-height: 1.15;
    }

    .challenge-heading .subtitle {
        font-size: 0.98rem;
        line-height: 1.5;
    }

    .your-level-card {
        width: 100%;
        box-sizing: border-box;
        margin-top: 16px;
    }

    .score-board {
        width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 18px;
    }

    .score-board p {
        margin: 0;
        min-width: 0;
    }

    /* ----------------------------------------------------------
       EQUAL MOBILE DIFFICULTY CARDS
       ---------------------------------------------------------- */

    .difficulty-cards {
        width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 20px;
    }

    .challenge-card {
        width: 100%;
        min-height: 190px;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .challenge-card p {
        flex: 1;
    }

    .challenge-card button {
        align-self: flex-start;
    }

    /* ----------------------------------------------------------
       QUESTION FIRST, SQL EDITOR SECOND
       ---------------------------------------------------------- */

    .challenge-layout {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-top: 20px;
    }

    .sample-question,
    .editor-panel {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .sample-question {
        margin-top: 0;
        padding: 18px;
    }

    .sample-question h2 {
        font-size: 1.6rem;
        line-height: 1.2;
    }

    .sample-question p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .view-schema-btn {
        width: 100%;
        min-height: 48px;
    }

    .question-buttons {
        width: 100%;
    }

    .question-buttons button {
        min-height: 46px;
    }

    /* ----------------------------------------------------------
       EXPECTED OUTPUT — USE THE FULL AVAILABLE WIDTH
       ----------------------------------------------------------
       This fixes the large empty area beside two-column results.
       The table fills the available card width. If a future question
       returns many columns, the wrapper still scrolls horizontally.
       ---------------------------------------------------------- */

    .expected-output-wrapper {
        width: 100%;
        max-width: 100%;
        max-height: 240px;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    #expected-output {
        width: 100% !important;
        min-width: 100% !important;
        border-collapse: collapse;
        table-layout: auto;
        white-space: nowrap;
    }

    #expected-output th,
    #expected-output td {
        padding: 9px 12px;
        font-size: 13px;
    }

    #expected-output th {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    /* ----------------------------------------------------------
       MOBILE SQL EDITOR
       ---------------------------------------------------------- */

    .editor-panel {
        margin-top: 0;
        padding: 18px;
        border-radius: 12px;
        box-sizing: border-box;
    }

    .editor-panel h3 {
        font-size: 1.25rem;
        line-height: 1.35;
    }

    .editor-panel textarea {
        width: 100%;
        min-height: 300px;
        max-height: 55vh;
        box-sizing: border-box;
        padding: 14px;
        font-size: 16px;
        line-height: 1.5;
    }

    #run-query-btn {
        width: 100%;
        min-height: 48px;
    }

    .query-results-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .query-results-table-wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    body {
        overflow-x: hidden;
    }
}

@media (max-width: 420px) {

    .challenge-platform-header {
        min-height: 60px;
        padding: 9px 10px;
        gap: 10px;
    }

    .challenge-mobile-menu-button {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .challenge-platform-brand-mark {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px;
    }

    .challenge-platform-brand-text strong {
        font-size: 15px !important;
    }

    .challenge-platform-brand-text small {
        font-size: 10px !important;
    }

    .challenge-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sample-question,
    .editor-panel {
        padding: 15px;
    }

    .editor-panel textarea {
        min-height: 280px;
    }

    .challenge-card {
        min-height: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .challenge-mobile-menu-button,
    .challenge-platform-brand,
    .challenge-platform-header nav,
    .challenge-platform-header nav a {
        transition: none !important;
    }
}

/* ============================================================
   FINAL MOBILE HEADER POSITIONING
   ------------------------------------------------------------
   The menu button is anchored to the LEFT edge of the header.
   The brand begins beside it, never in the visual center.
   These rules intentionally apply only to mobile widths.
   ============================================================ */
@media (max-width: 768px) {
    .challenge-platform-header {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 0 !important;
        left: 0 !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 10px !important;
    }

    .challenge-mobile-menu-button {
        position: absolute !important;
        left: 12px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
    }

    .challenge-platform-brand {
        margin-left: 52px !important;
        margin-right: 0 !important;
        flex: 0 1 auto !important;
        min-width: 0;
    }

    .challenge-platform-header nav {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
    }

    .challenge-site-footer {
        margin-top: 32px;
        padding: 28px 18px 24px;
    }

    .challenge-footer-inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .challenge-footer-links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px 18px;
        text-align: center;
    }

    .challenge-footer-copy {
        padding-top: 4px;
    }
}

@media (max-width: 420px) {
    .challenge-mobile-menu-button {
        left: 10px !important;
    }

    .challenge-platform-brand {
        margin-left: 50px !important;
    }

    .challenge-footer-links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 9px 16px;
        text-align: center;
    }
}


/* ============================================================
 * FINAL MOBILE HEADER POSITION FIX
 * ------------------------------------------------------------
 * Mobile only:
 * - Keep hamburger at the far left.
 * - Put the platform logo immediately beside it.
 * - Explicitly reset any desktop absolute/center positioning that
 *   could otherwise make the brand appear in the middle.
 * Desktop layout is intentionally untouched.
 * ============================================================ */
@media (max-width: 768px) {
    .challenge-platform-header {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
    }

    .challenge-mobile-menu-button {
        position: absolute !important;
        left: 12px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .challenge-platform-brand {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin-left: 52px !important;
        margin-right: 0 !important;
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }
}

@media (max-width: 420px) {
    .challenge-mobile-menu-button {
        left: 10px !important; 
    }

    .challenge-platform-brand {
        margin-left: 50px !important;
    }
}


/* ============================================================
 * MOBILE HEADER — FINAL LEFT-ALIGNED BRAND FIX
 * ------------------------------------------------------------
 * Mobile only. Grid explicitly places:
 *   column 1 = hamburger
 *   column 2 = platform logo
 *   next row  = navigation menu
 *
 * Desktop styling is not modified by these rules.
 * ============================================================ */
@media (max-width: 768px) {
    .challenge-platform-header {
        display: grid !important;
        grid-template-columns: 42px minmax(0, max-content) 1fr !important;
        align-items: center !important;
        justify-content: start !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
    }

    .challenge-mobile-menu-button {
        position: static !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        transform: none !important;
        justify-self: start !important;
        align-self: center !important;
    }

    .challenge-platform-brand {
        position: static !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        justify-self: start !important;
        align-self: center !important;
        transform: none !important;
    }

    .challenge-platform-header nav {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (max-width: 420px) {
    .challenge-platform-header {
        grid-template-columns: 40px minmax(0, max-content) 1fr !important;
        gap: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .challenge-mobile-menu-button {
        width: 40px !important;
        height: 40px !important;
    }

    .challenge-platform-brand {
        max-width: calc(100vw - 70px) !important;
    }
}


/* ============================================================
   FINAL QUERY RESULTS OVERRIDES
   ------------------------------------------------------------
   Must remain last so legacy responsive rules cannot disable the
   vertical scrollbar introduced for the complete result set.
   ============================================================ */
.query-results-table-wrapper {
    max-height: 280px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

@media (max-width: 768px) {
    .query-results-table-wrapper {
        max-height: 240px !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }
}

.query-results-maximized .query-results-table-wrapper {
    max-height: 70vh !important;
}



/* ============================================================
   CHALLENGE SQL EDITOR — PLAYGROUND VISUAL MATCH
   ------------------------------------------------------------
   Visual-only change.
   This matches the existing Playground editor styling while
   preserving the Challenge HTML structure, IDs, query execution,
   validation, result rendering, question navigation, hints,
   solutions, schema popup and all other Challenge behavior.

   IMPORTANT:
   - Do NOT rename #sql-editor or #run-query-btn.
   - Do NOT modify query-results selectors.
   - Do NOT modify Challenge layout/question logic.
   ============================================================ */

/* ------------------------------
   Editor card
   ------------------------------ */
.editor-panel {
    box-sizing: border-box;
    background: #1e293b;
    border-radius: 12px;
    padding: 18px;
}

/* ------------------------------
   Editor heading — Playground match
   ------------------------------ */
.editor-panel h3 {
    margin: 0 0 14px;
    color: #f8fafc;
    font-size: 1.15rem;
    line-height: 1.35;
}

/* ------------------------------
   SQL textarea — Playground match
   ------------------------------ */
.editor-panel textarea {
    width: 100%;
    height: 500px;
    min-height: 500px;
    max-height: none;
    box-sizing: border-box;

    padding: 15px;

    border: 1px solid #334155;
    outline: none;
    border-radius: 10px;

    background: #0f172a;
    color: #ffffff;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 16px;
    line-height: 1.5;

    resize: none;
    overflow: auto;
}

.editor-panel textarea:focus {
    border-color: #334155;
    outline: none;
}

/* ------------------------------
   Run Query — Playground match
   ------------------------------ */
#run-query-btn {
    width: auto;
    min-width: 140px;
    min-height: 48px;
    height: 48px;

    margin-top: 16px;
    padding: 10px 18px;
    box-sizing: border-box;

    border: 1px solid #2563eb;
    border-radius: 8px;

    background: #2563eb;
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .12s ease,
        border-color .12s ease;
}

#run-query-btn:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

#run-query-btn:active {
    background: #1e40af;
}

#run-query-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ------------------------------------------------------------
   Mobile — same editor proportions as Playground.
   Existing Challenge question/result layout remains untouched.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
    .editor-panel {
        padding: 18px;
        border-radius: 12px;
    }

    .editor-panel h3 {
        margin: 0 0 14px;
        font-size: 1.25rem;
        line-height: 1.35;
    }

    .editor-panel textarea {
        width: 100%;
        height: 360px;
        min-height: 300px;
        max-height: none;

        padding: 14px;

        border: 1px solid #334155;
        border-radius: 10px;

        font-size: 16px;
        line-height: 1.5;
    }

    #run-query-btn {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        height: 48px;

        margin-top: 16px;

        font-size: 16px;
    }
}

/* ------------------------------------------------------------
   Small phones — same Playground 340px editor height.
   ------------------------------------------------------------ */
@media (max-width: 420px) {
    .editor-panel {
        padding: 15px;
    }

    .editor-panel textarea {
        height: 340px;
        min-height: 280px;
    }
}



/* ============================================================
   FINAL DESKTOP PLAYGROUND EDITOR MATCH
   ------------------------------------------------------------
   Desktop-only visual refinement.
   The mobile editor is already locked and is intentionally
   left untouched.

   This matches the Playground editor's desktop styling:
   - editor card
   - heading
   - SQL editor surface
   - SQL typography
   - Run Query button
   - spacing

   IMPORTANT:
   Existing Challenge HTML, JavaScript, query execution,
   result validation, result rendering, question navigation,
   hints, solutions and schema functionality are untouched.
   ============================================================ */

@media (min-width: 761px) {

    /* Match Playground's editor card appearance. */
    .editor-panel {
        box-sizing: border-box;
        background: #1e293b;
        border-radius: 12px;
        padding: 18px;
    }

    /* Match Playground desktop heading exactly. */
    .editor-panel h3 {
        margin: 0 0 14px;
        color: #f8fafc;
        font-size: 1.15rem;
        line-height: 1.35;
    }

    /*
     * The original Challenge HTML contains <br><br> before the
     * Run Query button. Playground uses a 16px action gap instead.
     * Hide only those presentational line breaks on desktop.
     */
    .editor-panel > br {
        display: none;
    }

    /* Match Playground desktop SQL editor surface. */
    .editor-panel textarea {
        width: 100%;
        height: 500px;
        min-height: 500px;
        max-height: none;
        box-sizing: border-box;

        display: block;
        margin: 0;

        padding: 15px;

        border: 1px solid #334155;
        outline: none;
        border-radius: 10px;

        background: #0f172a;
        color: #ffffff;

        font-family:
            "SFMono-Regular",
            Consolas,
            "Liberation Mono",
            Menlo,
            monospace;

        font-size: 16px;
        line-height: 1.5;

        resize: none;
        overflow: auto;
    }

    .editor-panel textarea:focus {
        border-color: #334155;
        outline: none;
    }

    /* Match Playground desktop Run Query button. */
    #run-query-btn {
        width: auto;
        min-width: 140px;
        min-height: 48px;
        height: 48px;

        margin-top: 16px;
        padding: 10px 18px;
        box-sizing: border-box;

        border: 1px solid #2563eb;
        border-radius: 8px;

        background: #2563eb;
        color: #ffffff;

        font-size: 15px;
        font-weight: 700;

        cursor: pointer;

        transition:
            background .12s ease,
            border-color .12s ease;
    }

    #run-query-btn:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

    #run-query-btn:active {
        background: #1e40af;
    }

    #run-query-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }
}



/* ============================================================
   DESKTOP-ONLY PLAYGROUND QUERY EDITOR MATCH
   ------------------------------------------------------------
   Mobile editor is LOCKED and intentionally untouched.
   This block changes only the existing Challenge editor visuals
   at min-width: 761px to match the current Playground editor.

   IMPORTANT:
   - Existing #sql-editor and #run-query-btn IDs are preserved.
   - No Challenge JavaScript, results logic, question logic,
     navigation, schema, hints or solutions are changed.
   - The existing Challenge 60% editor column width is preserved.
   ============================================================ */
@media (min-width: 761px) {

    /* Playground-style editor card */
    .editor-panel {
        box-sizing: border-box;
        background: #1e293b;
        border-radius: 12px;
        padding: 18px;
    }

    /* Playground-style editor heading */
    .editor-panel h3 {
        margin: 0 0 14px;
        color: #f8fafc;
        font-size: 1.15rem;
        line-height: 1.35;
    }

    /* Playground desktop editor surface */
    .editor-panel textarea {
        width: 100%;
        height: 500px;
        min-height: 500px;
        max-height: none;
        box-sizing: border-box;

        margin: 0;
        padding: 15px;

        border: 1px solid #334155;
        outline: none;
        border-radius: 10px;

        background: #0f172a;
        color: #ffffff;

        font-family:
            "SFMono-Regular",
            Consolas,
            "Liberation Mono",
            Menlo,
            monospace;

        font-size: 16px;
        line-height: 1.5;

        resize: none;
        overflow: auto;
    }

    .editor-panel textarea:focus {
        border-color: #334155;
        outline: none;
    }

    /* Playground desktop Run Query button */
    .editor-panel #run-query-btn {
        width: auto;
        min-width: 140px;
        min-height: 48px;
        height: 48px;

        margin-top: 16px;
        padding: 10px 18px;
        box-sizing: border-box;

        border: 1px solid #2563eb;
        border-radius: 8px;

        background: #2563eb;
        color: #ffffff;

        font-size: 15px;
        font-weight: 700;

        cursor: pointer;

        transition:
            background .12s ease,
            border-color .12s ease;
    }

    .editor-panel #run-query-btn:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

    .editor-panel #run-query-btn:active {
        background: #1e40af;
    }

    .editor-panel #run-query-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }
}



/* ============================================================
   LOCKED DESKTOP PLAYGROUND EDITOR MATCH
   ------------------------------------------------------------
   Desktop only: matches the current Playground editor card,
   textarea and Run Query button.

   MOBILE IS LOCKED AND IS NOT MODIFIED BY THIS BLOCK.

   No Challenge HTML structure, IDs, JavaScript, execution,
   validation, results, navigation, hints, solutions or schema
   functionality is changed.
   ============================================================ */

@media (min-width: 761px) {

    .editor-panel {
        box-sizing: border-box !important;
        background: #1e293b !important;
        border-radius: 12px !important;
        padding: 18px !important;
    }

    .editor-panel h3 {
        margin: 0 0 14px !important;
        color: #f8fafc !important;
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
    }

    /* The original <br><br> is only presentational spacing. */
    .editor-panel > br {
        display: none !important;
    }

    .editor-panel textarea {
        width: 100% !important;
        height: 500px !important;
        min-height: 500px !important;
        max-height: none !important;

        display: block !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 15px !important;

        border: 1px solid #334155 !important;
        outline: none !important;
        border-radius: 10px !important;

        background: #0f172a !important;
        color: #ffffff !important;

        font-family:
            "SFMono-Regular",
            Consolas,
            "Liberation Mono",
            Menlo,
            monospace !important;

        font-size: 16px !important;
        line-height: 1.5 !important;

        resize: none !important;
        overflow: auto !important;
    }

    .editor-panel textarea:focus {
        border-color: #334155 !important;
        outline: none !important;
    }

    #run-query-btn {
        width: auto !important;
        min-width: 140px !important;
        min-height: 48px !important;
        height: 48px !important;

        margin-top: 16px !important;
        padding: 10px 18px !important;
        box-sizing: border-box !important;

        border: 1px solid #2563eb !important;
        border-radius: 8px !important;

        background: #2563eb !important;
        color: #ffffff !important;

        font-size: 15px !important;
        font-weight: 700 !important;
    }

    #run-query-btn:hover {
        background: #1d4ed8 !important;
        border-color: #1d4ed8 !important;
    }

    #run-query-btn:active {
        background: #1e40af !important;
    }

    #run-query-btn:disabled {
        opacity: .55 !important;
        cursor: not-allowed !important;
    }
}

/* ============================================================
   DESKTOP-ONLY QUESTION / EDITOR TOP ALIGNMENT
   ------------------------------------------------------------
   The existing Question card intentionally has margin-top: 40px.
   Apply the exact same margin to the editor panel so both cards
   begin on the same horizontal line.

   Mobile is intentionally untouched because the mobile rules
   already reset the panel positioning. No other functionality
   or layout is changed.
   ============================================================ */
@media (min-width: 761px) {
    .challenge-layout > .editor-panel {
        margin-top: 40px !important;
    }
}


/* ============================================================
   LOCKED PLAYGROUND FOOTER MATCH
   ------------------------------------------------------------
   Footer-only override copied from the latest Playground footer.
   No Challenge logic, editor, header, results, or mobile content is changed.
   ============================================================ */
\n\n/* ============================================================
   LOCKED PLAYGROUND FOOTER MATCH
   ------------------------------------------------------------
   Footer-only override copied from the latest Playground footer.
   No Challenge logic, editor, header, results, or mobile content is changed.
   ============================================================ */
.challenge-site-footer {
    width: 100%;
    box-sizing: border-box;
    margin-top: 40px;
    padding: 32px 5vw 28px;
    background: #07111f;
    border-top: 1px solid rgba(120, 170, 230, 0.18);
    flex: 0 0 auto;
}

.challenge-footer-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: start;
    gap: 36px;
}

.challenge-footer-brand a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #edf5ff;
    text-decoration: none;
}

.challenge-footer-brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #35a7ff, #7773ff);
    color: #04101e;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(53, 167, 255, 0.18);
}

.challenge-footer-brand strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.2;
}

.challenge-footer-brand small {
    display: block;
    margin: 6px 0;
    color: #9eb1c8;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
}

.challenge-footer-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px 22px;
    text-align: center;
}

.challenge-footer-links a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
    transition: color .2s ease, transform .2s ease;
}

.challenge-footer-links a:hover,
.challenge-footer-links a[aria-current="page"] {
    color: #ffffff;
    transform: translateX(2px);
}

.challenge-footer-copy {
    color: #9eb1c8;
    font-size: 13px;
    line-height: 1.6;
}

.challenge-footer-copy p {
    margin: 0 0 8px;
}

@media (max-width: 760px) {
    .challenge-site-footer {
        margin-top: 32px;
        padding: 28px 18px 24px;
    }

    .challenge-footer-inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .challenge-footer-links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px 18px;
        text-align: center;
    }

    .challenge-footer-copy {
        padding-top: 4px;
    }
}

/* ============================================================
   PLAYGROUND-STYLE FOOTER TAGLINE — FINAL LOCK
   ============================================================ */
body > .challenge-site-footer .challenge-footer-brand small {
    display: block;
    margin: 6px 0;
    color: #9eb1c8;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
}

/* ============================================================
   MOBILE NAV — FULL-WIDTH DROPDOWN FIX
   ------------------------------------------------------------
   Earlier mobile blocks in this file leave the open nav's
   `left: 12px` in place while a later block sets `width: 100%`,
   so the dropdown stretches from a 12px-inset left edge instead
   of spanning the full header width (unlike the Tutorial page,
   which anchors its dropdown at left:0/right:0).

   This block anchors the open nav flush to both edges of the
   header, matching the Tutorial page's full-width behavior.
   Nothing else (logo, header, footer, colors) is changed.
   ============================================================ */
@media (max-width: 768px) {
    .challenge-platform-header nav.mobile-open {
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        border: none !important;
        border-top: 1px solid rgba(120, 170, 230, 0.12) !important;
        border-bottom: 1px solid rgba(120, 170, 230, 0.18) !important;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35) !important;
    }
}


/* ============================================================
   SHARE CHALLENGE
   ------------------------------------------------------------
   New feature only. Existing Challenge controls and layouts are
   intentionally untouched.
   ============================================================ */
.question-tools-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 15px;
}

.question-tools-row .view-schema-btn {
    margin: 0;
}

.share-challenge-btn {
    margin: 0;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    background: #2563eb;
    color: #ffffff;
    transition: background .2s ease, transform .2s ease;
}

.share-challenge-btn:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.share-challenge-btn:focus-visible,
.share-option-btn:focus-visible,
.close-share-challenge-btn:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

.share-challenge-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
    z-index: 10000;
}

.share-challenge-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    padding: 22px;
    background: #1e293b;
    color: #f8fafc;
    border: 1px solid #475569;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    z-index: 10001;
}

.share-challenge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.share-challenge-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
}

.close-share-challenge-btn {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: none;
    border-radius: 8px;
    background: #ef4444;
    color: #ffffff;
    cursor: pointer;
}

.share-challenge-prompt {
    margin: 0 0 10px;
    color: #f8fafc;
    font-weight: 700;
    line-height: 1.5;
}

.share-challenge-summary {
    margin: 0 0 12px;
    color: #cbd5e1;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Exact copy/share payload preview so users know what will be shared. */
.share-challenge-preview {
    margin: 0 0 18px;
    padding: 13px 14px;
    border: 1px solid #475569;
    border-radius: 10px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.share-challenge-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.share-option-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #475569;
    border-radius: 8px;
    background: #334155;
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
    transition: background .2s ease, transform .2s ease;
}

.share-option-btn:hover {
    background: #475569;
    transform: translateY(-1px);
}

/* Primary clipboard action: copies the exact social-share message plus URL. */
.share-copy-link-btn {
    border-color: #60a5fa;
    background: #1e40af;
}

.share-copy-link-btn:hover {
    background: #2563eb;
}

.share-copy-status {
    min-height: 20px;
    margin: 14px 0 0;
    color: #86efac;
    font-size: 14px;
    line-height: 1.4;
}

@media (max-width: 700px) {
    .question-tools-row {
        width: 100%;
        align-items: stretch;
    }

    .question-tools-row .view-schema-btn,
    .share-challenge-btn {
        flex: 1 1 100%;
        width: 100%;
        min-height: 44px;
        margin: 0;
    }

    .share-challenge-popup {
        width: 94vw;
        padding: 18px;
        max-height: 88vh;
    }

    .share-challenge-actions {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   DESKTOP-ONLY: GAP BETWEEN THE TWO CHALLENGE BUTTONS
   ============================================================ */
@media (min-width: 701px) {
    .question-tools-row {
        column-gap: 24px !important;
    }
}

/* ============================================================
   FINAL DESKTOP BUTTON + FOOTER MATCH
   ------------------------------------------------------------
   Desktop only. Mobile styling remains untouched.
   ============================================================ */
@media (min-width: 761px) {

    /* Make View Table Schema and Share Challenge equal in height. */
    .question-tools-row .view-schema-btn,
    .question-tools-row .share-challenge-btn {
        min-height: 44px !important;
        box-sizing: border-box !important;
    }

    /* Agreed desktop spacing between the two buttons. */
    .question-tools-row {
        column-gap: 24px !important;
    }

    /* Match the Playground desktop footer layout. */
    .challenge-site-footer .challenge-footer-inner {
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: 1.4fr 1fr 1fr !important;
        align-items: start !important;
        gap: 36px !important;
    }

    .challenge-site-footer .challenge-footer-links {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px 22px !important;
        text-align: center !important;
    }

    .challenge-site-footer .challenge-footer-copy {
        min-width: 0 !important;
        text-align: right !important;
    }

    .challenge-site-footer .challenge-footer-links a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}

/* ============================================================
   DESKTOP-ONLY: EQUAL BUTTON SIZE
   ------------------------------------------------------------
   ONLY the View Table Schema and Share Challenge buttons are
   changed here. Footer and mobile styling remain untouched.
   ============================================================ */
@media (min-width: 761px) {
    .question-tools-row .view-schema-btn,
    .question-tools-row .share-challenge-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }
}


/* ============================================================
   DESKTOP-ONLY: PLAYGROUND FOOTER MATCH — FINAL
   ------------------------------------------------------------
   IMPORTANT:
   - Footer only.
   - Desktop/laptop widths only (761px and above).
   - The existing Challenge buttons, editor, results, header,
     navigation, mobile styles and all other features are untouched.
   - These values match the locked Playground footer layout.
   ============================================================ */
@media (min-width: 761px) {

    body > .challenge-site-footer {
        flex: 0 0 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
        padding: 28px 5vw 24px !important;
        background: #07111f !important;
        border-top: 1px solid rgba(120, 170, 230, 0.18) !important;
        z-index: 5 !important;
    }

    body > .challenge-site-footer .challenge-footer-inner {
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns:
            minmax(220px, 1.15fr)
            minmax(320px, 1.7fr)
            minmax(220px, 0.95fr) !important;
        align-items: start !important;
        gap: 28px !important;
    }

    body > .challenge-site-footer .challenge-footer-links {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-content: flex-start !important;
        align-items: center !important;
        row-gap: 10px !important;
        column-gap: 20px !important;
        min-width: 0 !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    body > .challenge-site-footer .challenge-footer-links a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    body > .challenge-site-footer .challenge-footer-copy {
        min-width: 0 !important;
        text-align: right !important;
    }
}

/* Keep the Playground footer's narrower desktop layout at 761–900px. */
@media (max-width: 900px) and (min-width: 761px) {

    body > .challenge-site-footer .challenge-footer-inner {
        grid-template-columns:
            minmax(190px, 1fr)
            minmax(280px, 1.4fr)
            minmax(190px, 0.9fr) !important;
        gap: 22px !important;
    }

    body > .challenge-site-footer .challenge-footer-links {
        column-gap: 16px !important;
    }
}