/* Base layout */
body { font-family: sans-serif; margin: 0; background: #cfe8ff; padding: 20px; }
h1 { text-align: center; margin: 0 0 12px; }

/* Cards & rows */
.card { border: 4px solid #fff; border-radius: 12px; padding: 20px; max-width: 720px; width: calc(100% - 32px); background: #e9f4ff; box-shadow: 0 6px 18px rgba(0,0,0,0.08); margin: 0 auto; }
.row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.row.right { justify-content: flex-end; }
.small { color: #666; font-size: 12px; }

.transparentbutton { background-color: transparent; border-color: transparent;}

/* Controls */
button { padding: 8px 12px; cursor: pointer; border-radius: 10px; border: 2px solid #00a; background: #cfe8ff}
input[type=number], input[type=datetime-local], input[type=text], input[type=password] { padding: 6px; }
label { width: 90px; }

/* Index page specifics */
#status.on { color: #1a7f37; }
#status .flame { margin-left: 6px; }

#light.on { color: #1a7f37; }

#lights.on {   box-shadow: 0 0 5px 5px #eded24; }
#infrared.on { box-shadow: 0 0 5px 5px #ff0000; }

/* Admin page specifics */
.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #cbdcf0; }
.actions { display: flex; gap: 6px; }
a { color: #065fb8; text-decoration: none; }


.line {
    fill: none;
    stroke-width: 2px;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}