:root {
	--bg:#0b0f14;
	--card:#0f1720;
	--muted:#9aa4b2;
	--accent:#daaa29;
	--success:#10b981;
	--danger:#ef4444;
	--text:#e6eef6;
}

* {
    box-sizing: border-box
}
html, body {
    height: 100%
}
body {
	margin: 0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background: linear-gradient(180deg, var(--bg), #071018);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.app {
    width: 100%;
    max-width: 880px;
}

header {
    margin-bottom: 18px;
}
h1 {
    margin: 0;
    font-weight: 600;
}
h2 {
    margin: 0;
}
.muted {
    color: var(--muted);
    margin-top: 6px;
}
.controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    align-items: end
}
.field {
    display: flex;
    flex-direction: column;
    min-width: 200px
}
label {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px
}
select {
    background: var(--card);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    box-shadow: none
}

select:focus, select:active {
    background: var(--card);
    color: var(--text);
    box-shadow:none;
    border-color:rgba(255,255,255,0.08)
}

select::-ms-expand {
    display: none
}

.field {
    position: relative
}
.field::after {
	content:"\25BE";
	position:absolute;right:14px;top:34px;color:var(--muted);pointer-events:none;font-size:12px
}

select option {
    background:var(--card);
    color:var(--text);
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial
}
select optgroup {
    color:var(--muted)
}

.actions {
    display:flex;
    gap:8px
}
button {
    background:var(--accent);
    color:white;
    border:0;
    padding:10px 14px;
    border-radius:8px;
    cursor:pointer
}
button.secondary {
    background:transparent;
    border:1px solid #223244;
    color:var(--text)
}

.quiz {
    margin-top:8px
}
.hidden {
    display:none
}
.card {
    background: var(--card);
    padding: 18px;
    border-radius: 12px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    overflow: hidden;
}
.qimg {
    width: 100%;
    max-width: 360px;
    max-height: 220px;
    border-radius: 12px;
    object-fit: contain;
    height: auto;
    margin: 0 auto;
    display: block;
}
.qtext {
    font-size: 18px;
    text-align: left;
}
.answers {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.answer {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: var(--text);
    text-transform: uppercase;
    transition: none;
    box-shadow: none;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
.answer.true {
    border-color: rgba(16, 185, 129, 0.9);
    color: var(--success);
}
.answer.false {
    border-color: rgba(239, 68, 68, 0.9);
    color: var(--danger);
}
.answer.correct {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.answer.incorrect {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.answer.disabled {
    pointer-events: none;
}
.answer.correct {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.answer.incorrect {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.card.flash-correct {
    outline: 3px solid rgba(16, 185, 129, 0.06);
}
.card.flash-incorrect {
    outline: 3px solid rgba(239, 68, 68, 0.04);
}

.feedback {
    margin-top: 8px;
    font-weight: 600;
}
.feedback.correct {
    color: var(--success);
}
.feedback.incorrect {
    color: var(--danger);
}

button {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    transition: none;
}

.progress {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}
.result {
    background: var(--card);
    padding: 18px;
    border-radius: 12px;
    margin-top: 12px;
}
.foot {
    margin-top: 16px;
    font-size: 13px;
}

@media(max-width:640px){
    .controls {
        flex-direction: column;
        align-items: stretch;
    }
    .field {
        min-width: unset;
    }
    .qimg {
        display: block;
        max-width: 100%;
        max-height: 180px;
        width: auto;
        margin: 0 auto;
        border-radius: 12px;
    }
}