:root{
	font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:#172033;
	background:#f4f6f8;
	--chart-grid:#e6eaf0;
	--chart-text:#667085;
	--power-line:#c77824;
	--energy-line:#2877a8
}
*{
	box-sizing:border-box
} 
body{
	margin:0
} 
button,input{
	font:inherit
}
.wrap{
	max-width:1280px;
	margin:auto;
	padding:32px
}
header{
	display:flex;
	justify-content:space-between;
	gap:24px;
	align-items:center;
	margin-bottom:24px
}
h1,h2{
	margin:0
}
h1{
	font-size:2rem
}
p{
	margin:.35rem 0;
	color:#667085
}
.actions{
	display:flex;
	align-items:center;
	gap:16px
}
.menu-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border: 1px solid #d0d5dd;
	border-radius: 10px;
	background: white;
	color: #344054;
	text-decoration: none;
	font-weight: 700;
	white-space: nowrap;
}
.menu-button:hover {
  background: #f8fafc;
}
.status{
	font-size:.9rem;
	color:#39734d
}
.status.offline{
	color:#b54708
}
button{
	border:0;
	border-radius:10px;
	padding:11px 16px;
	font-weight:700;
	background:#172033;
	color:white;
	cursor:pointer
}
button:disabled{
	opacity:.6;
	cursor:default
}
.secondary{
	background:#eef2f6;
	color:#344054
}
.summary{
	display:grid;
	grid-template-columns:
	repeat(3,minmax(0,1fr));
	gap:14px;margin-bottom:18px
}
.summary>div{
	background:white;
	border:1px solid #e4e7ec;
	border-radius:14px;
	padding:16px
}
.summary strong{
	display:block;
	font-size:1.35rem
}
.summary small{
	color:#667085
}
.grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	gap:18px
}
.card{
	background:white;
	border:1px solid #e4e7ec;
	border-radius:16px;
	padding:20px;
	box-shadow:0 2px 8px rgba(16,24,40,.04)
}
.card-head{
	display:flex;
	justify-content:space-between;
	gap:12px
}
.card-head>div{
	min-width:0
}
.card-head strong{
	display:block;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}
.card-head small{
	display:block;
	color:#667085;
	margin-top:4px
}
.shelly-name{
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	font-size:.72rem!important;
	color:#98a2b3!important
}
.live-badge{
	font-size:.8rem;
	font-weight:750
}
.live-badge.on{
	color:#238636
}
.live-badge.off{
	color:#667085
}
.live-badge.unreachable{
	color:#b54708
}
.metrics{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;margin:26px 0
}
.metrics>div{
	background:#f8fafc;
	border-radius:12px;
	padding:16px
}
.value{
	font-size:2.1rem;
	font-weight:750
}
.unit{
	font-size:1rem;
	margin-left:3px
}
.metrics small{
	display:block;
	color:#667085;
	margin-top:4px
}
.submetrics{
	display:flex;
	justify-content:space-between;
	gap:12px;
	margin:-10px 0 20px;
	color:#667085;
	font-size:.84rem
}
.submetrics strong{
	color:#344054
}
.card footer{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	border-top:1px solid #eef1f4;
	padding-top:14px
}
.meta-row{
	display:flex;
	flex-wrap:wrap;
	gap:8px 12px;
	color:#667085;
	font-size:.82rem
}
.card-buttons{
	display:flex;
	flex-wrap: wrap;
	gap:8px;
	margin-left:auto
}
.card-buttons button{
	flex: 0 1 auto;
	min-width: 0;
	white-space: nowrap;
}
.card-buttons button:last_child:nth-child(odd) {
	grid-columns: 1 / -1;
}
.history-button,.switch-button{
	padding:8px 11px;
	background:#eef2f6;
	color:#283548;
	white-space:nowrap
}
.rename-button{
	padding:8px 11px;
	background:#fff;
	color:#344054;
	border:1px solid #d0d5dd;
	white-space:nowrap
}
.switch-button.on{
	background:#172033;
	color:#fff
}
.empty{
	background:white;
	padding:40px;
	border-radius:16px;
	text-align:center;
	color:#667085
}
.history-dialog,.form-dialog{
	width:min(980px,calc(100vw - 32px));
	max-height:calc(100vh - 32px);
	padding:0;
	border:0;
	border-radius:18px;
	box-shadow:0 24px 70px rgba(16,24,40,.25);
	color:#172033
}
.form-dialog{
	width:min(520px,calc(100vw - 32px))
}
.history-dialog::backdrop,.form-dialog::backdrop{
	background:rgba(15,23,42,.48)
}
.history-shell,.form-shell{
	padding:24px;
	overflow:auto;
	max-height:calc(100vh - 32px)
}
.history-head{
	display:flex;
	justify-content:space-between;
	gap:20px;
	align-items:flex-start
}
.history-head h2{
	margin:.1rem 0 0;
	font-size:1.45rem
}
.eyebrow{
	margin:0;
	color:#667085;
	font-size:.78rem;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.08em
}
.history-subtitle{
	font-size:.9rem
}
.icon-button{
	width:40px;
	height:40px;
	padding:0;
	border-radius:50%;
	background:#eef2f6;
	color:#344054;
	font-size:1.6rem;
	line-height:1
}
.periods{
	display:flex;
	gap:8px;
	margin:20px 0
}
.period{
	background:#eef2f6;
	color:#344054;
	padding:9px 14px
}
.period.active{
	background:#172033;
	color:white
}
.history-state{
	padding:48px 20px;
	text-align:center;
	color:#667085;
	background:#f8fafc;
	border-radius:14px
}
.chart-card{
	margin-top:16px;
	border:1px solid #e4e7ec;
	border-radius:14px;
	padding:16px;
	background:#fff
}
.chart-title-row{
	display:flex;
	justify-content:space-between;
	gap:16px;
	align-items:center;
	margin-bottom:8px
}
.chart-title-row>div{
	display:flex;
	align-items:center;
	gap:8px
}
.legend-dot{
	width:10px;
	height:10px;
	border-radius:50%;
	display:inline-block
}
.power-dot{
	background:var(--power-line)
}
.energy-dot{
	background:var(--energy-line)
}
.chart-stats{
	font-size:.82rem;
	color:#667085;
	text-align:right
}
.canvas-wrap{
	width:100%;
	overflow:hidden
}
canvas{
	display:block;
	max-width:100%
}
.monthly-list{
	display:grid;
	gap:1px;
	background:#eef1f4;
	border-radius:10px;
	overflow:hidden
}
.monthly-row{
	display:flex;
	justify-content:space-between;
	gap:16px;
	background:#fff;
	padding:11px 12px
}
.monthly-row span{
	color:#667085
}
.form-shell label{
	display:block;
	font-weight:700;
	margin-top:20px
}
.form-shell label span{
	font-weight:400;
	color:#667085
}
.form-shell input{
	display:block;
	width:100%;
	margin-top:8px;
	border:1px solid #d0d5dd;
	border-radius:10px;
	padding:11px 12px;
	color:#172033;
	background:#fff
}
.form-actions{
	display:flex;
	justify-content:flex-end;
	gap:10px;
	margin-top:22px
}
.error{
	color:#b42318;
	background:#fef3f2;
	border-radius:10px;
	padding:10px 12px;
	margin-top:14px
}
@media(max-width:720px){
	.wrap{padding:18px
}
header{
	align-items:flex-start;
	flex-direction:column
}
.menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: white;
  color: #344054;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}
.actions{
	width:100%;
	justify-content:space-between
}
.summary{
	grid-template-columns:1fr
}
.metrics{
	grid-template-columns:1fr
}
.card footer{
	align-items:flex-start;
	flex-direction:column
}
.card-buttons{
	width:100%;
	margin-left:0;
	display: grid;
	grid-template-columns: 1fr 1fr;
/*	flex-wrap:wrap*/
}
.card-buttons button{
	width: 100%;
/*	flex:1*/
}
.card-buttons button:lastchild:nth-child(odd) {
	grid-column: 1 / -1;
}
.history-shell,.form-shell{
	padding:18px
}
.chart-title-row{
	align-items:flex-start;
	flex-direction:column
}
.chart-stats{
	text-align:left
}
}