:root {
--bg-primary: #0F1419;
--bg-card: #1C232C;
--text-primary: #E5E7EB;
--text-secondary: #6B7280;
--green: #0EA29A;
--red: #EF4444;
--blue: #0D6EFA;
--yellow: #F5C542;
--border: #2E3440;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Inter, system-ui, sans-serif;
font-size: 16px;
color: var(--text-primary);
background: var(--bg-primary);
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px 16px 24px;
background: var(--bg-card);
}
.app-header-left {
display: flex;
flex-direction: column;
}
.app-header-left h1 {
font-family: IBM Plex Sans, system-ui, sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 32px;
}
.app-header-left p {
font-family: IBM Plex Mono, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-secondary);
}
.app-header-right {
display: flex;
align-items: center;
gap: 12px;
}
.status-indicator {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
border-radius: 8px;
font-family: IBM Plex Mono, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.status-indicator.active {
background: rgba(239, 68, 68, 0.12);
color: var(--red);
}
.status-indicator.inactive {
background: rgba(14, 162, 154, 0.12);
color: var(--green);
}
.status-indicator span {
flex: 0 0 8px;
width: 8px;
height: 8px;
border-radius: 50%;
}
.status-indicator span.red {
background: var(--red);
}
.status-indicator span.green {
background: var(--green);
}
.lang-switcher {
color: var(--text-secondary);
text-decoration: none;
padding: 4px 8px;
font-size: 12px;
}
.app-content {
padding: 16px 24px;
}
.status-hero {
display: flex;
flex-direction: column;
margin: 12px 0 32px 0;
}
.status-hero-label {
font-family: IBM Plex Mono, monospace;
font-size: 14px;
color: var(--text-secondary);
}
.status-hero-value {
font-family: IBM Plex Sans, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
}
.status-legend {
margin-top: 16px;
display: flex;
list-style: none;
gap: 16px;
}
.status-legend li {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 8px;
background: var(--bg-card);
}
.status-legend span {
flex: 0 0 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
}
.status-legend span.red {
background: var(--red);
}
.status-legend p {
font-size: 12px;
color: var(--text-secondary);
}
.zone-detail {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}
.zone-row {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-card);
padding: 20px;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.zone-row::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--green);
}
.zone-row.in-progress::before {
background: var(--red);
}
.zone-row .zone-badge {
font-family: IBM Plex Mono, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
padding: 3px 6px;
border-radius: 6px;
}
.zone-row .zone-badge.green {
background: rgba(14, 162, 154, 0.15);
color: var(--green);
}
.zone-row .zone-badge.red {
background: rgba(239, 68, 68, 0.15);
color: var(--red);
}
.zone-row .zone-name {
flex: 1 1 auto;
font-family: IBM Plex Sans, system-ui, sans-serif;
font-size: 16px;
font-weight: 700;
padding-left: 10px;
color: var(--text-primary);
}
.zone-row .zone-time {
display: flex;
align-items: center;
font-family: IBM Plex Mono, monospace;
font-size: 12px;
color: var(--text-secondary);
}
.zone-row .zone-time.in-progress {
color: var(--red);
}
.zone-activities {
display: flex;
flex-direction: column;
gap: 16px;
}
.activities-header {
font-family: IBM Plex Sans, system-ui, sans-serif;
font-size: 18px;
font-weight: 700;
}
#chart-container {
min-height: 300px;
}
.activity-link {
font-size: 14px;
color: var(--blue);
text-decoration: underline;
}
@media (min-width: 600px) {
.app-content {
padding: 16px 48px;
}
}
Zones inactives
R158A & R158B
R158 inactives
R158A active
R158B active