:root {
    /* Schwarzarbeit-inspired dark theme */
    --cc-bg: #0e0e0e;
    --cc-bg-soft: #161616;
    --cc-card: #1a1a1a;
    --cc-card-2: #202020;
    --cc-black: #000000;
    --cc-white: #ffffff;
    --cc-text: #f3f3f0;
    --cc-text-soft: rgba(243,243,240,.72);
    --cc-muted: #9d9d96;
    --cc-green: #5bcb4a;
    --cc-green-dark: #46ad37;
    --cc-line: #2b2b2b;
    --cc-radius: 16px;
    --cc-shadow: 8px 8px 0 var(--cc-green);
    --cc-mono: "Space Mono", ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
}

html, body { min-height: 100%; }

.cc-body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--cc-text);
    background:
        radial-gradient(circle at top right, rgba(91,203,74,.16), transparent 36rem),
        radial-gradient(circle at 10% 110%, rgba(91,203,74,.10), transparent 32rem),
        var(--cc-bg) !important;
}

/* ---------- Top bar & footer ---------- */
.cc-topbar,
.cc-footer {
    color: var(--cc-text);
    background: rgba(14,14,14,.86) !important;
    backdrop-filter: blur(14px);
    border-bottom: 3px solid var(--cc-green);
}

.cc-topbar .nav-link { color: var(--cc-text) !important; font-family: var(--cc-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.cc-topbar .nav-link:hover { color: var(--cc-green) !important; }
.cc-icon-link { font-size: 1.25rem; }
.cc-top-badge { display: inline-flex; padding: .55rem 1rem; color: var(--cc-black); background: var(--cc-green); border: 2px solid var(--cc-black); border-radius: 999px; font-family: var(--cc-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; box-shadow: 3px 3px 0 var(--cc-black); }

/* ---------- Sidebar ---------- */
.cc-sidebar { background: var(--cc-black) !important; border-right: 3px solid var(--cc-green); }
.cc-brand-wrap { min-height: 86px; border-bottom: 1px solid rgba(255,255,255,.12) !important; }
.cc-brand { gap: .75rem; color: var(--cc-white) !important; font-size: 1.35rem; font-weight: 900; letter-spacing: -.03em; }
.cc-logo { width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 0 0 2px rgba(91,203,74,.35); }
.cc-menu .nav-header { color: var(--cc-green); font-family: var(--cc-mono); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cc-menu .nav-link { margin: .22rem 0; color: rgba(243,243,240,.82) !important; border-radius: 12px; font-weight: 600; }
.cc-menu .nav-link:hover, .cc-menu .nav-link.active { color: var(--cc-black) !important; background: var(--cc-green) !important; box-shadow: 4px 4px 0 rgba(0,0,0,.4); }
.cc-main { background: transparent; }
.cc-footer { display: flex; justify-content: space-between; gap: 1rem; border-top: 3px solid var(--cc-green); border-bottom: 0; font-weight: 600; }
.cc-footer span { color: var(--cc-text-soft); }

/* ---------- Content header ---------- */
.app-content-header { padding: 1.25rem 1.25rem .2rem; }
.app-content-header h3 { color: var(--cc-text); font-weight: 900; letter-spacing: -.03em; }
.breadcrumb { font-family: var(--cc-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.breadcrumb a { color: var(--cc-green); font-weight: 700; }
.breadcrumb-item.active { color: var(--cc-muted); }

/* ---------- Shell ---------- */
.quiz-shell { color: var(--cc-text); padding-bottom: 2rem; }
.quiz-shell .container-fluid { max-width: 1280px; }

.quiz-hero, .quiz-page-head, .quiz-game {
    position: relative;
    border: 3px solid var(--cc-black);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    overflow: hidden;
}

.quiz-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    gap: 1.5rem;
    min-height: 420px;
    padding: clamp(1.25rem, 4vw, 3rem);
    background:
        radial-gradient(circle at 88% 14%, rgba(91,203,74,.55), transparent 16rem),
        linear-gradient(135deg, #0a0a0a 0 60%, #1c1c1c 60% 100%);
    color: var(--cc-white);
}

.quiz-hero::after, .quiz-page-head::after, .quiz-game::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -36px;
    width: 170px;
    height: 170px;
    border: 20px solid rgba(91,203,74,.4);
    border-radius: 50%;
    pointer-events: none;
}

/* Solid "block behind text" headlines like the reference site */
.quiz-hero h1, .quiz-page-head h1, .quiz-game h1 {
    display: inline;
    max-width: 880px;
    margin: 0;
    font-size: clamp(2.6rem, 6vw, 6rem);
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: -.045em;
    text-transform: none;
    color: var(--cc-white);
    background: var(--cc-black);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: .08em .28em;
}
.quiz-hero h1 .accent, .quiz-page-head h1 .accent, .quiz-game h1 .accent { background: var(--cc-green); color: var(--cc-black); }

.quiz-page-head h1, .quiz-game h1 { font-size: clamp(2.1rem, 5vw, 4.4rem); }
.quiz-hero p { max-width: 690px; color: rgba(243,243,240,.82); font-weight: 500; }
.quiz-actions, .quiz-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Buttons ---------- */
.btn { border-radius: 999px; font-weight: 800; border-width: 2px; padding: .75rem 1.2rem; letter-spacing: .01em; }
.btn-danger, .btn-warning, .btn-success { color: var(--cc-black) !important; background: var(--cc-green) !important; border-color: var(--cc-black) !important; box-shadow: 4px 4px 0 var(--cc-black); }
.btn-danger:hover, .btn-warning:hover, .btn-success:hover { background: #74dd63 !important; transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--cc-black); }
.btn-outline-light { color: var(--cc-white) !important; border-color: var(--cc-white) !important; box-shadow: 4px 4px 0 var(--cc-green); }
.btn-outline-light:hover { background: var(--cc-white) !important; color: var(--cc-black) !important; }
.btn-outline-dark { color: var(--cc-text) !important; border-color: var(--cc-green) !important; box-shadow: 4px 4px 0 var(--cc-green); }
.btn-outline-dark:hover { background: var(--cc-green) !important; color: var(--cc-black) !important; }

/* ---------- Panels & cards ---------- */
.quiz-preview { align-self: stretch; display: grid; gap: 1rem; min-width: 0; z-index: 1; }
.quiz-preview-panel, .quiz-card, .quiz-table-panel, .quiz-note, .quiz-stat, .quiz-roadmap-item, .quiz-answer {
    background: var(--cc-card);
    color: var(--cc-text);
    border: 3px solid var(--cc-black);
    border-radius: 14px;
    box-shadow: 6px 6px 0 var(--cc-green);
}
.quiz-preview-panel { padding: 1.1rem; transform: rotate(1.2deg); }

.quiz-card { height: 100%; padding: 1.2rem; }
.quiz-card h5, .quiz-preview-panel strong { color: var(--cc-text); font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em; }
.quiz-card p, .quiz-muted, .quiz-section-title p { color: var(--cc-muted); font-weight: 500; }
.quiz-link-card { display: block; color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; }
.quiz-link-card:hover { color: inherit; background: var(--cc-card-2); border-color: var(--cc-green); transform: translate(-2px,-2px); box-shadow: 10px 10px 0 var(--cc-green); }

.quiz-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; margin-bottom: .9rem; color: var(--cc-black); background: var(--cc-green); border: 3px solid var(--cc-black); border-radius: 14px; font-size: 1.35rem; box-shadow: 4px 4px 0 var(--cc-black); }
.quiz-stat { padding: 1rem; color: var(--cc-black); background: var(--cc-green); box-shadow: 6px 6px 0 var(--cc-black); }
.quiz-stat strong { display: block; color: var(--cc-black); font-size: 2.15rem; line-height: .92; font-weight: 900; letter-spacing: -.05em; }
.quiz-stat span { font-family: var(--cc-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .8rem; }

/* ---------- Pills / badges ---------- */
.quiz-pill, .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .8rem; color: var(--cc-black) !important; background: var(--cc-green) !important; border: 2px solid var(--cc-black); border-radius: 999px; font-family: var(--cc-mono); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; box-shadow: 3px 3px 0 var(--cc-black); }
.quiz-page-head { display: grid; gap: 1rem; padding: clamp(1.1rem, 3vw, 2.2rem); color: var(--cc-white); background: linear-gradient(135deg, #0a0a0a, #1c1c1c); }
.quiz-page-head .quiz-pill, .quiz-game .quiz-pill { background: var(--cc-green) !important; }

/* ---------- Sections ---------- */
.quiz-section { padding: 1.8rem 0 0; }
.quiz-section-title { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.quiz-section-title h4 { color: var(--cc-text); font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; }

/* ---------- Quiz options / answers ---------- */
.quiz-option { display: flex; align-items: center; gap: .65rem; padding: .85rem .95rem; margin-top: .65rem; color: var(--cc-text); background: var(--cc-bg-soft); border: 2px solid var(--cc-line); border-radius: 12px; font-weight: 700; }
.quiz-option.is-correct { color: var(--cc-black); background: var(--cc-green); border-color: var(--cc-black); }
.quiz-code, .quiz-score { display: inline-flex; margin-top: 1rem; padding: .65rem .9rem; color: var(--cc-black); font-family: var(--cc-mono); font-weight: 700; background: var(--cc-green); border: 3px solid var(--cc-black); border-radius: 12px; box-shadow: 4px 4px 0 var(--cc-black); }
.quiz-score { font-size: 1.7rem; }
.quiz-table-panel { overflow: hidden; }
.quiz-table-panel .table { margin: 0; --bs-table-bg: var(--cc-card); --bs-table-color: var(--cc-text); --bs-table-border-color: var(--cc-line); --bs-table-hover-bg: var(--cc-card-2); --bs-table-hover-color: var(--cc-white); }
.quiz-table-panel th { color: var(--cc-green); font-family: var(--cc-mono); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .05em; }

/* ---------- Game ---------- */
.quiz-game { display: grid; gap: 1.35rem; max-width: 980px; margin: 0 auto; padding: clamp(1.2rem, 4vw, 2.4rem); background: var(--cc-card); color: var(--cc-text); }
.quiz-game h1 { color: var(--cc-white); }
.quiz-game-top, .quiz-game-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 1; }
.quiz-answer { width: 100%; min-height: 5.5rem; padding: 1.1rem; color: var(--cc-text); text-align: left; font-weight: 800; background: var(--cc-bg-soft); border-color: var(--cc-black); transition: transform .15s ease, box-shadow .15s ease; }
.quiz-answer.is-selected { color: var(--cc-black); background: var(--cc-green); }
.quiz-answer:hover { transform: translate(-2px,-2px); box-shadow: 9px 9px 0 var(--cc-green); }
.quiz-answer-choice {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .9rem 1rem;
    margin-top: .8rem;
    color: var(--cc-text);
    font-weight: 800;
    background: var(--cc-bg-soft);
    border: 3px solid var(--cc-black);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--cc-green);
    cursor: pointer;
}
.quiz-answer-choice:has(input:checked) {
    color: var(--cc-black);
    background: var(--cc-green);
}
.quiz-question-image {
    display: block;
    max-width: min(100%, 520px);
    max-height: 320px;
    margin: 1rem 0;
    object-fit: contain;
    border: 3px solid var(--cc-black);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--cc-green);
}
.quiz-list-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 3px solid var(--cc-black);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--cc-green);
}
.quiz-table-image {
    width: 4.5rem;
    height: 3rem;
    object-fit: cover;
    margin-right: .75rem;
    border: 2px solid var(--cc-black);
    border-radius: 10px;
    vertical-align: middle;
}
.learning-area-item {
    cursor: grab;
}
.learning-area-item.is-dragging {
    opacity: .55;
}
.quiz-roadmap { display: grid; gap: .9rem; }
.quiz-roadmap-item { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: 1rem; background: var(--cc-bg-soft); }
.quiz-roadmap-item i { color: var(--cc-green); font-size: 1.25rem; }

/* ---------- Forms / progress ---------- */
.form-control, .form-select { color: var(--cc-text); background: var(--cc-bg-soft); border: 2px solid var(--cc-line); border-radius: 999px; font-weight: 700; }
.form-control:focus, .form-select:focus { background: var(--cc-bg-soft); color: var(--cc-text); border-color: var(--cc-green); box-shadow: 0 0 0 .2rem rgba(91,203,74,.25); }
.form-control::placeholder { color: var(--cc-muted); }
.form-label { color: var(--cc-text-soft); font-family: var(--cc-mono); text-transform: uppercase; font-size: .78rem; letter-spacing: .05em; }
.progress { height: 1.6rem; background: #2a2a2a; border: 2px solid var(--cc-black); border-radius: 999px; }
.progress-bar { background: var(--cc-green) !important; color: var(--cc-black); font-weight: 800; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) { .quiz-hero { grid-template-columns: 1fr; } .cc-footer { flex-direction: column; } }
@media (max-width: 575.98px) { .quiz-section-title, .quiz-game-top, .quiz-game-footer { align-items: flex-start; flex-direction: column; } .quiz-hero { padding: 1rem; } .quiz-hero h1, .quiz-page-head h1 { font-size: 2.4rem; } }