:root {
    color-scheme: dark;
}

::-webkit-scrollbar {
    height: 10px;
    width: 10px
}

::-webkit-scrollbar-track {
    background: rgba(24, 24, 27, .5);
    border-radius: 999px
}

::-webkit-scrollbar-thumb {
    background: rgba(113, 113, 122, .65);
    border-radius: 999px
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(161, 161, 170, .85)
}

.card {
    background: rgba(24, 24, 27, .42);
    border: 1px solid rgba(63, 63, 70, .65);
}

.card:hover {
    background: rgba(24, 24, 27, .52);
}

.glow {
    box-shadow: inset -1px -2px 5px 1px rgba(99, 102, 241, .08), 8px 8px 8px -5px rgba(99, 102, 241, .08)
}

.kbd {
    border: 1px solid rgba(63, 63, 70, .8);
    background: rgba(9, 9, 11, .75);
}

.chip {
    border: 1px solid rgba(63, 63, 70, .85);
    background: rgba(9, 9, 11, .55);
}

.chipOn {
    border-color: rgba(16, 185, 129, .35);
    background: rgba(16, 185, 129, .10);
    color: rgba(167, 243, 208, 1);
}

.chipOff {
    border-color: rgba(239, 68, 68, .35);
    background: rgba(239, 68, 68, .10);
    color: rgba(254, 202, 202, 1);
}

.chipWarn {
    border-color: rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .10);
    color: rgba(253, 230, 138, 1);
}

.focusOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(6px);
    display: none;
    z-index: 40;
}

.focusOverlay.on {
    display: block;
}

.focusCard {
    position: fixed;
    inset: 12px;
    z-index: 50;
    display: none;
}

@media (min-width: 640px) {
    .focusCard {
        inset: 24px;
    }
}

.focusCard.on {
    display: block;
}

.modalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(8px);
    display: none;
    z-index: 60;
    padding: 16px;
    align-items: center;
    justify-content: center;
}

.modalOverlay.on {
    display: flex;
}

.modalCard {
    width: min(560px, 100%);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.shake { animation: shake 0.2s ease-in-out 0s 2; border-color: #ef4444 !important; }

/* Verbessertes Styling für Select-Felder */
select.kbd {
    appearance: none; /* Entfernt das Standard-Browser-Icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(161, 161, 170, 0.8)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25em;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Die Dropdown-Liste (Optionen) lässt sich nur begrenzt stylen,
   aber wir können den Hintergrund für modernere Browser anpassen */
select option {
    background-color: #09090b; /* zinc-950 */
    color: #f4f4f5; /* zinc-100 */
    padding: 10px;
}