/* Basis-Stile (Light Mode) */
body {
    font-family: 'Inter', sans-serif;
    background-color: #F9FAFB; /* gray-50 */
    color: #111827; /* KORRIGIERT: Viel dunkleres Grau (fast schwarz) */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Body Override */
.dark body {
    background-color: #111827; /* gray-900 */
    color: #E5E7EB; /* gray-200 */
}

h1, h2, h3 {
    font-family: 'Roboto Mono', monospace;
}

/* --- Terminal Logo --- */
.jn-logo-terminal {
    display: inline-flex;
    align-items: center;
    font-family: 'Roboto Mono', monospace;
    font-size: 2.25rem; /* 36px */
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    
    /* Light Mode Styles */
    background-color: transparent;
    color: #111827; /* KORRIGIERT: Viel dunkleres Grau */
    border: 1px solid transparent;
}

.dark .jn-logo-terminal {
    background-color: #111827; /* gray-900 */
    color: #f9fafb; /* gray-50 */
    border: 1px solid #4b5563; /* gray-600 */
}

.jn-logo-terminal .bracket {
    color: #0891B2; /* dark cyan for light mode */
}

.dark .jn-logo-terminal .bracket {
    color: #67E8F9; /* cyan-300 for dark mode */
}

.jn-logo-terminal .cursor {
    display: inline-block;
    width: 10px;
    height: 2.25rem;
    margin-left: 8px;
    animation: blinking-cursor 1.2s infinite step-end;
    background-color: #0891B2; /* dark cyan for light mode */
}

.dark .jn-logo-terminal .cursor {
    background-color: #67E8F9; /* cyan-300 for dark mode */
}

@keyframes blinking-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
/* --- ENDE: Terminal Logo --- */

/* --- Farbkorrekturen für Überschriften --- */
header h1 {
    color: #111827;
}
.dark header h1 {
    color: #F9FAFB;
}
.sub-title {
    color: #374151; /* KORRIGIERT: Dunkleres Grau */
}
.dark .sub-title {
    color: #9ca3af;
}

/* --- Textfarben für Karten & Modals --- */
.category-title, section > h2 {
    color: #111827 !important; /* gray-900 */
}
.dark .category-title, .dark section > h2 {
    color: #F9FAFB !important; /* gray-50 */
}

.glass-card h3 {
    color: #111827; /* KORRIGIERT: Viel dunkleres Grau */
}
.glass-card p {
    color: #374151; /* KORRIGIERT: Dunkleres Grau */
}
.dark .glass-card h3 {
    color: #F9FAFB; /* gray-50 */
}
.dark .glass-card p {
    color: #9ca3af; /* gray-400 */
}

#tool-modal h3, #tool-modal h4 {
    color: #111827; /* gray-900 */
}
.dark #tool-modal h3, .dark #tool-modal h4 {
    color: #F9FAFB; /* gray-50 */
}

#tool-modal label, #tool-modal #vlsm-subnet-info {
    color: #1f2937; /* KORRIGIERT: Dunkleres Grau */
}
.dark #tool-modal label, .dark #tool-modal #vlsm-subnet-info {
    color: #D1D5DB; /* gray-300 */
}

#tool-search {
    background-color: #FFFFFF;
    border-color: #D1D5DB;
}
.dark #tool-search {
    background-color: #1f2937;
    border-color: #4b5563;
    color: #F9FAFB;
}

/* --- Stile für Inputs und Textareas im Modal --- */
.bg-input-bg {
    background-color: #F9FAFB; /* gray-50 */
}
.border-input-border {
    border-color: #D1D5DB; /* gray-300 */
}
.dark .bg-input-bg {
    background-color: #1f2937; /* gray-800 */
}
.dark .border-input-border {
    border-color: #4b5563; /* gray-600 */
}

#matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(229, 231, 235, 0.5);
    border-radius: 1rem;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.dark .glass-card {
    background: rgba(17, 24, 39, 0.7);
    border: 1px solid rgba(55, 65, 81, 0.3);
}

#tools .tool-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.dark #tools .tool-card:hover {
     box-shadow: 0 10px 25px rgba(0, 239, 255, 0.1);
}

.tool-open-btn .gradient-button {
    display: inline-block;
    background: linear-gradient(45deg, #0891B2, #22D3EE); /* cyan-600 zu cyan-400 */
    box-shadow: 0 4px 15px rgba(0, 200, 220, 0.1);
    border: none;
    transition: all 0.2s ease-in-out;
}

.dark .tool-open-btn .gradient-button {
     box-shadow: 0 4px 15px rgba(0, 200, 220, 0.2);
}

.tool-open-btn:hover .gradient-button {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 200, 220, 0.25);
}

.dark .tool-open-btn:hover .gradient-button {
    box-shadow: 0 6px 20px rgba(0, 200, 220, 0.35);
}

.tool-open-btn:active {
    transform: scale(0.98) translateY(0);
}

.copy-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.375rem;
}
.dark .copy-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.copy-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

#tool-modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#tool-modal-content {
    transition: transform 0.3s ease;
}

.subnet-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.875rem;
}
.subnet-table th, .subnet-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid #D1D5DB; /* gray-300 */
    color: #111827; /* KORRIGIERT: Explizite dunkle Schriftfarbe */
}
.dark .subnet-table th, .dark .subnet-table td { 
    border-color: #4b5563; /* gray-600 */
    color: #E5E7EB; /* KORRIGIERT: Explizite helle Schriftfarbe */
}
.subnet-table th {
    background-color: #F3F4F6; /* gray-100 */
    font-weight: 600;
}
.dark .subnet-table th { 
    background-color: #374151; /* gray-700 */
}

/* Zebra-Streifen für Tabellen im Light & Dark Mode */
.subnet-table tbody tr {
    background-color: #FFFFFF;
}
.subnet-table tbody tr:nth-child(even) { 
    background-color: #F3F4F6; /* gray-100 */
}
.dark .subnet-table tbody tr {
    background-color: transparent;
}
.dark .subnet-table tbody tr:nth-child(even) { 
    background-color: rgba(55, 65, 81, 0.4); 
}

/* --- Toast-Benachrichtigungen --- */
#toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.toast {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    animation: toast-in 0.5s, toast-out 0.5s 2.5s;
    background-color: #1f2937;
    color: #F9FAFB;
    border: 1px solid #4b5563;
}
.dark .toast {
    background-color: #F9FAFB;
    color: #1f2937;
    border: 1px solid #e5e7eb;
}

@keyframes toast-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes toast-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* --- Passwort-Stärke-Anzeige --- */
.strength-bar {
    width: 100%;
    height: 10px;
    background-color: #e5e7eb; /* gray-200 */
    border-radius: 5px;
    overflow: hidden;
}
.dark .strength-bar {
    background-color: #374151; /* gray-700 */
}
.strength-indicator {
    height: 100%;
    width: 0;
    border-radius: 5px;
    transition: width 0.3s ease, background-color 0.3s ease;
}
.strength-indicator.weak {
    width: 25%;
    background-color: #EF4444; /* red-500 */
}
.strength-indicator.medium {
    width: 50%;
    background-color: #F59E0B; /* amber-500 */
}
.strength-indicator.good {
    width: 75%;
    background-color: #84CC16; /* lime-500 */
}
.strength-indicator.strong {
    width: 100%;
    background-color: #22C55E; /* green-500 */
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #e5e7eb; /* gray-200 */
}
.dark ::-webkit-scrollbar-track {
    background: #111827; /* gray-900 */
}
::-webkit-scrollbar-thumb {
    background: #9CA3AF; /* gray-400 */
    border-radius: 5px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #4B5563; /* gray-600 */
}
::-webkit-scrollbar-thumb:hover {
    background: #6B7280; /* gray-500 */
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #374151; /* gray-700 */
}

/* --- Farb-Umrechner Vorschau --- */
.color-preview {
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    border-radius: 0.75rem; /* 12px */
    border: 1px solid #e5e7eb; /* gray-200 */
    transition: background-color 0.3s ease;
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}
.dark .color-preview {
    border-color: #4b5563; /* gray-600 */
}

/* --- Diff Checker Stile --- */
.diff-container {
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 1rem;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875rem;
    max-height: 400px;
    overflow-y: auto;
}
.dark .diff-container {
    background-color: #1f2937;
    border: 1px solid #4b5563;
}
.diff-line {
    display: flex;
    white-space: pre-wrap;
}
.diff-line.added {
    background-color: rgba(16, 185, 129, 0.1);
}
.diff-line.removed {
    background-color: rgba(239, 68, 68, 0.1);
}
.diff-line .line-num {
    flex-shrink: 0;
    width: 40px;
    padding-right: 10px;
    text-align: right;
    color: #4b5563; /* KORRIGIERT: Dunkleres Grau */
    user-select: none;
}
.dark .diff-line .line-num {
    color: #9ca3af; /* gray-400 */
}
.diff-line.added .line-content::before {
    content: '+ ';
    color: #10B981;
}
.diff-line.removed .line-content::before {
    content: '- ';
    color: #EF4444;
}

/* --- QR Code Tabs --- */
.qr-tab-btn {
    padding: 0.5rem 1rem;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    font-weight: 500;
}

/* --- RegEx Tester --- */
#regex-result-highlight mark {
    background-color: #0891B2; /* cyan-600 */
    color: white;
    border-radius: 3px;
}

/* --- Favicon Generator --- */
#favicon-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 1rem;
}
.favicon-preview-item {
    text-align: center;
}
.favicon-preview-item .preview-box {
    background-color: #e5e7eb; /* gray-200 */
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 0.375rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}
.dark .favicon-preview-item .preview-box {
    background-color: #374151; /* gray-700 */
    border-color: #4b5563; /* gray-600 */
}
.favicon-preview-item img {
    image-rendering: pixelated;
    max-width: 100%;
    max-height: 100%;
}
.favicon-preview-item p {
    font-size: 0.75rem;
    margin-top: 0.5rem;
    color: #4b5563; /* KORRIGIERT: Dunkleres Grau */
}
.dark .favicon-preview-item p {
    color: #9ca3af; /* gray-400 */
}

/* --- DNS Prop --- */
.dns-prop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.dns-prop-result {
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    /* Light Mode */
    border: 1px solid #D1D5DB; /* gray-300 */
    background-color: #F9FAFB; /* gray-50 */
}
.dark .dns-prop-result {
    border: 1px solid #4b5563;
    background-color: #1f2937;
}
.dns-prop-result.loading {
    opacity: 0.6;
}
.dns-prop-result.success {
    border-color: #10B981;
}
.dns-prop-result.error {
    border-color: #EF4444;
}

/* --- KORREKTUR: Explizite Input-Farben für Light/Dark Mode --- */
#tool-modal input, #tool-modal textarea, #tool-modal select {
    color: #111827; /* KORRIGIERT: Viel dunkleres Grau */
}
#tool-modal input::placeholder, #tool-modal textarea::placeholder {
    color: #6b7280; /* KORRIGIERT: Dunkleres Grau für Platzhalter */
}

/* Readonly-Felder im Light Mode hervorheben */
html:not(.dark) #tool-modal input[readonly],
html:not(.dark) #tool-modal textarea[readonly] {
    background-color: #e5e7eb; /* gray-200 */
}

/* Dark Mode Input Farben */
.dark #tool-modal input, .dark #tool-modal textarea, .dark #tool-modal select {
    color: #E5E7EB; /* gray-200 */
}
.dark #tool-modal input::placeholder, .dark #tool-modal textarea::placeholder {
    color: #6b7280; /* gray-500 */
}

/* Readonly-Felder haben im Dark Mode oft schon eine passende Farbe durch JS, aber zur Sicherheit */
.dark #tool-modal input[readonly],
.dark #tool-modal textarea[readonly] {
    background-color: #374151; /* gray-700 */
    color: #d1d5db; /* gray-300 */
}

/* --- Tool-spezifische Korrekturen --- */
#myip-results span, #myip-results code {
    color: #111827;
}
.dark #myip-results span, .dark #myip-results code {
    color: #E5E7EB;
}
#myip-map-link {
    color: #0891B2; /* dark cyan */
}
.dark #myip-map-link {
    color: #67E8F9; /* light cyan */
}

/* KORREKTUR: Explizite Stile für PRE-Tags im Modal */
#tool-modal pre {
    background-color: #f3f4f6; /* light gray */
    color: #111827; /* dark text */
    border: 1px solid #e5e7eb;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
}
.dark #tool-modal pre {
    background-color: #1f2937; /* dark gray */
    color: #e5e7eb; /* light text */
    border: 1px solid #4b5563;
}