body { margin: 0; background: var(--color-bg-dark); color: var(--color-text-main); font-family: var(--font-family-main); display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* Layout */
header { height: 40px; background: var(--color-surface-panel); border-bottom: 1px solid var(--color-primary); display: flex; align-items: center; padding: 0 15px; justify-content: space-between; }
.main-area { display: flex; flex: 1; height: calc(100vh - 350px); } /* Top half */
.timeline-area { height: 350px; background: var(--color-bg-dark); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; }

/* Navigation */
.nav-brand { font-weight: bold; color: var(--color-primary); text-decoration: none; margin-right: 20px; font-size: 1.1em; }
.nav-links { display: flex; gap: 15px; }
.nav-link { color: var(--color-text-muted); text-decoration: none; font-size: 13px; transition: color 0.2s; }
.nav-link:hover, .nav-link.active { color: var(--color-text-white); }

/* Panels */
.bin { width: 250px; background: var(--color-surface-panel); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; }
.viewport { flex: 1; background: #000; display: flex; align-items: center; justify-content: center; position: relative; }
.inspector { width: 250px; background: var(--color-surface-panel); border-left: 1px solid var(--color-border); padding: 10px; }

/* Components */
.asset { padding: 8px; border-bottom: 1px solid #2a2a2a; cursor: grab; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.asset:hover { background: #2a2a2a; color: var(--color-primary); }

button { background: #333; border: 1px solid #444; color: #fff; padding: 4px 12px; border-radius: 3px; cursor: pointer; }
button:hover { background: #444; }
button.primary { background: var(--color-primary); color: var(--color-text-inverse); border: none; font-weight: bold; }

/* Upload Zone */
.drop-zone { padding: 20px; text-align: center; border: 2px dashed #444; margin: 10px; border-radius: var(--radius-md); color: #666; font-size: 12px; }
.drop-zone.dragover { border-color: var(--color-primary); color: var(--color-primary); }

/* Vis.js Customization */
.vis-timeline { border: none; border-top: 1px solid #333; background-color: #181818; }
.vis-time-axis .vis-text { color: #888; }
.vis-item { border-color: #588ba8; background-color: #3a5f75; color: white; font-size: 11px; border-radius: 4px; }
.vis-item.vis-selected { border-color: white; background-color: #4a7f95; }
.vis-item.audio { background-color: #3a7548; border-color: #58a86d; }
.vis-label { color: var(--color-text-main); font-size: 12px; display: flex; align-items: center; }
.vis-panel.vis-left { background-color: #222; border-right: 1px solid #333; }

/* About Us Page */
.about-container { max-width: 800px; margin: 40px auto; padding: 20px; text-align: center; }
.creator-card { background: #2a2a2a; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px; margin-top: 20px; }
.creator-name { font-size: 2em; color: var(--color-primary); margin-bottom: 10px; }
.creator-link { color: var(--color-text-white); text-decoration: none; font-size: 1.2em; border-bottom: 1px solid var(--color-primary); padding-bottom: 2px; transition: all 0.2s; }
.creator-link:hover { color: var(--color-primary); }
.youtube-icon { color: #ff0000; margin-right: 8px; }

/* Forms */
.form-control { width: 100%; background: var(--color-bg-dark); border: 1px solid #444; color: var(--color-text-white); padding: 10px; border-radius: var(--radius-sm); box-sizing: border-box; font-family: inherit; }
.form-control:focus { border-color: var(--color-primary); outline: none; }