.ek-solar {
--ek-bg: #fff;
--ek-fg: #17250f;
--ek-muted: #56664a;
--ek-line: #dbe4cb;
--ek-accent: #3f7400;
--ek-soft: #f3f7ea;
--ek-on-accent: #fff;
padding: 1.25rem;
margin: 1.5rem 0;
color: var(--ek-fg);
background: var(--ek-bg);
border: 1px solid var(--ek-line);
border-radius: 12px;
}
@media (prefers-color-scheme: dark) {
.ek-solar {
--ek-bg: #152010;
--ek-fg: #e8f1db;
--ek-muted: #9bb08a;
--ek-line: #27371a;
--ek-accent: #a4dc4f;
--ek-soft: #1b2915;
--ek-on-accent: #10200a;
}
}
.ek-solar-form,
.ek-hyp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 1rem;
}
.ek-field {
position: relative;
display: flex;
flex-direction: column;
gap: .25rem;
}
.ek-field.ek-wide {
grid-column: 1 / -1;
}
.ek-field label {
font-size: .875rem;
font-weight: 600;
}
.ek-field small,
.ek-note {
font-size: .8125rem;
color: var(--ek-muted);
}
.ek-field input,
.ek-field select {
width: 100%;
padding: .55rem .7rem;
font: inherit;
color: var(--ek-fg);
background: var(--ek-soft);
border: 1px solid var(--ek-line);
border-radius: 8px;
box-sizing: border-box;
}
.ek-field input:focus,
.ek-field select:focus {
outline: 2px solid var(--ek-accent);
outline-offset: 1px;
}
.ek-suggest {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 20;
margin: .2rem 0 0;
padding: 0;
list-style: none;
background: var(--ek-bg);
border: 1px solid var(--ek-line);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}
.ek-suggest li {
padding: .55rem .8rem;
cursor: pointer;
}
.ek-suggest li:hover,
.ek-suggest li:focus {
background: var(--ek-soft);
outline: none;
}
.ek-hyp {
margin: 1rem 0;
}
.ek-hyp summary {
cursor: pointer;
font-weight: 600;
}
.ek-hyp-grid {
margin-top: .8rem;
}
.ek-solar-status {
min-height: 1.4em;
color: var(--ek-muted);
}
.ek-solar-charts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
.ek-solar-charts .ek-canvas {
height: 280px;
}
.ek-btn {
display: inline-block;
padding: .75rem 1.2rem;
font-weight: 600;
color: var(--ek-on-accent, #fff);
text-decoration: none;
background: var(--ek-accent);
border-radius: 8px;
}
.ek-btn:hover {
filter: brightness(1.08);
}
.ek-solar-cta {
margin: 1.2rem 0 .6rem;
}