* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body { background: #0b121e; color: #f8fafc; padding-top: 75px; overflow-x: hidden; min-height: 100vh; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #0b0f19; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
.header { height: 65px; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(8px); display: flex; align-items: center; padding: 0 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; box-shadow: 0 4px 20px rgba(0,0,0,0.4); border-bottom: 1px solid #1e293b; }
.menu-btn { font-size: 24px; cursor: pointer; color: #38bdf8; transition: 0.2s; padding: 4px; }
.title { margin-left: 15px; font-size: 18px; font-weight: 700; color: #38bdf8; letter-spacing: 0.5px; }
.sidebar { position: fixed; top: 0; left: -290px; width: 270px; height: 100%; background: #0f172a; transition: .3s cubic-bezier(0.4, 0, 0.2, 1); padding-top: 70px; z-index: 1000; border-right: 1px solid #1e293b; }
.sidebar.active { left: 0; }
.sidebar a { display: block; padding: 16px 24px; color: #94a3b8; text-decoration: none; border-bottom: 1px solid #1e293b; font-weight: 600; font-size: 14px; cursor: pointer; }
.sidebar a.active, .sidebar a:hover { background: #1e293b; color: #38bdf8; }
.close-btn { position: absolute; top: 20px; right: 20px; font-size: 24px; cursor: pointer; color: #64748b; }
.backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 18, 30, 0.7); backdrop-filter: blur(4px); z-index: 500; display: none; }
.content { padding: 16px; max-width: 1400px; margin: 0 auto; width: 100%; }
.dashboard-top { display: grid; grid-template-columns: 360px 1fr; gap: 16px; margin-bottom: 16px; }
.card { background: #111a2e; padding: 18px; border-radius: 12px; border: 1px solid #1e2d4a; box-shadow: 0 4px 15px rgba(0,0,0,0.3); margin-bottom: 16px; width: 100%; overflow: hidden; }
.card h3 { font-size: 13px; margin-bottom: 14px; color: #f1f5f9; font-weight: 700; border-left: 4px solid #0099ff; padding-left: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.analytics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.analytics-card { background: #0d1526; border-radius: 10px; padding: 12px 14px; border: 1px solid #18253d; transition: transform 0.15s ease; word-break: break-word; }
.analytics-card.clickable { cursor: pointer; }
.analytics-card.clickable:hover { background: #162238; transform: translateY(-2px); }
.analytics-title { font-size: 10px; color: #7c8ba1; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.analytics-value { font-size: 22px; font-weight: 800; margin-top: 4px; color: #0099ff; font-family: monospace; }
.worker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 16px; }
.worker-card { background: #0d1526; padding: 14px; border-radius: 10px; border: 1px solid #18253d; }
.worker-title { font-size: 12px; font-weight: 700; color: #0099ff; text-transform: uppercase; border-bottom: 1px solid #18253d; padding-bottom: 6px; margin-bottom: 6px; }
.worker-row { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: #8a9bb2; }
.worker-row b { color: #f8fafc; font-family: monospace; }
.progress { margin-top: 12px; height: 8px; background: #070d17; border-radius: 10px; overflow: hidden; border: 1px solid #18253d; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #0099ff, #22c55e); transition: .5s cubic-bezier(0.4, 0, 0.2, 1); }
.health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.health-box { background: #0d1526; padding: 12px; border-radius: 8px; border: 1px solid #18253d; }
.health-node-title { font-size: 10px; font-weight: 700; color: #7c8ba1; text-transform: uppercase; }
.health-node-state { font-size: 13px; font-weight: 700; margin-top: 4px; }
.timeline-container { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px; background: #0d1526; border-radius: 8px; border: 1px solid #18253d; }
.timeline-item { background: #111a2e; padding: 10px 12px; border-radius: 6px; font-size: 12px; color: #cbd5e1; border-left: 3px solid #0099ff; line-height: 1.5; word-break: break-word; }
label { display: block; margin-bottom: 5px; font-weight: 700; font-size: 10px; color: #7c8ba1; text-transform: uppercase; }
input[type="number"], input[type="text"], input[type="date"], select { width: 100%; padding: 10px 12px; margin-bottom: 12px; border-radius: 6px; border: 1px solid #1c2b42; background: #070d17; color: #fff; font-size: 14px; text-align: center; font-weight: 700; outline: none; }
input:focus, select:focus { border-color: #0099ff; }
.btn { color: white; padding: 12px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; width: 100%; font-weight: 800; margin-bottom: 10px; text-align: center; display: block; }
.btn-start { background: #0088ff; } 
.btn-start:hover { background: #0077e6; }
.btn-stop { background: #e11d48; } 
.btn-stop:hover { background: #be123c; }
.btn-export { background: #059669; font-size: 11px; padding: 6px 12px; width: auto; margin-left: auto; display: inline-block; border-radius: 5px; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; border: 1px solid #18253d; }
table { width: 100%; border-collapse: collapse; background: #070d17; min-width: 480px; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid #142036; font-size: 11px; color: #8a9bb2; white-space: nowrap; }
th { background-color: #0d1526; color: #5f708a; font-weight: 800; text-transform: uppercase; font-size: 10px; border-bottom: 1px solid #18253d; }
td { font-weight: 600; }
.badge { padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 800; display: inline-block; font-family: monospace; }
.success-bg { background: rgba(5,150,105,0.2); color: #34d399; border: 1px solid rgba(5,150,105,0.4); }
.error-bg { background: rgba(225,29,72,0.2); color: #f87171; border: 1px solid rgba(225,29,72,0.4); }
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(7, 13, 23, 0.85); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 9999; padding: 12px; }
.modal-box { background: #0f172a; border: 1px solid #1e293b; border-radius: 14px; width: 100%; max-width: 1100px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(0,0,0,0.8); overflow: hidden; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #1e293b; background: #0b121e; }
.modal-header h3 { font-size: 15px; font-weight: 800; color: #f8fafc; display: flex; align-items: center; gap: 8px; }
.modal-close { font-size: 24px; cursor: pointer; color: #64748b; line-height: 1; }
.modal-body { padding: 20px; overflow-y: auto; flex-grow: 1; background: #0f172a; }
.game-bal-pill { display: inline-block; padding: 3px 6px; background: #111a2e; border: 1px solid #1e2d4a; border-radius: 4px; font-size: 10px; margin: 2px; color: #cbd5e1; font-weight: 600; font-family: monospace; }
.game-bal-pill b { color: #34d399; }
.number-group-header { background: #0099ff; color: #ffffff; padding: 8px 12px; font-size: 12px; font-weight: 800; border-radius: 6px 6px 0 0; font-family: monospace; margin-top: 15px; }
.number-group-container { margin-bottom: 15px; border: 1px solid #1e2d4a; border-radius: 6px; overflow: hidden; }