:root {
    --bg: #0f172a;
    --panel: #111827;
    --card: #0b1220;
    --muted: #94a3b8;
    --text: #e5e7eb;
    --accent: #22c55e;
    --accent-2: #60a5fa;
    --danger: #ef4444;
    --border: #1f2937;
    --focus: #f59e0b;
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    background: linear-gradient(180deg, #0b1020, #0f172a);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.app {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: 100vh;
}

.sidebar {
    border-right: 1px solid var(--border);
    background: rgba(17,24,39,.6);
    backdrop-filter: blur(6px);
    overflow: auto;
    z-index: 1;
}

.header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border)
}

.brand {
    font-weight: 700;
    letter-spacing: .2px
}

.counts {
    margin-left: auto;
    font-size: .85rem;
    color: var(--muted)
}

.search {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border)
}

    .search input {
        width: 100%;
        padding: .6rem .8rem;
        border-radius: .6rem;
        background: #0a1220;
        color: var(--text);
        border: 1px solid var(--border)
    }

.q-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    padding: 1rem
}

.q-btn {
    position: relative;
    border: 1px solid var(--border);
    border-radius: .6rem;
    padding: .7rem 0;
    text-align: center;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(180deg, #0b1220, #0a0f1c)
}

    .q-btn:hover {
        border-color: #2a3a55
    }

    .q-btn.active {
        outline: 2px solid var(--accent-2);
    }

    .q-btn.answered {
        background: linear-gradient(180deg, rgba(34,197,94,.15), rgba(11,18,32,1));
        border-color: rgba(34,197,94,.4)
    }

    .q-btn.flagged {
        background: linear-gradient(180deg, rgba(245,158,11,.15), rgba(11,18,32,1));
        border-color: rgba(245,158,11,.4)
    }

    .q-btn .idx {
        font-weight: 700;
        font-size: .95rem;
        color: white;
    }

    .q-btn .dot {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 8px;
        height: 8px;
        border-radius: 50%
    }

    .q-btn.answered .dot {
        background: var(--accent)
    }

    .q-btn.flagged .dot {
        background: var(--focus)
    }

    .q-btn[draggable="true"] {
        cursor: grab
    }

    .q-btn.dragging {
        opacity: .35
    }

    .q-btn.drop-target {
        outline: 2px dashed var(--accent-2)
    }

.main {
    display: flex;
    flex-direction: column;
    height: 100vh
}

.topbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--border);
    background: rgba(2,6,23,.5);
    backdrop-filter: blur(6px)
}

    .topbar .pill {
        padding: .35rem .6rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        color: var(--muted);
        font-size: .8rem
    }

.content {
    flex: 1;
    overflow: auto;
}

.question-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.25rem;
}

.question-card {
    background: linear-gradient(180deg, #0a0f1c, #0b1220);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1rem 1.2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.22)
}

.q-title {
    display: flex;
    align-items: center;
    gap: .75rem;
}

    .q-title .num {
        font-weight: 800;
        color: #93c5fd
    }

.q-text {
    font-size: 1.05rem;
    line-height: 1.55
}

.q-media {
    margin: .75rem 0;
    border: 1px solid var(--border);
    border-radius: .75rem;
    overflow: hidden;
    background: #050a16
}

    .q-media img {
        display: block;
        width: 100%;
        height: auto
    }

.options {
    display: grid;
    gap: .6rem;
    margin-top: .75rem
}

.opt {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    border: 1px solid var(--border);
    border-radius: .8rem;
    padding: .75rem;
    cursor: pointer;
    background: linear-gradient(180deg, #0a0f1c, #0c1322)
}

    .opt:hover {
        border-color: #2a3a55
    }

    .opt.selected {
        outline: 2px solid var(--accent-2);
    }

    .opt input {
        margin-top: .25rem
    }

.opt-body {
    display: grid;
    gap: .35rem
}

.opt-key {
    font-weight: 700;
    min-width: 1.4rem
}

.opt-media img {
    max-width: 240px;
    height: auto;
    display: block;
    border-radius: .5rem;
    border: 1px solid var(--border)
}

.actions {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
    justify-content: space-between;
}

.btn {
    padding: .7rem 1rem;
    border-radius: .7rem;
    border: 1px solid var(--border);
    background: #0b1220;
    color: var(--text);
    line-height: 20px;
    cursor: pointer
}

    .btn:hover {
        border-color: #2a3a55
    }

    .btn.primary {
        background: linear-gradient(180deg, #13233f, #13243f);
        border-color: #1f3b66
    }

    .btn.warn {
        border-color: #66420f;
        background: linear-gradient(180deg, #2a1e07, #1b1405)
    }

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid var(--border);
    color: var(--muted)
}

.kbd {
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    padding: .15rem .35rem;
    border-radius: .4rem;
    font-size: .8rem;
    color: #cbd5e1
}

@media (max-width: 980px) {
    .app {
        grid-template-columns: 1fr
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: 80%;
        max-width: 360px;
        transform: translateX(-100%);
        transition: transform .25s ease
    }

        .sidebar.open {
            transform: translateX(0)
        }

    .topbar .toggle {
        display: inline-flex
    }
}

.topbar .toggle {
    display: none
}

/* --- Creator & Editor Modals --- */
.creator-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50
}

    .creator-backdrop.open {
        display: flex
    }

.creator, .editor {
    width: min(980px,95vw);
    max-height: 90vh;
    overflow: auto;
    background: linear-gradient(180deg,#0a0f1c,#0b1220);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 30px 60px rgba(0,0,0,.45)
}

    .creator header, .editor header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.2rem;
        border-bottom: 1px solid var(--border)
    }

    .creator .body, .editor .body {
        padding: 1rem 1.2rem;
        display: grid;
        gap: 1rem
    }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

.field {
    display: grid;
    gap: .35rem
}

    .field label {
        font-size: .9rem;
        color: var(--muted)
    }

    .field input[type="text"], .field textarea {
        width: 100%;
        padding: .6rem .8rem;
        border-radius: .6rem;
        background: #0a1220;
        color: var(--text);
        border: 1px solid var(--border)
    }

    .field input[type="file"] {
        width: 100%;
    }

.opt-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: .6rem;
    align-items: center
}

.mini {
    font-size: .85rem;
    color: var(--muted)
}

.creator footer, .editor footer {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: 1rem 1.2rem;
    border-top: 1px solid var(--border)
}

.preview {
    border: 1px dashed var(--border);
    border-radius: .5rem;
    padding: .5rem
}

.thumb {
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: .25rem;
    display: inline-block;
    cursor: pointer
}

    .thumb img {
        max-height: 64px;
        display: block
    }

.hidden {
    display: none
}

/* Danger button for delete */
.btn.danger {
    border-color: var(--danger);
    background: linear-gradient(180deg,#3b0a0a,#220707)
}

    .btn.danger:hover {
        border-color: #b91c1c
    }

/* Seçenekleri tek satıra taşı */
.opt {
    display: flex;
    align-items: center;
}

.opt-body {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.opt-key {
    margin-right: .25rem;
}

.opt-text {
    display: inline;
}

.opt-media img {
    max-height: 64px;
}
/* Sol liste: bitiş sonrası renkler */
.q-btn.result-correct {
    background: #16a34a22;
    border-color: #16a34a;
}

.q-btn.result-wrong {
    background: #dc262622;
    border-color: #dc2626;
}

.q-btn.result-blank {
    background: #64748b22;
    border-color: #64748b;
}

/* Seçenek boyama (inceleme modu) */
.options .opt.correct {
    outline: 2px solid #16a34a;
    border-radius: .5rem;
}

.options .opt.wrong {
    outline: 2px solid #dc2626;
    border-radius: .5rem;
}

.explanation {
    margin-top: 1rem;
    padding: .75rem;
    border: 1px dashed #999;
    border-radius: .5rem;
}

.opt input[type="radio"] {
    display: none;
}

/* --- Exam Countdown Timer --- */
.timer {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem;
    border: 1px solid var(--border);
    border-radius: .8rem;
    background: rgba(2,6,23,.5)
}

    .timer .lbl {
        font-size: .75rem;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .08em
    }

    .timer .digits {
        font-family: 'Poppins';
        font-weight: 700;
        font-size: 1.05rem;
        padding: .1rem .35rem;
		width: 90px;
		text-align: left;
        border-radius: .4rem;
        background: linear-gradient(180deg,#0a0f1c,#0b1220);
        border: 1px solid #1e293b;
        box-shadow: inset 0 0 8px rgba(0,0,0,.35)
    }

    .timer.warning .digits {
        border-color: #b45309
    }

    .timer.danger .digits {
        border-color: #991b1b
    }

/* === Light Theme Overrides === */
:root.light {
    --bg: #f3f4f6;
    --panel: #ffffff;
    --card: #ffffff;
    --muted: #475569;
    --text: #0f172a;
    --accent: #16a34a;
    --accent-2: #2563eb;
    --danger: #dc2626;
    --border: #e5e7eb;
    --focus: #d97706;
}

    :root.light body {
        background: linear-gradient(180deg, #f8fafc, #eef2ff);
        color: var(--text);
    }

    :root.light .sidebar {
        background: rgba(255,255,255,.8);
    }

    :root.light .topbar {
        background: rgba(255,255,255,.75);
    }

    :root.light .search input {
        background: #ffffff;
        border: 1px solid var(--border);
        color: var(--text);
    }

    :root.light .q-btn {
        background: linear-gradient(180deg, #ffffff, #f8fafc);
        border-color: var(--border);
    }

        :root.light .q-btn:hover {
            border-color: #cbd5e1;
        }

        :root.light .q-btn.answered:not(.result-correct):not(.result-wrong):not(.result-blank) {
            background: linear-gradient(180deg, rgba(22,163,74,.08), #fff);
            border-color: rgba(22,163,74,.35);
        }

        :root.light .q-btn.flagged {
            background: linear-gradient(180deg, rgba(217,119,6,.08), #fff);
            border-color: rgba(217,119,6,.35);
        }

    :root.light .question-card {
        background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
        border-color: var(--border);
        box-shadow: 0 8px 24px rgba(0,0,0,.06);
    }

    :root.light .q-media {
        background: #fff;
        border-color: var(--border);
    }

    :root.light .opt {
        background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
        border-color: var(--border);
    }

        :root.light .opt:hover {
            border-color: #cbd5e1;
        }

    :root.light .btn {
        background: #fff;
        color: var(--text);
        border-color: var(--border);
        line-height: 20px;
    }

        :root.light .btn:hover {
            border-color: #cbd5e1;
        }

        :root.light .btn.primary {
            background: linear-gradient(180deg, #e2e8f0, #e2e8f0);
            border-color: #cbd5e1;
        }

        :root.light .btn.warn {
            background: linear-gradient(180deg, #fff7ed, #fffbeb);
            border-color: #f59e0b55;
        }

    :root.light .question-wrap .num {
        color: #2563eb;
    }

    :root.light .footer {
        color: var(--muted);
    }

    :root.light .kbd {
        border-color: var(--border);
        color: #0f172a;
    }

    :root.light .timer {
        background: #ffffff;
        border-color: var(--border);
    }

        :root.light .timer .digits {
            background: linear-gradient(180deg,#ffffff,#f8fafc);
            border-color: #cbd5e1;
            box-shadow: inset 0 0 4px rgba(0,0,0,.05)
        }

    :root.light .options .opt.correct {
        outline: 2px solid #16a34a;
    }

    :root.light .options .opt.wrong {
        outline: 2px solid #dc2626;
    }

.q-btn .idx {
    color: #ffffff;
}

:root.light .q-btn .idx {
    color: #000000;
}

:root.light .q-btn.result-correct {
    background: #16a34a22 !important;
    border-color: #16a34a !important;
}

:root.light .q-btn.result-wrong {
    background: #dc262622 !important;
    border-color: #dc2626 !important;
}

:root.light .q-btn.result-blank {
    background: #64748b22 !important;
    border-color: #64748b !important;
}

.mobile-only {
    display: none;
}

@media (max-width: 980px) {
    .mobile-only {
        display: inline-flex;
    }
}


#popupBackdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

    #popupBackdrop.hidden {
        display: none;
    }

    #popupBackdrop .popup {
        background-color: #fff;
        color: #222;
        border-radius: 14px;
        width: 420px;
        max-width: 95vw;
        padding: 30px 25px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.25);
        position: relative;
        text-align: center;
    }

        #popupBackdrop .popup img {
            max-width: 180px;
            margin-bottom: 10px;
        }

    #popupBackdrop .popup-title {
        font-family: 'Poppins', sans-serif;
        font-size: 20px;
        font-weight: 600;
        margin: 10px 0 20px 0;
        color: #333;
    }

    #popupBackdrop .step-indicator {
        display: flex;
        justify-content: space-between;
        margin-bottom: 25px;
        cursor: pointer;
    }

        #popupBackdrop .step-indicator div {
            width: 22%;
            height: 8px;
            background-color: #e0e0e0;
            border-radius: 4px;
            transition: 0.3s;
        }

        #popupBackdrop .step-indicator .active {
            background-color: #28a745;
        }

    #popupBackdrop p {
        font-size: 16px;
        margin-bottom: 25px;
        line-height: 1.5;
        text-align: left;
        transition: all .5s ease;
        opacity: 1;
    }

        #popupBackdrop p.hidden {
            opacity: 0;
            transform: translateY(20px);
        }

        #popupBackdrop p u {
            text-decoration: underline;
        }

        #popupBackdrop p .highlight {
            color: #28a745;
            font-weight: 600;
        }

    #popupBackdrop button {
        border: none;
        padding: 10px 22px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 16px;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        transition: .3s;
    }

        #popupBackdrop button:hover {
            opacity: .9;
        }

    #popupBackdrop #next-btn {
        background-color: #28a745;
        color: white;
    }

    #popupBackdrop .cancel {
        background-color: #ccc;
        color: #333;
        font-weight: 500;
    }

    #popupBackdrop .button-group {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }