:root {
    --bg-main: #020608;
    --panel-bg: #05131a;
    --border-color: #00f3ff;
    --text-main: #00f3ff;
    --text-muted: #3a7c80;
    --accent-green: #00ff66;
    --accent-red: #ff003c;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Share Tech Mono', monospace; }
body { background-color: var(--bg-main); color: var(--text-main); height: 100vh; overflow: hidden; padding: 10px; }

/* Efek Garis Scan TV Tabung */
.scan-line {
    position: fixed; top: 0; left: 0; width: 100vw; height: 5px; background: rgba(0, 243, 255, 0.3);
    opacity: 0.4; animation: scanline 6s linear infinite; z-index: 9999; pointer-events: none;
}
@keyframes scanline { 0% { top: -5%; } 100% { top: 105%; } }
.blink { animation: blinking 1s infinite; }
@keyframes blinking { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

/* Tata Letak Ruang Kerja (Grid) */
.grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr 120px;
    gap: 10px; height: 100%;
}
@media (min-width: 768px) {
    .grid-layout { grid-template-columns: 300px 1fr; grid-template-rows: auto 1fr 150px; }
    .header-panel { grid-column: 1 / -1; }
    .log-panel { grid-column: 1 / -1; }
}

.panel {
    background: var(--panel-bg); border: 1px solid var(--border-color);
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.1) inset; padding: 12px;
    display: flex; flex-direction: column; overflow: hidden;
}

.header-panel { text-align: center; border-bottom: 3px solid var(--text-main); }
.sys-title h1 { font-size: 1.2rem; letter-spacing: 2px; }
.status { font-size: 0.8rem; color: var(--accent-green); }
.dot { display: inline-block; width: 8px; height: 8px; background: var(--accent-green); border-radius: 50%; margin-right: 5px; }

.section-title { font-size: 0.9rem; border-bottom: 1px dashed var(--text-muted); padding-bottom: 5px; margin-bottom: 15px; color: var(--accent-green); }
.divider { height: 1px; background: var(--border-color); opacity: 0.3; margin: 15px 0; }

.cyber-input { width: 100%; background: #000; border: 1px solid var(--border-color); color: var(--text-main); padding: 10px; margin-bottom: 10px; outline: none; }
.cyber-input:focus { border-color: var(--accent-green); box-shadow: 0 0 5px var(--accent-green); }

.cyber-btn { width: 100%; background: transparent; border: 1px solid var(--text-main); color: var(--text-main); padding: 10px; cursor: pointer; font-weight: bold; transition: 0.2s; }
.cyber-btn:hover { background: rgba(0, 243, 255, 0.2); }
.cyber-btn.primary { background: rgba(0, 255, 102, 0.1); border-color: var(--accent-green); color: var(--accent-green); }
.cyber-btn:disabled { border-color: var(--text-muted); color: var(--text-muted); cursor: not-allowed; }

.status-text { font-size: 0.8rem; text-align: center; margin-top: 10px; }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }

/* Desain Tabel Expert */
.table-container { flex: 1; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
th, td { border: 1px solid rgba(0, 243, 255, 0.2); padding: 8px; text-align: left; }
th { background: rgba(0, 243, 255, 0.1); color: var(--accent-green); position: sticky; top: 0; }
tr:nth-child(even) { background: rgba(0, 0, 0, 0.3); }
tr:hover { background: rgba(0, 243, 255, 0.05); }

/* Terminal Log Console */
.log-console { flex: 1; overflow-y: auto; font-size: 0.75rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; padding-right: 5px; }
.log-success { color: var(--accent-green); }
.log-error { color: var(--accent-red); }
.log-info { color: var(--text-main); }