:root{
  --mac-bg:#bdb7ab;
  --mac-bg2:#d7d1c4;
  --mac-paper:#f3efe6;
  --mac-panel:#e4ddd0;
  --mac-panel-dark:#cfc7b8;
  --mac-text:#111111;
  --mac-muted:#4f4a42;
  --mac-line:#6f695f;
  --mac-blue:#1f4b91;
  --mac-blue-hi:#4d79bf;
  --mac-green:#2b6b46;
  --mac-red:#8b2f2f;
  --mac-yellow:#8a6a1f;
  --mac-shadow:6px 6px 0 rgba(0,0,0,.28);
  --mac-inset:inset 2px 2px 0 rgba(255,255,255,.95), inset -2px -2px 0 rgba(0,0,0,.18);
  --mac-font-ui:"Chicago", "Charcoal", "Geneva", "Helvetica Neue", Arial, sans-serif;
  --mac-font-body:"Geneva", "Helvetica Neue", Arial, sans-serif;
  --mac-font-mono:"Monaco", "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, rgba(0,0,0,.04) 1px 2px), linear-gradient(180deg, var(--mac-bg), var(--mac-bg2)) !important;
  color:var(--mac-text) !important;
  font-family:var(--mac-font-ui) !important;
  font-size:14px;
  line-height:1.4;
  letter-spacing:.01em;
}
a{color:var(--mac-blue) !important;text-decoration:none}
a:hover{color:#13294c !important;text-decoration:underline}
header,.header,.extra-page-header{
  background:linear-gradient(180deg, #ece7dd, #cfc7b8) !important;
  border-bottom:1px solid var(--mac-line) !important;
  box-shadow:var(--mac-inset) !important;
  color:var(--mac-text) !important;
}
h1,h2,h3,h4,h5,h6,.page-title,.chart-header,.stat-card-header,.extra-page-title,.modal-header h3,.panel h2,.indicator-label,.label,th,.privacy-link strong,.brand-title strong,.server-caption{
  font-family:var(--mac-font-ui) !important;
  text-transform:uppercase;
  letter-spacing:.08em;
}
h1,.page-title{color:var(--mac-text) !important}
.subtitle,.small,.muted,.stat-label,.privacy-link span,.server-photo-link,.extra-footer,footer,p,li,td,label,input,select,textarea,button{
  font-family:var(--mac-font-body) !important;
}
main,.wrap,.container{color:var(--mac-text) !important}
.card,.panel,.hero,.seo-card,.events-container,.controls,.stat-card,.chart-container,.modal-content,.modal-card,.login-box,.day,.indicator,.stat-item,.connection-status,.gdpr-notice,.error-box{
  background:linear-gradient(180deg, var(--mac-paper), var(--mac-panel)) !important;
  color:var(--mac-text) !important;
  border:1px solid var(--mac-line) !important;
  border-radius:6px !important;
  box-shadow:var(--mac-inset), var(--mac-shadow) !important;
}
.feature,.cd-box,.server-photo,.bar-value,table,tbody tr{
  background:linear-gradient(180deg, #f7f4ed, #d7d0c2) !important;
  color:var(--mac-text) !important;
  border:1px solid var(--mac-line) !important;
  box-shadow:var(--mac-inset) !important;
}
.btn,button,input[type="submit"],input[type="button"],.btn-large,.back-button,.modal-close{
  background:linear-gradient(180deg, #f7f4ed, #d3ccbf) !important;
  color:var(--mac-text) !important;
  border:1px solid var(--mac-line) !important;
  border-radius:4px !important;
  box-shadow:var(--mac-inset), 3px 3px 0 rgba(0,0,0,.24) !important;
  font-family:var(--mac-font-ui) !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase;
}
.btn:hover,button:hover,input[type="submit"]:hover,input[type="button"]:hover,.btn-large:hover,.back-button:hover,.modal-close:hover{
  background:linear-gradient(180deg, #ffffff, #d7d0c2) !important;
  transform:translate(1px,1px);
}
.btn.primary,.btn-primary,.btn-success,.btn-large,.connection-status.connected{
  background:linear-gradient(180deg, #d7e0ef, #9fb3d0) !important;
  color:#182234 !important;
  border-color:#61728c !important;
  text-shadow:none !important;
}
.btn-danger,.connection-status.disconnected{
  background:linear-gradient(180deg, #ecd8d6, #d7b6b1) !important;
  border-color:#8b5f5f !important;
}
.btn-secondary{
  background:linear-gradient(180deg, #ece7dd, #c9c0b0) !important;
  border-color:#7c7468 !important;
}
.btn-danger,.status-aperto,.badge-ko,.battery-low,.risk-high,.connection-status.disconnected{color:var(--mac-red) !important}
.btn-secondary,.status-chiuso,.badge-ok,.battery-high,.risk-low{color:var(--mac-green) !important}
.btn-small,.btn.sm,.cd-label,.indicator-label,.server-caption,.extra-page-title,.brand-title span,.small,.muted{font-size:11px !important;letter-spacing:.06em !important}
.cd-value,.big,.stat-value,code,pre,.bar-count{font-family:var(--mac-font-mono) !important}
input,select,textarea{
  background:#fbf8f1 !important;
  color:var(--mac-text) !important;
  border:1px solid var(--mac-line) !important;
  border-radius:4px !important;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.85), inset -1px -1px 0 rgba(0,0,0,.12) !important;
}
table{border-collapse:collapse !important;width:100%}
thead th,th{background:#cbc4b6 !important;color:var(--mac-text) !important;border:1px solid var(--mac-line) !important;font-size:11px !important}
td{color:var(--mac-text) !important;border-color:var(--mac-line) !important}
tr:nth-child(even),.events-table tr:hover{background:#ebe5d9 !important}
.logo,.logo-footer,.logo img,.brand img,.hero-image img,.server-photo img{filter:grayscale(1) contrast(1.1)}
.modal-backdrop,.modal{background:rgba(22,22,22,.4) !important}
footer,.extra-footer{
  background:linear-gradient(180deg, #cec7b9, #c3bcaf) !important;
  border-top:1px solid var(--mac-line) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7) !important;
  color:var(--mac-muted) !important;
}
footer *, .extra-footer *{color:inherit !important}
footer a, .extra-footer a{color:var(--mac-blue) !important}
footer strong, .extra-footer strong{color:#2f2a23 !important}
.event-type,.badge,.sensor-type,.chip,.status-badge{
  border-radius:4px !important;
  background:#ece6da !important;
  color:var(--mac-text) !important;
  border:1px solid var(--mac-line) !important;
  box-shadow:var(--mac-inset) !important;
}
.gdpr-notice,.ok,.message.success{background:#dde8db !important;color:#19311f !important}
.message.error,.errors,.error,.blocked{background:#ecd8d6 !important;color:#5a1f1f !important}
.warning,.badge.warn,.badge-warn{background:#efe5c8 !important;color:#5d4a17 !important}
.stat-item strong,.stat-value,.big,.indicator-value,.page-title,.header h1,.header-left h1,.logo,.brand-text{color:#1d1914 !important}
.bar-fill{background:linear-gradient(180deg, #d7e0ef, #9fb3d0) !important;border-right:1px solid #61728c !important}
@media (max-width: 768px){body{font-size:13px}}