/* Reprise de l'apparence des anciennes pages beezbee-disp-* / beezbee-Acc-* */
:root {
  --page-grey: grey;
  --bar-grey: lightgrey;
  --card: #ffffff;
  --weight: purple;
  --temp: orange;
  --hum: blue;
  --batt: red;
  --muted: grey;
  --up: #00ff00;
  --down: #f01c35;
}
* { box-sizing: border-box; }
body { margin: 8px; font-family: "Times New Roman", Times, serif; }
body.device { background: var(--page-grey); }
body.account { background: #ffffff; }

/* --- Page balance --------------------------------------------------------- */
.top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.6%; margin-bottom: 10px; }
.widget, .curve {
  background: var(--card); width: 14.5%; min-width: 150px; height: 200px;
  margin-bottom: 10px; text-align: center; display: flex; flex-direction: column;
  justify-content: center; line-height: normal;
}
.widget .label { font-size: 24px; }
.widget .value { font-size: 48px; }
.widget .delta { font-size: 24px; margin-top: 4px; }
.widget .since { font-size: 16px; }
.c-weight { color: var(--weight); } .c-temp { color: var(--temp); }
.c-hum { color: var(--hum); } .c-batt { color: var(--batt); }
.tri-down, .tri-up { width: 0; height: 0; margin: 4px auto; border-left: 10px solid transparent; border-right: 10px solid transparent; }
.tri-down { border-top: 16px solid var(--down); }
.tri-up { border-bottom: 16px solid var(--up); }
.curve { margin-left: auto; color: var(--muted); }
.curve .big { font-size: 24px; }
.curve .time { font-size: 20px; margin: 8px 0; }
.curve a { font-size: 16px; color: #551a8b; }
.logo { width: 240px; height: auto; max-height: 200px; object-fit: contain; background: #fff; }

.bar { background: var(--bar-grey); min-height: 30px; font-size: 20px; padding: 2px 0 2px 50px; }
.chart { background: #fff; height: 400px; margin-bottom: 10px; width: 100%; }
.row { display: flex; gap: 1%; }
.row > div { width: 49.5%; }
@media (max-width: 900px) {
  .row { display: block; }
  .row > div { width: 100%; }
  .widget, .curve { width: 48%; }
  .logo { width: 48%; }
  .bar { padding-left: 12px; font-size: 17px; }
}

/* --- Espace utilisateur ------------------------------------------------- */
.hello { text-align: center; margin: 8px auto 24px; max-width: 85%; }
.hello .h1 { font-size: 48px; }
.hello .h2 { font-size: 24px; }
.hello .h3 { font-size: 16px; }
.hive { position: relative; width: 600px; max-width: 100%; margin: 0 auto 40px; text-align: center; }
.hive .photo { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #333 center / cover no-repeat; }
.hive .overlay { position: absolute; inset: 38% 0 auto 0; color: #fff; text-shadow: 0 1px 3px #000; }
.hive .overlay .label { font-size: 24px; }
.hive .overlay .value { font-size: 48px; }
.hive .overlay .delta { font-size: 24px; }
.hive .overlay .since { font-size: 18px; }
.hive .brand { position: absolute; top: 72%; left: 0; right: 0; }
.hive .brand img { height: 60px; }
.btn-acceder { display: block; width: 250px; margin: 20px auto; line-height: 80px; border-radius: 10em;
  background: grey; color: #fff; font-weight: bold; text-decoration: none; font-size: 18px; }
.btn-acceder:hover { color: #000; }
.hive .name { color: grey; font-size: 24px; }
.hive .rename { font-size: 16px; }
.camera { display: block; width: 600px; max-width: 100%; height: 420px; border: 0; margin: 0 auto 30px; }