@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Reset & Base */
body {
    -webkit-font-smoothing: antialiased;
    font-family: 'Inter', sans-serif; /* Modern, Clean Sans-Serif everywhere */
}

/* Custom Scrollbars (Thin & Modern) */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.dark * {
    scrollbar-color: #334155 transparent;
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.dark ::-webkit-scrollbar-thumb {
    background-color: #334155;
}

/* Inputs & Text Areas */
textarea {
    font-family: 'Inter', sans-serif; /* Konsistente Schrift */
    line-height: 1.8; /* Bessere Lesbarkeit */
}

/* Interactive Highlights */
.error-highlight {
    cursor: pointer;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    transition: all 0.2s ease;
    border-radius: 3px;
    padding: 2px 1px;
    font-weight: 500;
}

.error-highlight:hover {
    filter: brightness(0.95);
}
.dark .error-highlight:hover {
    filter: brightness(1.1);
}

/* Colors by Type - Modern Palette */
.type-spelling {
    border-bottom-color: #f87171; /* Soft Red */
    background-color: rgba(254, 226, 226, 0.5);
    color: #991b1b;
}
.dark .type-spelling {
    border-bottom-color: #ef4444;
    background-color: rgba(127, 29, 29, 0.4);
    color: #fca5a5;
}

.type-grammar {
    border-bottom-color: #fbbf24; /* Soft Amber */
    background-color: rgba(254, 243, 199, 0.5);
    color: #92400e;
}
.dark .type-grammar {
    border-bottom-color: #f59e0b;
    background-color: rgba(120, 53, 15, 0.4);
    color: #fcd34d;
}

.type-style {
    border-bottom-color: #60a5fa; /* Soft Blue */
    background-color: rgba(219, 234, 254, 0.5);
    color: #1e40af;
}
.dark .type-style {
    border-bottom-color: #3b82f6;
    background-color: rgba(30, 58, 138, 0.4);
    color: #93c5fd;
}

/* Corrected State */
.corrected-success {
    background-color: #d1fae5;
    color: #065f46;
    text-decoration: none;
    border-bottom: none;
    animation: flashGreen 0.6s ease-out;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: default;
    font-weight: 500;
}
.dark .corrected-success {
    background-color: #064e3b;
    color: #6ee7b7;
}

@keyframes flashGreen {
    0% { transform: scale(1.05); background-color: #86efac; }
    100% { transform: scale(1); background-color: #d1fae5; }
}
.dark @keyframes flashGreen {
    0% { transform: scale(1.05); background-color: #10b981; }
    100% { transform: scale(1); background-color: #064e3b; }
}

/* Tooltip Positioning Context */
#interactive-text {
    position: relative;
    white-space: pre-wrap; /* Preserve line breaks */
    font-family: 'Inter', sans-serif;
}