:root {
    --primary-bg: #f0f2f5;
    --panel-bg: #ffffff;
    --header-bg: #005A9C; /* Blue */
    --text-color: #333;
    --header-text-color: #ffffff;
    --border-color: #dcdcdc;
    --button-bg: #F57C00; /* Orange */
    --button-hover-bg: #E65100; /* Darker Orange */
    --button-text-color: #ffffff;
    --accent-color: #005A9C; /* Blue */
    --reset-bg: #014a7c;
    --reset-hover-bg: #00365a;
}
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--primary-bg); color: var(--text-color); margin: 0; }
header { background-color: var(--header-bg); color: var(--header-text-color); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
h1 { margin: 0; }
#company-stats { display: flex; gap: 2rem; align-items: center; }
#goal-container { display: flex; align-items: center; gap: 0.5rem; }
#goal-progress { width: 150px; }
#game-container { display: flex; justify-content: space-around; padding: 1rem; gap: 1rem; }
.panel { background-color: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; flex-basis: 32%; display: flex; flex-direction: column; gap: 1rem; }
.panel-section { border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; }
.panel-section:last-child { border-bottom: none; }
h2 { color: var(--accent-color); margin-top: 0; border-bottom: 2px solid var(--primary-bg); padding-bottom: 0.5rem; }
button { background-color: var(--button-bg); color: var(--button-text-color); border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; width: 100%; margin: 5px 0; }
button:hover:not(:disabled) { background-color: var(--button-hover-bg); }
button:disabled { background-color: #95a5a6; cursor: not-allowed; }
#reset-button { background-color: var(--reset-bg); }
#reset-button:hover { background-color: var(--reset-hover-bg); }
.btn-small { padding: 4px 8px; width: auto; font-size: 0.8em; margin-left: 5px; }
.btn-green { background-color: #2ecc71; }
.btn-red { background-color: #e74c3c; }
input, select { width: 100%; padding: 8px; margin: 5px 0 10px 0; border-radius: 4px; border: 1px solid var(--border-color); box-sizing: border-box; }
.buy-controls { display: flex; gap: 5px; align-items: center; }
.buy-controls input { width: 40%; }
.buy-controls button { width: 60%; }
#stock-market-table { width: 100%; border-collapse: collapse; font-size: 0.9em;}
#stock-market-table th, #stock-market-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--border-color); }
#stock-market-table .buy-controls input { width: 60px; padding: 4px; }
.production-line { background: #fafafa; padding: 15px; border-radius: 5px; margin-bottom: 15px; border: 1px solid var(--border-color); }
.production-line h4 { margin: 0 0 10px 0; }
.blueprint { background-color: #ecf0f1; padding: 10px; border-radius: 4px; margin-bottom: 10px; }
.blueprint p { margin: 5px 0; }
.investment-controls { display: flex; align-items: center; gap: 5px; margin-top: 5px;}
.investment-controls input { width: 60%; }
.investment-controls button { width: 40%; }
#research-list { display: flex; flex-direction: column; gap: 5px; }
.modal-hidden { display: none !important; }
#win-modal, #tutorial-modal { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; }
.modal-content { background-color: white; padding: 30px; border-radius: 10px; text-align: center; max-width: 500px; }
.tutorial-nav { display: flex; justify-content: space-between; margin-top: 20px; }