* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #1a1a2e; color: #eee; min-height: 100vh;
}
.header { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem; background: #16213e; border-bottom: 2px solid #0f3460; }
.resource-group { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.resource { font-weight: bold; color: #e94560; }
.team-devs, .team-pos, .team-tls, .team-qas { color: #4ecca3; }
.infrastructure { color: #ffd700; }
.header-actions { display: flex; gap: 0.5rem; margin-left: auto; }

.dashboard { display: grid; grid-template-columns: 280px 1fr 300px 250px; gap: 1rem; padding: 1rem; }
.panel-left, .panel-right, .panel-activity { background: #16213e; border-radius: 8px; padding: 1rem; height: fit-content; }
.panel-center { display: flex; flex-direction: column; gap: 1rem; }

.stats-card, .reputation-card, .salary-card {
    background: #0f3460; border-radius: 8px; padding: 1rem; margin-bottom: 1rem;
}
.stat-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #1a1a2e; }
.stat-row:last-child { border-bottom: none; }

.tabs { display: flex; gap: 0.5rem; }
.tab-btn {
    background: #0f3460; color: #eee; border: none; padding: 0.75rem 1.5rem;
    border-radius: 8px 8px 0 0; cursor: pointer; flex: 1;
}
.tab-btn.active { background: #1a1a2e; font-weight: bold; }
.tab-content { display: none; background: #16213e; padding: 1rem; border-radius: 0 8px 8px 8px; min-height: 400px; }
.tab-content.active { display: block; }

.project-controls, .marketing-controls { margin-bottom: 1rem; }
#project-type-select { background: #0f3460; color: #eee; border: none; padding: 0.5rem; border-radius: 4px; flex: 1; margin-right: 0.5rem; }

.empty-state { text-align: center; color: #888; font-style: italic; padding: 2rem; }
.bugs-list, #project-list { min-height: 300px; max-height: 400px; overflow-y: auto; }

.hire-card, .upgrade-card {
    background: #1a1a2e; border-radius: 8px; padding: 1rem; margin-bottom: 0.5rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.hire-info { display: flex; align-items: center; gap: 0.75rem; }
.role-icon { font-size: 2rem; }
.hire-card strong, .upgrade-card strong { display: block; margin-bottom: 0.25rem; color: #4ecca3; }
.hire-card p, .upgrade-card p { font-size: 0.85rem; color: #aaa; }

.btn {
    background: #0f3460; color: #eee; border: none; padding: 0.75rem 1rem;
    border-radius: 8px; cursor: pointer; text-align: center; font-size: 0.9rem;
}
.btn:hover { background: #1a1a2e; }
.btn-primary { background: #4ecca3; color: #16213e; font-weight: bold; }
.btn-secondary { background: #ffd700; color: #1a1a2e; }
.btn-hire, .btn-upgrade { flex: 1; min-width: 80px; }
.btn-small { padding: 0.5rem 1rem; font-size: 0.8rem; }
.btn-danger { background: #e94560; }
.btn-ship { background: #4ecca3; color: #16213e; }
.btn-remove { background: #e94560; color: #fff; font-size: 0.8rem; padding: 0.25rem 0.75rem; margin-top: 0.5rem; }

.progress-bar {
    width: 100%; height: 20px; background: #0f3460; border-radius: 10px;
    overflow: hidden; margin-top: 0.5rem;
}
.progress-fill { height: 100%; background: linear-gradient(90deg, #4ecca3, #ffd700); transition: width 0.3s; }
.progress-bar.small { height: 12px; }

.saas-dashboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; }
.metric-card {
    background: #1a1a2e; border-radius: 8px; padding: 1rem; text-align: center;
}
.metric-card h4 { color: #4ecca3; font-size: 0.9rem; margin-bottom: 0.5rem; }
.metric-card p { font-size: 1.5rem; font-weight: bold; color: #ffd700; }

.marketing-controls .btn-marketing {
    display: flex; align-items: center; gap: 0.5rem;
    background: #1a1a2e; margin-bottom: 0.5rem;
}
.marketing-controls .icon { font-size: 1.5rem; }
.marketing-controls small { color: #aaa; }

.notifications-panel {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #16213e; border-top: 2px solid #0f3460; padding: 1rem;
}
.log-container { max-height: 150px; overflow-y: auto; }
.log-entry { padding: 0.5rem 0; border-bottom: 1px solid #1a1a2e; color: #aaa; }

.panel-activity {
    background: #16213e; border-radius: 8px; padding: 1rem;
}
.panel-activity h3 { margin-bottom: 0.5rem; color: #4ecca3; }
.log-container { max-height: 400px; overflow-y: auto; }

.modal {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center;
}
.modal-content {
    background: #16213e; padding: 2rem; border-radius: 12px; max-width: 500px; width: 90%;
    position: relative;
}
.close-btn { position: absolute; top: 1rem; right: 1rem; font-size: 2rem; cursor: pointer; color: #e94560; }

.project-card {
    background: #1a1a2e; border-radius: 8px; padding: 1rem; margin-bottom: 0.5rem;
}
.project-card strong { display: block; margin-bottom: 0.5rem; }
.project-card small { color: #aaa; }

.quick-actions, .info-box {
    background: #1a1a2e; border-radius: 8px; padding: 1rem; margin-top: 1rem;
}
.quick-actions button, .info-box button {
    display: block; width: 100%; margin-bottom: 0.5rem;
}

@media (max-width: 1200px) {
    .dashboard { grid-template-columns: 1fr 300px; }
    .panel-left { display: none; }
}
@media (max-width: 768px) {
    .header { flex-direction: column; align-items: stretch; }
    .resource-group { justify-content: space-between; }
    .dashboard { grid-template-columns: 1fr; }
    .panel-center, .panel-right, .panel-activity { max-height: 50vh; overflow-y: auto; }
}