/* General Reset */
body {
    background-color: #0D1117;
    color: #C9D1D9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
header {
    text-align: center;
    margin-bottom: 30px;
}
header h1 { color: #FFFFFF; font-size: 2.5em; margin-bottom: 5px; }
.subtitle { color: #8B949E; }

/* Grid Layout */
.main-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
}

/* Cards */
.card {
    background-color: #161B22;
    border: 1px solid #30363D;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

h2 { color: #FFFFFF; border-bottom: 1px solid #30363D; padding-bottom: 10px; margin-top: 0; font-size: 1.2em; }

/* Tabs */
.tabs { margin-bottom: 15px; display: flex; gap: 10px; }
.tab-btn {
    background: #0D1117; color: #8B949E; border: 1px solid #30363D;
    padding: 8px 16px; cursor: pointer; border-radius: 6px;
    flex: 1; transition: 0.3s;
}
.tab-btn.active, .tab-btn:hover { background: #238636; color: white; border-color: #238636; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Input Areas */
.file-drop-area {
    border: 2px dashed #30363D; padding: 40px; text-align: center;
    position: relative; border-radius: 6px; background: #0D1117; transition: 0.3s;
}
.file-drop-area:hover { border-color: #58A6FF; }
.file-input {
    position: absolute; left: 0; top: 0; height: 100%; width: 100%;
    opacity: 0; cursor: pointer;
}
.fake-btn {
    background: #30363D; color: white; padding: 8px 15px; border-radius: 4px;
    display: inline-block; margin-bottom: 10px;
}

textarea {
    width: 100%; background: #010409; color: #00FF00; border: 1px solid #30363D;
    padding: 10px; border-radius: 6px; font-family: 'Courier New', monospace; resize: vertical;
    min-height: 200px; box-sizing: border-box;
}

.scan-btn {
    width: 100%; background: #238636; color: white; border: none;
    padding: 15px; border-radius: 6px; font-size: 1.1em; font-weight: bold;
    cursor: pointer; margin-top: 20px; transition: 0.3s;
}
.scan-btn:hover { background: #2EA043; }
.scan-btn:disabled { background: #30363D; cursor: not-allowed; opacity: 0.7; }

/* Terminal */
.terminal {
    background: #010409; color: #58A6FF; font-family: 'Courier New', monospace;
    padding: 15px; height: 350px; overflow-y: auto; border-radius: 6px;
    border: 1px solid #30363D; font-size: 13px;
}
.blink { animation: blinker 1.5s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

/* Results */
.verdict-box {
    padding: 20px; border-radius: 8px; text-align: center; color: white;
    margin-bottom: 20px; transition: 0.5s;
}
.verdict-box h1 { margin: 0; font-size: 2.5em; }
.verdict-box h3 { margin: 5px 0 0 0; opacity: 0.9; }

.analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dna-box h3, .chart-box h3 { margin-top: 0; color: #C9D1D9; font-size: 1em; }
.dna-box ul { list-style: none; padding: 0; }
.dna-box li { 
    background: #0D1117; padding: 10px; margin-bottom: 8px; 
    border-radius: 4px; border-left: 3px solid #8B949E; font-size: 0.9em;
}
.chart-box { text-align: center; background: #0D1117; padding: 10px; border-radius: 6px; }
.chart-box img { width: 100%; max-width: 300px; border-radius: 50%; }

/* Documentation & Footer */
.doc-content { display: none; color: #C9D1D9; line-height: 1.6; }
.doc-content.active { display: block; }
.doc-content h4 { color: #58A6FF; margin-top: 15px; margin-bottom: 5px; }

.credits { 
    display: flex; justify-content: space-between; font-size: 0.9em; 
    background: transparent; border: none; padding: 0; margin-top: 20px;
}
.credits a { color: #58A6FF; text-decoration: none; margin-left: 5px; }
.credits a:hover { text-decoration: underline; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .main-grid { grid-template-columns: 1fr; }
    .analysis-grid { grid-template-columns: 1fr; }
    .credits { flex-direction: column; gap: 10px; text-align: center; }
}