:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #10161d; color: #eaf0f6; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #10161d; }
main, .topbar { max-width: 1240px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.topbar { min-height: 126px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #263442; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: 30px; } h2 { margin-bottom: 0; font-size: 18px; }
.eyebrow { margin-bottom: 7px; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #61d6af; }.muted, small { color: #98a9b9; }.topbar-actions { display: flex; gap: 14px; align-items: center; }.topbar a { color: #9bc7ff; text-decoration: none; }
main { padding-top: 30px; padding-bottom: 50px; }.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; }.metrics article, .panel, .login-card { background: #18222d; border: 1px solid #293a4b; border-radius: 12px; }.metrics article { padding: 19px; }.metrics span { display: block; font-size: 13px; color: #98a9b9; }.metrics strong { display: block; margin-top: 9px; font-size: 29px; }.panel { padding: 20px; margin-bottom: 24px; }.panel-title { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 16px; }.panel-title span { color: #98a9b9; font-size: 13px; }.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; font-size: 14px; }th { color: #98a9b9; text-align: left; font-weight: 500; }th, td { padding: 13px 10px; border-bottom: 1px solid #293a4b; }td strong, td small { display: block; }.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 12px; }.online { color: #6ee7b7; background: #123c34; }.neutral { color: #b8c4cf; background: #2b3642; }.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }.columns .panel { margin-bottom: 0; }.events { padding: 0; margin: 0; list-style: none; }.events li { padding: 13px 0; border-bottom: 1px solid #293a4b; display: flex; justify-content: space-between; gap: 12px; align-items: center; }.events li:last-child { border-bottom: 0; }.events strong, .events small { display: block; }.empty { margin: 0; padding: 14px 0; color: #98a9b9; }.login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; }.login-card { width: min(100%, 430px); padding: 32px; }.login-card h1 { margin-bottom: 8px; }.login-card form { margin-top: 25px; }label { display: block; margin-bottom: 8px; font-size: 14px; }input { width: 100%; padding: 12px; border: 1px solid #405364; border-radius: 7px; background: #10161d; color: #eaf0f6; font-size: 15px; }button { padding: 11px 17px; border: 0; border-radius: 7px; background: #55cda6; color: #09241d; font-weight: 700; cursor: pointer; margin-top: 18px; }.secondary { margin-top: 0; background: #283846; color: #d8e2eb; }.error { border-radius: 7px; padding: 10px; color: #ffc4c4; background: #4b242a; }
@media (max-width: 700px) { .topbar { min-height: auto; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 18px; padding-bottom: 18px; }.topbar-actions { flex-wrap: wrap; gap: 8px 14px; font-size: 13px; }.metrics, .columns { grid-template-columns: 1fr; }.columns .panel { margin-bottom: 0; }.topbar h1 { font-size: 22px; } }
.topbar a, td a { color: #9bc7ff; }.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.detail-grid small, .detail-grid strong { display: block; }.detail-grid strong { margin-top: 7px; }.file-list { list-style: none; padding: 0; margin: 0; }.file-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid #293a4b; }.file-list li:last-child { border-bottom: 0; }h3 { font-size: 14px; color: #98a9b9; font-weight: 500; }
@media (max-width: 700px) { .detail-grid { grid-template-columns: 1fr; } }
.mean-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; }.mean-grid div, .series { padding: 12px; background: #121b24; border-radius: 8px; }.mean-grid small, .mean-grid strong { display: block; }.mean-grid strong { margin-top: 5px; }.series-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }.series strong { display: block; margin-bottom: 8px; font-size: 13px; }.sparkline svg { width: 100%; height: 110px; background: #10161d; border-radius: 5px; }.sparkline polyline { fill: none; stroke: #61d6af; stroke-width: 1.5; vector-effect: non-scaling-stroke; }.sparkline small { display: block; margin-top: 5px; }
.machine-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }.machine-form button { margin: 0; }.success { border-color: #238260; }.success pre { white-space: pre-wrap; padding: 12px; background: #10161d; border-radius: 7px; } @media (max-width: 700px) { .machine-form { grid-template-columns: 1fr; } }
.hint { color: #b8c8d8; margin-bottom: 22px; }.machine-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin-top: 12px; }.machine-checks label { margin: 0; padding: 10px; border: 1px solid #334656; border-radius: 7px; cursor: pointer; }.machine-checks input { width: auto; margin-right: 7px; }fieldset { border: 0; padding: 0; margin: 0; }legend { color: #98a9b9; font-size: 14px; }code { color: #b8d5ef; }
.chart-panel { overflow: hidden; }.chart-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }.chart-controls label { margin: 0; padding: 7px 9px; border: 1px solid #3a4c5d; border-radius: 6px; color: #c4d3df; cursor: pointer; }.chart-controls input { width: auto; margin: 0 6px 0 0; accent-color: #55cda6; }.work-chart { height: 720px; min-width: 0; color: #ffb4b4; }@media (max-width: 700px) { .work-chart { height: 560px; }.chart-controls { max-height: 120px; overflow: auto; } }
.lining-chart { height: min(460px, calc(80px + 34px * 12)); min-height: 180px; color: #ffb4b4; }.lining-timeline { list-style: none; padding: 0; margin: 26px 0 0; border-left: 2px solid #365064; }.lining-timeline li { display: flex; gap: 12px; position: relative; padding: 0 0 19px 18px; }.timeline-marker { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #55cda6; border: 2px solid #18222d; left: -6px; top: 4px; }.timeline-main { flex: 1; min-width: 0; }.timeline-main strong, .timeline-main span, .timeline-main small { display: block; }.timeline-main span { color: #d0dde7; margin-top: 3px; }.timeline-main small { margin-top: 4px; }.timeline-tags { display: flex; align-items: start; gap: 5px; flex-wrap: wrap; }.warning { color: #ffd68a; background: #57411b; }
.analysis-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.analysis-form select { width: 100%; padding: 12px; border: 1px solid #405364; border-radius: 7px; background: #10161d; color: #eaf0f6; font-size: 14px; }.analysis-form button { width: max-content; margin: 4px 0 0; }.analysis-chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.analysis-chain article { min-height: 108px; padding: 14px; background: #121b24; border: 1px solid #334656; border-radius: 8px; }.analysis-chain article.ready { border-color: #238260; }.analysis-chain small, .analysis-chain strong, .analysis-chain a { display: block; }.analysis-chain a { margin-top: 9px; color: #9bc7ff; }.analysis-chain strong { margin-top: 9px; color: #98a9b9; }.analysis-action { margin: -4px 0 24px; }.analysis-action a { color: #6ee7b7; }@media (max-width: 700px) { .analysis-form, .analysis-chain { grid-template-columns: 1fr; } }
.analysis-chart { height: 640px; min-width: 0; color: #ffb4b4; }@media (max-width: 700px) { .analysis-chart { height: 560px; } }
.status-error { color: #ffc4c4; background: #4b242a; }.compact { margin: 0; padding: 7px 10px; font-size: 12px; }
.inline-form { display: inline-block; margin-left: 8px; }.upload-progress { margin-top: 14px; }.upload-progress-track { height: 8px; border-radius: 999px; overflow: hidden; background: #283846; }.upload-progress-track div { width: 0; height: 100%; background: #55cda6; transition: width .15s ease; }.upload-progress span { display: block; margin-top: 7px; color: #b8c8d8; font-size: 13px; }