body {
    background-color: #0a0f1e;
    color: #f8fafc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#main-header {
    width: 100%;
    padding: 15px 0;
    text-align: center;
    background: rgba(30, 41, 59, 0.8);
    border-bottom: 1px solid #334155;
    z-index: 10;
}

#main-header h1 {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: 3px;
    color: #ffcc00;
    text-transform: uppercase;
}

#main-container {
    display: flex;
    width: 100%;
    flex: 1;
    min-height: 0;
}

#left-panel, #info-zone {
    width: 250px;
    padding: 20px;
    background: #0f172a;
    border-right: 1px solid #1e293b;
    display: flex;
    flex-direction: column;
}

#info-zone { border-right: none; border-left: 1px solid #1e293b; }

.control-group h3 { color: #38bdf8; font-size: 0.75rem; margin-bottom: 15px; letter-spacing: 1px; }

button {
    width: 100%;
    padding: 10px;
    margin-bottom: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.7rem;
    transition: 0.2s;
}

#pauseBtn { background: #71de7c; color: #0f172a; }
#addHourBtn { background: #78d6ff; color: #0f172a; }
#addDayBtn { background: #57cdff; color: #0f172a; }
#addMonthBtn { background: #1cb1f1; color: #0f172a; }
.jump-btn { background: #334155; color: #fff; border: 1px solid #475569; }
button:hover { opacity: 0.9; transform: translateY(-1px); }

#builder-zone {
    flex: 1;
    background: radial-gradient(circle at center, #1e293b 0%, #000 100%);
    position: relative;
}

.data-card {
    background: rgba(30, 41, 59, 0.5);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
    border: 1px solid #1e293b;
}

.data-card .label { font-size: 0.65rem; color: #94a3b8; display: block; margin-bottom: 5px; }
.data-card .value { font-size: 1.1rem; font-weight: bold; }
.highlight { border-color: #38bdf8; }

.instruction-box {
    margin-top: auto;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
    font-style: italic;
}

#legend { margin-top: 20px; }
.legend-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 0.75rem; }
.legend-color { width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; }

.scene-label {
    position: absolute;
    color: #fff;
    font-size: 0.7rem;
    background: rgba(15, 23, 42, 0.9);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #38bdf8;
    transform: translate(-50%, -50%);
    pointer-events: none;
}