/* ════════════════════════════════════════════════════════════════════════════
   UENT Dispatcher — Bank-CI: Petrol/Gold, Inter, modern und spielerisch.
   Orientiert am Look der MERKUR PRIVATBANK Online-Banking-Seite.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    /* Bank-CI */
    --mc-petrol:       #00515A;
    --mc-petrol-dark:  #003D44;
    --mc-petrol-light: #39747A;
    --mc-gold:         #C8A96E;
    --mc-gold-light:   #D4BB8A;
    --mc-gold-dark:    #B5945E;

    /* Neutrale Flächen */
    --mc-bg:           #f3f5f8;
    --mc-bg-card:      #ffffff;
    --mc-border:       #e4e7eb;
    --mc-text:         #4a5568;
    --mc-text-dark:    #1a202c;
    --mc-text-muted:   #8895a7;

    /* Status */
    --mc-success:      #10b981;
    --mc-success-bg:   #ecfdf5;
    --mc-warning:      #f59e0b;
    --mc-warning-bg:   #fffbeb;
    --mc-danger:       #ef4444;
    --mc-danger-bg:    #fef2f2;

    /* System */
    --mc-radius:       16px;
    --mc-radius-sm:    10px;
    --mc-radius-pill:  999px;
    --mc-shadow:       0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --mc-shadow-lg:    0 10px 25px rgba(0,0,0,0.07), 0 4px 10px rgba(0,0,0,0.04);
    --mc-shadow-xl:    0 20px 40px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.05);
    --mc-transition:   all .25s cubic-bezier(.4,0,.2,1);

    /* Theme-spezifische Helfer (werden im Dark Mode ueberschrieben) */
    --mc-sidebar-grad: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    --mc-card-input-bg: #ffffff;
    --mc-modal-footer-bg: #fafbfc;
    --mc-wheel-frame-grad:
        radial-gradient(circle at 50% 30%, rgba(200,169,110,.08), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    --mc-wheel-result-grad: linear-gradient(135deg, rgba(0,81,90,.06), rgba(200,169,110,.08));
    --mc-confirm-winner-grad: linear-gradient(135deg, rgba(200,169,110,.1), rgba(0,81,90,.04));
    --mc-app-user-grad: linear-gradient(135deg, rgba(0,81,90,.05), rgba(200,169,110,.05));
    --mc-toggle-track: #cbd2d9;
    --mc-canvas-empty-bg: #f3f5f8;
}

[data-theme="dark"] {
    /* Neutrale Flaechen — invertiert */
    --mc-bg:           #0f1419;
    --mc-bg-card:      #172026;
    --mc-border:       #283541;
    --mc-text:         #cbd5e1;
    --mc-text-dark:    #f1f5f9;
    --mc-text-muted:   #8a99a8;

    /* Status-Hintergruende dezenter im Dunkeln */
    --mc-success-bg:   rgba(16,185,129,.15);
    --mc-warning-bg:   rgba(245,158,11,.15);
    --mc-danger-bg:    rgba(239,68,68,.15);

    /* Schatten staerker fuer Tiefe auf dunklem Grund */
    --mc-shadow:       0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --mc-shadow-lg:    0 10px 25px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3);
    --mc-shadow-xl:    0 24px 50px rgba(0,0,0,0.55), 0 8px 16px rgba(0,0,0,0.35);

    /* Theme-Helfer fuer Komponenten mit individuellem Hintergrund */
    --mc-sidebar-grad: linear-gradient(180deg, #131a1f 0%, #0d1318 100%);
    --mc-card-input-bg: #0f1419;
    --mc-modal-footer-bg: #0d1318;
    --mc-wheel-frame-grad:
        radial-gradient(circle at 50% 30%, rgba(200,169,110,.14), transparent 60%),
        linear-gradient(180deg, #1a242b 0%, #11181d 100%);
    --mc-wheel-result-grad: linear-gradient(135deg, rgba(0,81,90,.25), rgba(200,169,110,.18));
    --mc-confirm-winner-grad: linear-gradient(135deg, rgba(200,169,110,.18), rgba(0,81,90,.12));
    --mc-app-user-grad: linear-gradient(135deg, rgba(0,81,90,.18), rgba(200,169,110,.10));
    --mc-toggle-track: #2c3a47;
    --mc-canvas-empty-bg: #1a232a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--mc-bg);
    color: var(--mc-text);
    font-size: 0.92rem;
    line-height: 1.55;
    min-height: 100vh;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--mc-text-dark);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
}

a { color: var(--mc-petrol); text-decoration: none; transition: color .2s; }
a:hover { color: var(--mc-petrol-dark); }

/* ═════════════════════════════ Layout-Shell ════════════════════════════════ */

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

.app-sidebar {
    background: var(--mc-sidebar-grad);
    border-right: 1px solid var(--mc-border);
    padding: 1.4rem 1rem;
    display: flex; flex-direction: column;
}

.app-brand {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: .25rem .25rem 1.4rem;
    border-bottom: 1px solid var(--mc-border);
    margin-bottom: 1rem;
}
.app-brand-logo {
    width: 100%; max-width: 200px; height: auto;
    margin-bottom: .8rem;
}
.app-brand-title {
    font-size: 1.05rem; font-weight: 700; color: var(--mc-petrol);
    letter-spacing: -.01em;
}
.app-brand-subtitle {
    font-size: .72rem; color: var(--mc-text-muted);
    text-transform: uppercase; letter-spacing: .12em;
    margin-top: .2rem;
}

.app-user {
    margin-top: auto;
    padding: .9rem .8rem;
    background: var(--mc-app-user-grad);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-sm);
}
.app-user-label { font-size: .68rem; color: var(--mc-text-muted); text-transform: uppercase; letter-spacing: .1em; }
.app-user-name  { font-weight: 600; color: var(--mc-text-dark); margin-top: .1rem; }
.app-user-role  { font-size: .76rem; color: var(--mc-petrol); margin-top: .1rem; }
.app-logout {
    margin-top: .6rem;
    width: 100%;
    background: transparent;
    border: 1px solid var(--mc-border);
    color: var(--mc-text);
    padding: .35rem .6rem;
    border-radius: var(--mc-radius-sm);
    font-size: .8rem;
    cursor: pointer;
    transition: var(--mc-transition);
}
.app-logout:hover { background: var(--mc-petrol); color: #fff; border-color: var(--mc-petrol); }

.app-nav { list-style: none; padding: 0; margin: 0; }
.app-nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .9rem; margin-bottom: .15rem;
    color: var(--mc-text); border-radius: var(--mc-radius-sm);
    font-weight: 500; font-size: .9rem;
    transition: var(--mc-transition);
}
.app-nav-link i { font-size: 1.05rem; color: var(--mc-text-muted); width: 20px; transition: var(--mc-transition); }
.app-nav-link:hover { background: rgba(0,81,90,.06); color: var(--mc-petrol); }
.app-nav-link:hover i { color: var(--mc-petrol); }
.app-nav-link.active {
    background: linear-gradient(135deg, rgba(0,81,90,.12), rgba(200,169,110,.08));
    color: var(--mc-petrol);
    box-shadow: inset 3px 0 0 var(--mc-gold);
}
.app-nav-link.active i { color: var(--mc-petrol); }

.app-main {
    padding: 2rem 2.5rem;
    overflow-x: hidden;
}

.app-page-header {
    display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 1rem;
    margin-bottom: 1.8rem;
}
.app-page-title {
    font-size: 1.7rem; font-weight: 700; color: var(--mc-text-dark);
}
.app-page-subtitle {
    font-size: .92rem; color: var(--mc-text-muted); margin-top: .25rem;
}

/* ═════════════════════════════ Cards ═══════════════════════════════════════ */

.mc-card {
    background: var(--mc-bg-card);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow);
    transition: var(--mc-transition);
}
.mc-card:hover { box-shadow: var(--mc-shadow-lg); }

.mc-card-header {
    padding: 1rem 1.25rem .6rem;
    display: flex; align-items: center; gap: .6rem; justify-content: space-between;
    border-bottom: 1px solid var(--mc-border);
}
.mc-card-title {
    font-size: .98rem; font-weight: 600; color: var(--mc-text-dark);
    display: flex; align-items: center; gap: .5rem;
}
.mc-card-title i { color: var(--mc-petrol); }
.mc-card-body { padding: 1rem 1.25rem 1.2rem; }

/* ═════════════════════════════ Buttons ═════════════════════════════════════ */

.btn-mc {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .68rem 1.4rem;
    border-radius: var(--mc-radius-pill);
    border: none;
    font-family: inherit; font-weight: 600; font-size: .92rem;
    cursor: pointer;
    transition: var(--mc-transition);
}
.btn-mc-primary {
    background: linear-gradient(135deg, var(--mc-petrol), var(--mc-petrol-dark));
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,81,90,.28);
}
.btn-mc-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,81,90,.35); color:#fff; }
.btn-mc-primary:active { transform: translateY(0); }
.btn-mc-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-mc-gold {
    background: linear-gradient(135deg, var(--mc-gold), var(--mc-gold-dark));
    color: #fff;
    box-shadow: 0 4px 14px rgba(200,169,110,.35);
}
.btn-mc-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(200,169,110,.45); color:#fff; }

.btn-mc-ghost {
    background: transparent;
    color: var(--mc-text);
    border: 1.5px solid var(--mc-border);
}
.btn-mc-ghost:hover { background: var(--mc-bg); border-color: var(--mc-petrol-light); color: var(--mc-petrol); }

.btn-mc-danger {
    background: var(--mc-danger-bg);
    color: var(--mc-danger);
    border: 1.5px solid #fecaca;
}
.btn-mc-danger:hover { background: var(--mc-danger); color: #fff; border-color: var(--mc-danger); }

.btn-mc-block { width: 100%; justify-content: center; }
.btn-mc-lg { padding: .9rem 2rem; font-size: 1.02rem; }

/* ═════════════════════════════ Wheel ═══════════════════════════════════════ */

.wheel-stage {
    display: grid; grid-template-columns: 1fr 360px; gap: 1.8rem; align-items: start;
}
@media (max-width: 1100px) { .wheel-stage { grid-template-columns: 1fr; } }

.wheel-frame {
    background: var(--mc-wheel-frame-grad);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-lg);
    padding: 1.6rem;
    position: relative; overflow: hidden;
}

.wheel-canvas-wrap {
    position: relative;
    width: 100%; max-width: 560px; aspect-ratio: 1;
    margin: 0 auto;
}
.wheel-canvas {
    width: 100%; height: 100%; display: block;
    filter: drop-shadow(0 12px 30px rgba(0,81,90,.18));
    /* Rotation: 15 s, starkes Ease-out → wird kontinuierlich langsamer bis Stillstand */
    transition: transform 15s cubic-bezier(.08, .85, .15, 1);
    transform-origin: 50% 50%;
}

/* Wachstums-Animation: nur beim ersten Spin aus dem Normal-View aktiv.
   Die Klasse wird per JS gesetzt und nach dem Spin (Exit Vollbild) wieder
   entfernt. In-Fullscreen-Re-Spins zeigen die Animation NICHT. */
@keyframes wheelGrow {
    0%   { transform: scale(0.42); }
    100% { transform: scale(1);    }
}
.wheel-canvas-wrap.growing {
    animation: wheelGrow 15s cubic-bezier(.18, .65, .25, 1) forwards;
    transform-origin: 50% 50%;
}
.wheel-pointer {
    position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 28px solid var(--mc-gold);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
    z-index: 5;
}
.wheel-hub {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--mc-petrol), var(--mc-petrol-dark));
    box-shadow: 0 6px 18px rgba(0,81,90,.4), inset 0 2px 0 rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: var(--mc-gold); font-size: 1.3rem;
    z-index: 4;
}

.wheel-actions {
    display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap;
    margin-top: 1.4rem;
}

.wheel-result {
    margin-top: 1.4rem;
    padding: 1.2rem 1.4rem;
    background: var(--mc-wheel-result-grad);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    display: flex; align-items: center; gap: 1rem;
    animation: resultIn .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes resultIn {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.wheel-result-icon {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mc-gold), var(--mc-gold-dark));
    color: #fff; font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(200,169,110,.4);
}
.wheel-result-label { font-size: .76rem; color: var(--mc-text-muted); text-transform: uppercase; letter-spacing: .1em; }
.wheel-result-name  { font-size: 1.45rem; font-weight: 700; color: var(--mc-text-dark); }
.wheel-result-hint  { font-size: .82rem; color: var(--mc-text-muted); margin-top: .2rem; }

.wheel-error {
    margin-top: 1rem;
    padding: .85rem 1.1rem;
    background: var(--mc-danger-bg);
    color: var(--mc-danger);
    border: 1px solid #fecaca;
    border-radius: var(--mc-radius-sm);
    font-size: .88rem;
}

/* ═════════════════════════════ Toggle Switch ═══════════════════════════════ */

.toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1rem;
    background: var(--mc-bg);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-sm);
    margin-top: 1rem;
}
.toggle-row.active {
    background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(200,169,110,.06));
    border-color: rgba(245,158,11,.25);
}
.toggle-text-main { font-weight: 600; color: var(--mc-text-dark); font-size: .9rem; }
.toggle-text-hint { font-size: .76rem; color: var(--mc-text-muted); margin-top: .15rem; }

.toggle-switch {
    width: 48px; height: 26px;
    background: var(--mc-toggle-track);
    border-radius: 13px;
    position: relative; cursor: pointer;
    transition: background .25s;
    flex-shrink: 0;
    border: none; padding: 0;
}
.toggle-switch::after {
    content: ''; position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    transition: left .25s;
}
.toggle-switch.on { background: linear-gradient(135deg, var(--mc-gold), var(--mc-gold-dark)); }
.toggle-switch.on::after { left: 25px; }

/* ═════════════════════════════ Status Lists ════════════════════════════════ */

.status-card-section {
    padding: .55rem .7rem;
    border-radius: var(--mc-radius-sm);
    margin-bottom: .6rem;
    background: var(--mc-bg);
}
.status-card-section.green {
    background: linear-gradient(135deg, rgba(16,185,129,.06), rgba(16,185,129,.02));
    border-left: 3px solid var(--mc-success);
}
.status-card-section.amber {
    background: linear-gradient(135deg, rgba(245,158,11,.06), rgba(245,158,11,.02));
    border-left: 3px solid var(--mc-warning);
}
.status-card-section-label {
    font-size: .68rem; color: var(--mc-text-muted);
    text-transform: uppercase; letter-spacing: .1em;
    font-weight: 600; margin-bottom: .35rem;
}
.status-card-section-count {
    font-size: 1.4rem; font-weight: 700; color: var(--mc-text-dark);
    line-height: 1;
}

.person-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .25rem;
    border-bottom: 1px dashed transparent;
    font-size: .88rem;
}
.person-row + .person-row { border-top: 1px dashed var(--mc-border); }
.person-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--mc-petrol), var(--mc-petrol-light));
    color: #fff; font-weight: 600; font-size: .78rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.person-avatar.locked {
    background: linear-gradient(135deg, var(--mc-warning), #d97706);
}
.person-name { font-weight: 500; color: var(--mc-text-dark); }
.person-meta { font-size: .74rem; color: var(--mc-text-muted); margin-top: .1rem; }
.person-row .meta-right { margin-left: auto; }
.badge-locked {
    font-size: .68rem; font-weight: 600; padding: .15rem .55rem;
    background: var(--mc-warning-bg); color: var(--mc-warning);
    border-radius: var(--mc-radius-pill);
    border: 1px solid rgba(245,158,11,.25);
}
.badge-free {
    font-size: .68rem; font-weight: 600; padding: .15rem .55rem;
    background: var(--mc-success-bg); color: var(--mc-success);
    border-radius: var(--mc-radius-pill);
    border: 1px solid rgba(16,185,129,.25);
}

/* ═════════════════════════════ Modals ══════════════════════════════════════ */

.modal-overlay {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center; justify-content: center;
    padding: 1rem;
}
.modal-overlay.open { display: flex; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
    background: var(--mc-bg-card);
    border-radius: 22px;
    box-shadow: var(--mc-shadow-xl);
    max-width: 480px; width: 100%;
    overflow: hidden;
    animation: modalIn .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(-12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.modal-head {
    padding: 1.4rem 1.6rem;
    background: linear-gradient(135deg, var(--mc-petrol), var(--mc-petrol-dark));
    color: #fff;
    display: flex; align-items: center; gap: .9rem;
}
.modal-head.danger {
    background: linear-gradient(135deg, #b91c1c, #7f1d1d);
}
.modal-head.danger .icon-circle {
    background: rgba(255,255,255,.18);
    color: #fff;
}
.modal-head .icon-circle {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(200,169,110,.25);
    color: var(--mc-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.modal-title { font-size: 1.1rem; font-weight: 600; color: #fff; }
.modal-subtitle { font-size: .84rem; color: rgba(255,255,255,.75); margin-top: .15rem; }

.modal-body { padding: 1.4rem 1.6rem; }
.modal-footer {
    padding: 1rem 1.6rem 1.4rem;
    display: flex; gap: .7rem; justify-content: flex-end;
    border-top: 1px solid var(--mc-border);
    background: var(--mc-modal-footer-bg);
}

.confirm-winner {
    text-align: center;
    padding: 1.2rem;
    background: var(--mc-confirm-winner-grad);
    border-radius: var(--mc-radius);
    margin-bottom: 1rem;
}
.confirm-winner-name { font-size: 1.6rem; font-weight: 700; color: var(--mc-text-dark); }
.confirm-winner-meta { font-size: .85rem; color: var(--mc-text-muted); margin-top: .25rem; }

/* ═════════════════════════════ Log/Timeline ════════════════════════════════ */

.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
    content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--mc-gold) 0%, var(--mc-petrol-light) 100%);
    border-radius: 2px;
}
.timeline-item {
    position: relative;
    padding: .85rem 1.1rem;
    background: var(--mc-bg-card);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-sm);
    margin-bottom: .85rem;
    transition: var(--mc-transition);
}
.timeline-item:hover { border-color: var(--mc-petrol-light); transform: translateX(2px); box-shadow: var(--mc-shadow); }

.timeline-delete {
    position: absolute;
    top: .55rem; right: .65rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--mc-text-muted);
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .82rem;
    transition: var(--mc-transition);
    opacity: .55;
}
.timeline-item:hover .timeline-delete { opacity: 1; }
.timeline-delete:hover {
    background: var(--mc-danger-bg);
    border-color: rgba(239,68,68,.25);
    color: var(--mc-danger);
}
[data-theme="dark"] .timeline-delete:hover {
    background: rgba(239,68,68,.25);
    border-color: rgba(239,68,68,.45);
    color: #fca5a5;
}
.timeline-item::before {
    content: ''; position: absolute; left: -1.65rem; top: 1.05rem;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--mc-gold);
    border: 3px solid var(--mc-bg);
    box-shadow: 0 0 0 1px var(--mc-border);
}
.timeline-item.override::before { background: var(--mc-warning); }
.timeline-date { font-size: .76rem; color: var(--mc-text-muted); }
.timeline-name { font-weight: 600; color: var(--mc-text-dark); font-size: 1.02rem; margin-top: .15rem; }
.timeline-meta { font-size: .8rem; color: var(--mc-text-muted); margin-top: .25rem; }
.timeline-tags { margin-top: .35rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.timeline-tag {
    font-size: .68rem; font-weight: 600; padding: .15rem .55rem;
    background: var(--mc-bg);
    color: var(--mc-text);
    border-radius: var(--mc-radius-pill);
    border: 1px solid var(--mc-border);
}
.timeline-tag.warning { background: var(--mc-warning-bg); color: var(--mc-warning); border-color: rgba(245,158,11,.25); }
.timeline-tag.gold    { background: rgba(200,169,110,.12); color: var(--mc-gold-dark); border-color: rgba(200,169,110,.3); }

.empty-state {
    padding: 2.4rem 1rem;
    text-align: center;
    color: var(--mc-text-muted);
}
.empty-state i { font-size: 2rem; opacity: .55; }

/* ═════════════════════════════ Forms ═══════════════════════════════════════ */

.form-row { margin-bottom: .9rem; }
.form-label {
    display: block; font-size: .82rem; font-weight: 600;
    color: var(--mc-text-dark); margin-bottom: .35rem;
}
.form-control {
    width: 100%;
    padding: .65rem .9rem;
    border-radius: var(--mc-radius-sm);
    border: 1.5px solid var(--mc-border);
    background: var(--mc-card-input-bg); color: var(--mc-text-dark);
    font-family: inherit; font-size: .92rem;
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus {
    outline: none; border-color: var(--mc-petrol);
    box-shadow: 0 0 0 3px rgba(0,81,90,.1);
}

/* ═════════════════════════════ Login ═══════════════════════════════════════ */

.login-stage {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
    background: radial-gradient(ellipse at top, #1a3a40 0%, #0e2329 60%, #0a1d22 100%);
    position: relative; overflow: hidden;
}
.login-stage::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(200,169,110,.12), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0,81,90,.18), transparent 55%);
}
.login-card {
    position: relative; z-index: 2;
    background: rgba(255,255,255,.97);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,.4);
    width: 100%; max-width: 420px;
    padding: 2.4rem 2.2rem;
}
.login-logo { text-align: center; margin-bottom: 1.4rem; }
.login-logo img { max-width: 180px; }
.login-title { text-align: center; font-size: 1.3rem; font-weight: 700; color: var(--mc-petrol); margin-bottom: .3rem; }
.login-subtitle { text-align: center; font-size: .85rem; color: var(--mc-text-muted); margin-bottom: 1.6rem; }
.login-error {
    background: var(--mc-danger-bg); color: var(--mc-danger);
    padding: .65rem .9rem; border-radius: var(--mc-radius-sm);
    border: 1px solid #fecaca; font-size: .85rem;
    margin-bottom: 1rem; display: none;
}
.login-hint {
    text-align: center; font-size: .76rem; color: var(--mc-text-muted);
    margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px dashed var(--mc-border);
}
.login-hint code {
    background: var(--mc-bg); padding: .1rem .4rem; border-radius: 4px;
    font-size: .82em; color: var(--mc-petrol);
}

/* ═════════════════════════════ Misc ════════════════════════════════════════ */

.confetti-piece {
    position: fixed; width: 8px; height: 14px; top: -20px;
    pointer-events: none; z-index: 1500;
    animation: confettiFall 1.8s linear forwards;
}
@keyframes confettiFall {
    0%   { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

.spin-throb {
    animation: throb 1.4s ease-in-out infinite;
}
@keyframes throb {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

.muted { color: var(--mc-text-muted); }
.spacer-sm { height: .8rem; }

/* ════════════════════════════ Wheel Vollbild-Modus ═══════════════════════
   Aktiviert ueber body.wheel-fs (von wheel.js gesetzt). Versteckt Sidebar,
   Status-Spalte, Toggle-Row und Page-Header — Wheel und Result fuellen
   den ganzen Viewport. requestFullscreen() laeuft zusaetzlich an. */

body.wheel-fs {
    overflow: hidden;
}
body.wheel-fs .app-shell {
    grid-template-columns: 1fr;
}
body.wheel-fs .app-sidebar,
body.wheel-fs .app-page-header,
body.wheel-fs .wheel-status-col,
body.wheel-fs #toggleRow {
    display: none !important;
}
body.wheel-fs .app-main {
    padding: 0;
    height: 100vh;
    height: 100dvh;
}
body.wheel-fs .wheel-stage {
    grid-template-columns: 1fr;
    gap: 0;
    height: 100vh;
    height: 100dvh;
}
body.wheel-fs .wheel-frame {
    border: none;
    border-radius: 0;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: clamp(1rem, 3vh, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
body.wheel-fs .wheel-canvas-wrap {
    max-width: min(75vh, 80vw, 720px);
    width: 100%;
}
body.wheel-fs .wheel-actions {
    margin-top: 0;
}
body.wheel-fs .wheel-result {
    margin-top: 0;
    max-width: 720px;
    width: 100%;
    padding: 1.6rem 2rem;
}
body.wheel-fs .wheel-result-name {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    line-height: 1.15;
}
body.wheel-fs .wheel-result-icon {
    width: 72px; height: 72px; font-size: 2rem;
}
body.wheel-fs .wheel-result-label {
    font-size: .82rem;
}
body.wheel-fs .btn-mc-lg {
    padding: 1rem 2.4rem;
    font-size: 1.1rem;
}
/* Auf kleinen Bildschirmen (Hochkant) Layout vertikaler */
@@media (max-height: 720px) {
    body.wheel-fs .wheel-canvas-wrap {
        max-width: min(55vh, 75vw, 520px);
    }
}

/* ════════════════════════════ Theme Toggle Button ════════════════════════ */

.theme-toggle {
    margin-top: .8rem;
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .45rem .6rem;
    border-radius: var(--mc-radius-sm);
    background: transparent;
    border: 1px solid var(--mc-border);
    color: var(--mc-text);
    font-family: inherit; font-size: .8rem; font-weight: 500;
    cursor: pointer;
    transition: var(--mc-transition);
}
.theme-toggle:hover {
    background: rgba(0,81,90,.07);
    color: var(--mc-petrol);
    border-color: var(--mc-petrol-light);
}
.theme-toggle .icon-sun { display: inline; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle:hover {
    background: rgba(200,169,110,.12);
    color: var(--mc-gold);
    border-color: var(--mc-gold-dark);
}
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }

/* ════════════════════════════ Dark Mode Component Overrides ══════════════ */

/* Navigation: kraeftigere Hover/Active im Dunkeln (rgba(0,81,90,.06) wirkt sonst kaum) */
[data-theme="dark"] .app-nav-link {
    color: var(--mc-text);
}
[data-theme="dark"] .app-nav-link:hover {
    background: rgba(200,169,110,.08);
    color: var(--mc-gold-light);
}
[data-theme="dark"] .app-nav-link:hover i { color: var(--mc-gold); }
[data-theme="dark"] .app-nav-link.active {
    background: linear-gradient(135deg, rgba(0,81,90,.32), rgba(200,169,110,.18));
    color: var(--mc-gold-light);
    box-shadow: inset 3px 0 0 var(--mc-gold);
}
[data-theme="dark"] .app-nav-link.active i { color: var(--mc-gold); }

/* Card-Title-Icon: Gold im Dunkeln, fuer mehr Kontrast */
[data-theme="dark"] .mc-card-title i { color: var(--mc-gold); }

/* Buttons: Ghost-Hover heller */
[data-theme="dark"] .btn-mc-ghost:hover {
    background: rgba(255,255,255,.04);
    border-color: var(--mc-gold-dark);
    color: var(--mc-gold-light);
}
[data-theme="dark"] .btn-mc-danger {
    background: rgba(239,68,68,.15);
    color: #fca5a5;
    border-color: rgba(239,68,68,.3);
}
[data-theme="dark"] .btn-mc-danger:hover {
    background: var(--mc-danger);
    color: #fff;
    border-color: var(--mc-danger);
}

/* Person-row Trennstrich heller im Dunkeln */
[data-theme="dark"] .person-row + .person-row {
    border-top-color: rgba(255,255,255,.06);
}

/* Status-card-Section: dezent dunkler Streifen */
[data-theme="dark"] .status-card-section {
    background: rgba(255,255,255,.02);
}
[data-theme="dark"] .status-card-section.green {
    background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.04));
}
[data-theme="dark"] .status-card-section.amber {
    background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.05));
}

/* Toggle-row.active im Dark Mode */
[data-theme="dark"] .toggle-row.active {
    background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(200,169,110,.10));
    border-color: rgba(245,158,11,.35);
}

/* Login-Card im Dark Mode mit dunklerem Inhalt (Login-Page hat eigenen Dark-Stil,
   aber Form-Elemente sollen Theme-aware sein) */
[data-theme="dark"] .login-card {
    background: rgba(23,32,38,.97);
    color: var(--mc-text);
}
[data-theme="dark"] .login-card .form-label { color: var(--mc-text-dark); }
[data-theme="dark"] .login-hint { color: var(--mc-text-muted); border-top-color: var(--mc-border); }
[data-theme="dark"] .login-hint code { background: rgba(200,169,110,.12); color: var(--mc-gold-light); }

/* Tabellen-Zeilen im Dark Mode */
[data-theme="dark"] .table { color: var(--mc-text); }

/* Badges im Dark Mode */
[data-theme="dark"] .badge-locked {
    background: rgba(245,158,11,.18);
    color: #fcd34d;
    border-color: rgba(245,158,11,.35);
}
[data-theme="dark"] .badge-free {
    background: rgba(16,185,129,.18);
    color: #6ee7b7;
    border-color: rgba(16,185,129,.35);
}

/* Timeline-Tags im Dark Mode */
[data-theme="dark"] .timeline-tag {
    background: rgba(255,255,255,.04);
    color: var(--mc-text);
}
[data-theme="dark"] .timeline-tag.warning {
    background: rgba(245,158,11,.18);
    color: #fcd34d;
    border-color: rgba(245,158,11,.35);
}
[data-theme="dark"] .timeline-tag.gold {
    background: rgba(200,169,110,.18);
    color: var(--mc-gold-light);
    border-color: rgba(200,169,110,.4);
}