body { 
    background-color: #f8fafc; 
    color: #334155; 
    font-family: 'Inter', sans-serif; 
}
.font-mono { font-family: 'JetBrains Mono', monospace; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.panel { 
    background-color: #ffffff; 
    border: 1px solid #e2e8f0; 
    border-radius: 0.75rem; 
    padding: 1rem; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    position: relative;
}
.panel-title { 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    font-weight: 800; 
    color: #0ea5e9; 
    margin-bottom: 0.75rem;
}

input[type="number"], input[type="text"], select { 
    background-color: #ffffff; 
    border: 2px solid #cbd5e1; 
    color: #1e293b;
    padding: 0.375rem 0.5rem; 
    border-radius: 0.375rem; 
    transition: all 0.2s;
}
input[type="number"]:focus, input[type="text"]:focus, select:focus {
    outline: none;
    border-color: #0ea5e9;
}

button.btn {
    background: linear-gradient(to bottom, #0ea5e9, #0284c7);
    border: 1px solid #0284c7; 
    border-radius: 0.375rem; 
    color: white;
    font-weight: 600;
    cursor: pointer; 
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
button.btn:hover { background: linear-gradient(to bottom, #38bdf8, #0ea5e9); transform: translateY(-1px); }
button.btn:active { transform: translateY(1px); }

button.btn-secondary { 
    background: linear-gradient(to bottom, #ffffff, #f1f5f9); 
    border: 2px solid #cbd5e1;
    color: #475569;
}
button.btn-secondary:hover { background: linear-gradient(to bottom, #f8fafc, #e2e8f0); border-color: #94a3b8; }

.tab-btn {
    background-color: #f1f5f9;
    color: #64748b;
    transition: all 0.2s;
    border: 2px solid transparent;
}
.tab-btn:hover { color: #0f172a; background-color: #e2e8f0; }
.tab-btn.active-tab { 
    color: #ffffff; 
    background: linear-gradient(to bottom, #3b82f6, #2563eb);
    border: 2px solid #1d4ed8;
    font-weight: 700;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.4);
    transform: scale(1.02);
    z-index: 10;
}

.table-header { 
    background-color: #f8fafc; 
    border-bottom: 2px solid #e2e8f0; 
    color: #475569;
}
.grid-row { border-bottom: 1px solid #f1f5f9; transition: background-color 0.1s; }
.grid-row:nth-child(even) { background-color: #ffffff; }
.grid-row:nth-child(odd) { background-color: #f8fafc; }
.grid-row:hover:not(.highlight):not(.sequence-trail):not(.gold-row) { background-color: #e2e8f0; }

.grid-row.highlight { 
    background: linear-gradient(90deg, #dbeafe 0%, #bfdbfe 100%); 
    color: #0369a1; 
    border-left: 4px solid #3b82f6;
}

.grid-row.sequence-trail {
    background: linear-gradient(90deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border-left: 4px solid #22c55e;
}

.grid-row.gold-row {
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
    border-left: 4px solid #f59e0b;
}

.cell-border { border-right: 1px solid #e2e8f0; }

/* Custom Scrollbar for top horizontal strip */
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }