html,body{
    background:#111;
    color:#cfd8dc;
    font-family:Arial,Helvetica,sans-serif;
    margin:40px;
}

/* ===== Výroba – detail ===== */
.energy-page{margin:0;min-height:100vh;background:radial-gradient(circle at 75% 0,rgba(255,184,77,.075),transparent 32rem),radial-gradient(circle at 5% 25%,rgba(35,209,139,.05),transparent 28rem),#0b0f12}
.energy-shell{width:min(1220px,calc(100% - 34px));margin:0 auto;padding:28px 0 48px}
.energy-header{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px}
.energy-header h1{margin:12px 0 4px;color:#edf7fa;font-size:clamp(28px,4vw,42px)}
.energy-fv-link{padding:10px 15px;border:1px solid rgba(255,193,86,.35);border-radius:999px;color:#ffd166;background:rgba(255,193,86,.06)}

.energy-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.energy-metric{padding:18px 20px;border:1px solid var(--line,#29343a);border-radius:16px;background:linear-gradient(145deg,rgba(20,27,32,.98),rgba(14,19,23,.98));box-shadow:0 18px 45px rgba(0,0,0,.18)}
.energy-metric span{display:block;color:#82949f;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.energy-metric strong{display:block;margin-top:7px;color:#edf7fa;font-size:27px}
.energy-metric small{color:#82949f}
.energy-metric.current strong{color:#23d18b}.energy-metric.reference strong{color:#75cfee}
.energy-metric.difference.positive strong{color:#23d18b}.energy-metric.difference.negative strong{color:#ff6677}.energy-metric.difference.neutral strong{color:#a8bac3}

.energy-grid{display:grid;grid-template-columns:1.25fr 1fr .82fr;gap:16px;align-items:start}
.energy-panel{overflow:hidden;border:1px solid var(--line,#29343a);border-radius:18px;background:linear-gradient(145deg,rgba(20,27,32,.98),rgba(14,19,23,.98));box-shadow:0 18px 45px rgba(0,0,0,.20)}
.energy-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:19px 20px 15px;border-bottom:1px solid var(--line,#29343a)}
.energy-panel-head h2{margin:0;color:#dce9ee;font-size:18px}.energy-panel-head p{margin:5px 0 0;color:#82949f;font-size:12px}.energy-panel-head>span{color:#75cfee;font-size:13px}
.energy-list{padding:8px 14px 13px;max-height:630px;overflow:auto;scrollbar-color:#34444c transparent}
.energy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;min-height:35px;padding:4px 6px;border-bottom:1px solid rgba(130,148,159,.1);color:#aabac2;font-size:13px}
.energy-list-current .energy-row{grid-template-columns:1fr 78px auto}.energy-row strong{color:#e2eef2;font-size:13px}.energy-row.today{margin:3px -2px;padding-left:8px;padding-right:8px;border:1px solid rgba(35,209,139,.25);border-radius:9px;background:rgba(35,209,139,.06)}
.energy-row.today .energy-date,.energy-row.today strong{color:#23d18b}.energy-sun{color:#9fb1b9;text-align:center}.energy-date{font-variant-numeric:tabular-nums}
.energy-page .perf-panel{margin-top:18px;line-height:1.65}

@media(max-width:900px){.energy-grid{grid-template-columns:1fr 1fr}.energy-panel.months{grid-column:1/-1}.energy-list{max-height:none}}
@media(max-width:650px){.energy-shell{width:min(100% - 20px,1220px);padding-top:18px}.energy-header{align-items:flex-start;flex-direction:column}.energy-metrics,.energy-grid{grid-template-columns:1fr}.energy-panel.months{grid-column:auto}.energy-panel-head{padding:17px 15px}.energy-list{padding-left:9px;padding-right:9px}}

/* ===== FV detail ===== */
.solar-page{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at 78% 0,rgba(255,185,72,.08),transparent 31rem),
        radial-gradient(circle at 8% 20%,rgba(33,212,232,.055),transparent 28rem),
        #0b0f12;
}

.solar-shell{
    width:min(1180px,calc(100% - 34px));
    margin:0 auto;
    padding:28px 0 48px;
}

.solar-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:22px;
    margin-bottom:22px;
}

.solar-header h1{
    margin:12px 0 4px;
    color:#edf7fa;
    font-size:clamp(28px,4vw,42px);
}

.back-link{color:#75cfee;font-size:13px}

.solar-state{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:5px;
    padding:14px 18px;
    border:1px solid rgba(255,185,72,.23);
    border-radius:14px;
    background:rgba(255,185,72,.05);
    color:#a9bac2;
}

.solar-state strong{color:#ffd166;font-size:19px}

.solar-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:18px;
}

.solar-metric{
    position:relative;
    overflow:hidden;
    padding:18px 20px;
    border:1px solid var(--line,#29343a);
    border-radius:16px;
    background:linear-gradient(145deg,rgba(20,27,32,.98),rgba(14,19,23,.98));
    box-shadow:0 18px 45px rgba(0,0,0,.18);
}

.solar-metric::after{
    content:"";
    position:absolute;
    inset:auto -20px -40px auto;
    width:100px;
    height:100px;
    border-radius:50%;
    background:currentColor;
    opacity:.055;
}

.solar-metric span{display:block;color:#82949f;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.solar-metric strong{display:block;margin-top:7px;font-size:26px;color:#edf7fa}
.solar-metric small{color:#82949f}
.solar-metric.power{color:#23d18b}.solar-metric.power strong{color:#23d18b}
.solar-metric.year{color:#ffd166}.solar-metric.year strong{color:#ffd166}
.solar-metric.battery{color:#75cfee}.solar-metric.battery strong{color:#75cfee}

.solar-chart-panel{
    margin-top:16px;
    padding:22px 24px 20px;
    border:1px solid var(--line,#29343a);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(20,27,32,.98),rgba(14,19,23,.98));
    box-shadow:0 18px 45px rgba(0,0,0,.20);
}

.solar-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.solar-panel-head h2{margin:0;color:#dce9ee;font-size:19px}
.solar-panel-head p{margin:5px 0 0;color:#82949f;font-size:13px}

.solar-legend{display:flex;gap:15px;color:#a8bac3;font-size:12px}
.solar-legend span::before{content:"";display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;background:#23d18b}
.solar-legend .battery-today::before{background:#75cfee}
.solar-legend .yesterday::before{background:#7e8e96}

.solar-chart-wrap{position:relative;height:360px;margin-top:14px}
.solar-chart-wrap canvas{width:100%!important;height:100%!important;margin:0;padding:0;border:0;background:transparent}

.solar-loading,.perf-panel{
    margin-top:14px;
    padding:11px 14px;
    border:1px solid var(--line,#29343a);
    border-radius:10px;
    color:#82949f;
    background:#10161a;
    font-size:12px;
}
.solar-loading.error{color:#ff7a88;border-color:rgba(255,102,119,.35)}

@media(max-width:720px){
    .solar-shell{width:min(100% - 20px,1180px);padding-top:18px}
    .solar-header{align-items:flex-start;flex-direction:column}
    .solar-state{align-items:flex-start}
    .solar-metrics{grid-template-columns:1fr}
    .solar-chart-panel{padding:18px 13px}
    .solar-panel-head{flex-direction:column}
    .solar-chart-wrap{height:310px}
}

/* mobil */
@media (max-width: 600px){
    html,body{
        margin:10px;
    }
}

h3{
    color:#5F8F96;
}

h2{
    color:#7DC8D4;
}

table{
    border-collapse:collapse;
    width:900px;
    background:#1b1b1b;
}

th{
    background:#2f2f2f;
    color:#fff;
    font-weight:bold;
}

td,th{
    border:1px solid #333;
    padding:8px;
}

tr:nth-child(even){
    background:#161616;
}

a{
    color:#6fa8ff;
    text-decoration:none;
}

a:hover{
    color:#9ec3ff;
}

canvas{
    background:#1b1b1b;
    border:1px solid #333;
    margin-top:20px;
}

table{
    border-collapse:collapse;
    width:900px;
    background:#1b1b1b;
    color:#ddd;
}

.temp{
    font-size:22px;
    font-weight:bold;
    color:#fff;
}

tr:hover{
    background:#222;
}

canvas{
    background:#1b1b1b;
    border:1px solid #333;
    margin-top:20px;
    border-radius:6px;
}

.today_stats{
margin:10px 0 20px 0;
font-size:16px;
}

.min_today{
color:#4da6ff;
margin-right:20px;
font-weight:bold;
}

.max_today{
color:#ff6666;
font-weight:bold;
}

table td:first-child{
color:#9ad1ff;
font-weight:bold;
}

canvas{
background:#151515;
border-radius:8px;
border:1px solid #333;
margin-top:20px;
}

.cards{
display:flex;
flex-wrap:wrap;
gap:15px;
margin-bottom:25px;
justify-content:flex-start;
align-items:flex-start;
}

.card{
background:#161616;
border-radius:10px;
padding:15px;
width:180px;
box-shadow:0 0 8px rgba(0,0,0,0.4);
border:1px solid #222;
transition:transform 0.15s, box-shadow 0.15s;
text-decoration:none;
color:inherit;
display:block;
}

.card_title{
color:#9ad1ff;
font-weight:bold;
margin-bottom:6px;
}

.card_temp{
font-size:28px;
font-weight:bold;
margin-bottom:6px;
}

.card_meta{
font-size:13px;
color:#9aa5ab;
}

.card_link{
margin-top:8px;
}

.card_link a{
color:#6fa8ff;
text-decoration:none;
}

/* stav senzoru */

.card.ok{
border-left:4px solid #00c853;
}

.card.warn{
border-left:4px solid #ffb300;
}

.card.dead{
border-left:4px solid #ff5252;
}

.card:hover{
transform:translateY(-2px);
box-shadow:0 0 12px rgba(0,0,0,0.6);
}

.measured{
font-size:12px;
color:#7f8c8d;
}

.card_link a{
display:block;
margin-top:8px;
color:#6fa8ff;
text-decoration:none;
}

.unit{
font-size:16px;
color:#7f8c8d;
margin-left:3px;
}

.sensor_status{
font-size:12px;
margin-bottom:4px;
}

.sensor_status.ok{
color:#00e676;
}

.sensor_status.warn{
color:#ffb300;
}

.sensor_status.dead{
color:#ff5252;
}

.sparkbox{
height:40px;
width:100%;
margin:6px 0;
}

.sparkbox canvas{
height:40px !important;
width:100% !important;
background:transparent;
border:none;
}

.sparkbox{
height:40px;
width:160px;
}

.sparkbox canvas{
background:transparent !important;
border:none !important;
}

.trend{
font-size:16px;
margin-left:6px;
opacity:0.7;
}

.trend{
font-size:16px;
margin-left:6px;
font-weight:bold;
}

.trend_up{
color:#ff6666;
}

.trend_down{
color:#4da6ff;
}

.delta{
font-size:13px;
margin-left:6px;
opacity:0.7;
}

.group{
width:100%;
margin-top:25px;
margin-bottom:8px;
color:#9ad1ff;
font-weight:bold;
}

.group_cards{
display:flex;
flex-wrap:wrap;
gap:15px;
margin-bottom:25px;
}

canvas{
margin-top:20px;
}

.hist_min{
color:#6fa8ff;
margin-left:20px;
font-weight:bold;
}

.hist_max{
color:#ff6666;
margin-left:10px;
font-weight:bold;
}

.today_line{
margin-bottom:6px;
}

.hist_line{
opacity:0.8;
font-size:14px;
}

.graph_header{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:10px;
}

.graph_info{
text-align:right;
font-size:14px;
}

.graph_info form{
margin-top:6px;
}

.graph_right{
float:right;
text-align:right;
margin-bottom:10px;
}

.graph_right form{
margin-top:6px;
}

.battery{
color:#9ad1ff;
font-weight:bold;
}

.battery{
font-size:12px;
margin-bottom:4px;
}

.bat_ok{
color:#00e676;
}

.bat_warn{
color:#ffb300;
}

.bat_low{
color:#ff5252;
}

/* =====================================================
   LOGIN
===================================================== */

body.login{
    margin:0;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#121212;
    font-family:Arial;
    color:#cfd8dc;
}

.login_box{
    background:#1e1e1e;
    padding:30px;
    border-radius:12px;
    width:280px;
    box-shadow:0 0 20px rgba(0,0,0,0.5);
}

.login_box input{
    width:100%;
    padding:10px;
    margin:8px 0;
    border:none;
    border-radius:6px;
    background:#2a2a2a;
    color:#fff;
}

.login_box button{
    width:100%;
    padding:10px;
    background:#00e0ff;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

.login_box button:hover{
    background:#00bcd4;
}

.login_box .error{
    color:#ff5252;
    margin-top:10px;
}

.total_small {
    margin: 6px 0 10px 0;
    font-size: 13px;
    color: #9aa5ab;
}

.total_small b {
    color: #cfd8dc;
}

.card.card-wide{
    flex: 0 0 300px;
    max-width: 300px;
}

/* Souvislý pruh fotovoltaiky na hlavním přehledu */
.production-strip{
    box-sizing:border-box;
    display:grid;
    grid-template-columns:minmax(190px,.82fr) minmax(300px,1.35fr) minmax(230px,.95fr) minmax(250px,.92fr);
    gap:14px;
    width:100%;
    margin-bottom:10px;
}

.production-strip .production-card{
    width:auto;
    min-width:0;
    max-width:none;
    height:100%;
    min-height:178px;
    margin:0;
}

.production-strip .epever-card{
    border:1px solid rgba(35,209,139,.42);
    border-left:4px solid #23d18b;
    background:linear-gradient(145deg,rgba(15,35,27,.98),rgba(14,24,22,.98));
}

.epever-battery{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:3px 7px;
    margin-top:3px;
}

.epever-battery span{
    color:#75cfee;
    font-weight:700;
}

.production-days > div:not(.card_title),
.production-month > div:not(.card_title){
    padding:2px 0;
    border-bottom:1px solid rgba(130,148,159,.08);
}

.production-days > div:last-child,
.production-month > div:last-child{
    border-bottom:0;
}

.production-totals{
    display:grid!important;
    grid-template-columns:1fr;
    grid-template-rows:1fr 1fr;
    gap:0;
    padding:0!important;
}

.production-total-item{
    display:flex;
    min-width:0;
    padding:16px 15px;
    flex-direction:column;
    justify-content:center;
}

.production-total-item + .production-total-item{
    border-top:1px solid rgba(130,148,159,.17);
}

.production-total-item strong{
    color:#edf7fa;
    font-size:24px;
    white-space:nowrap;
}

.production-total-item small{
    margin-top:4px;
    color:#82949f;
    white-space:nowrap;
}

@media(max-width:1250px){
    .production-strip{
        grid-template-columns:repeat(6,minmax(0,1fr));
    }
    .production-strip .epever-card{grid-column:span 2}
    .production-strip .production-days{grid-column:span 4}
    .production-strip .production-month{grid-column:span 2}
    .production-strip .production-totals{grid-column:span 4}
}

@media(max-width:900px){
    .production-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
    .production-strip .epever-card,
    .production-strip .production-days,
    .production-strip .production-month,
    .production-strip .production-totals{grid-column:auto}
    .production-strip .production-days{grid-column:1/-1}
}

@media(max-width:600px){
    .production-strip{grid-template-columns:1fr}
    .production-strip .production-days{grid-column:auto}
    .production-strip .production-card{min-height:0}
    .production-totals{
        grid-template-columns:1fr;
        grid-template-rows:auto auto;
    }
}

.meteo-container {
    max-width: 1100px;
    margin: auto;
}

.meteo-main {
    background: #0f1f17;
    border: 1px solid #1e3a2f;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.meteo-main .state {
    font-size: 32px;
    margin-bottom: 10px;
}

.meteo-main .big {
    font-size: 24px;
    font-weight: bold;
}

.meteo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.meteo-item {
    background: #161616;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.meteo-history {
    background: #161616;
    border-radius: 10px;
    padding: 10px;
}

.meteo-row {
    display: grid;
    grid-template-columns: 90px 60px 80px 100px 100px 100px;
    padding: 6px 0;
    border-bottom: 1px solid #222;
}

.meteo-row:last-child {
    border-bottom: none;
}

.gauges{
    display:flex;
    gap:20px;
    margin-top:20px;
}

.gauge{
    background:#161616;
    padding:15px;
    border-radius:10px;
    width:200px;
    border:1px solid #222;
}

.gauge_title{
    color:#9ad1ff;
    margin-bottom:6px;
}

.gauge_value{
    font-size:22px;
    font-weight:bold;
    margin-bottom:10px;
}

.gauge_bar{
    height:10px;
    background:#333;
    border-radius:5px;
    overflow:hidden;
}

.gauge_fill{
    height:100%;
    background:#00e676;
}

.meteo-container{
    max-width:1100px;
    margin:auto;
}

.meteo-main{
    background:#161616;
    padding:20px;
    border-radius:12px;
    border:1px solid #222;
}

.state{
    font-size:26px;
    font-weight:bold;
}

.state_text{
    font-size:16px;
    color:#9aa5ab;
    margin-left:8px;
}

.big{
    font-size:32px;
    margin:10px 0 20px 0;
    color:#00e676;
}

.meteo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:15px;
}

.meteo-item{
    background:#1b1b1b;
    padding:12px;
    border-radius:8px;
    border:1px solid #222;
}

.gauges{
    display:flex;
    gap:20px;
    margin-top:20px;
}

.gauge{
    flex:1;
    background:#1b1b1b;
    padding:15px;
    border-radius:10px;
    border:1px solid #222;
}

.gauge_title{
    color:#9ad1ff;
    margin-bottom:6px;
}

.gauge_value{
    font-size:20px;
    font-weight:bold;
    margin-bottom:10px;
}

.gauge_bar{
    height:10px;
    background:#333;
    border-radius:5px;
    overflow:hidden;
}

.gauge_fill{
    height:100%;
}

.gauge_fill.temp{
    background:#ff7043;
}

.gauge_fill.hum{
    background:#4da6ff;
}

.gauge_fill.pres{
    background:#9ccc65;
}

.meteo-history{
    margin-top:25px;
    background:#161616;
    border-radius:12px;
    padding:15px;
    border:1px solid #222;
}

.history_title{
    color:#9ad1ff;
    margin-bottom:10px;
    font-weight:bold;
}

.meteo-row{
    display:flex;
    justify-content:space-between;
    padding:8px 10px;
    border-bottom:1px solid #222;
    font-size:14px;
}

.meteo-row:last-child{
    border-bottom:none;
}

.h-date{
    color:#9aa5ab;
    width:90px;
}

.h-state{
    width:40px;
    text-align:center;
}

.h-sun{
    color:#ffd54f;
    width:70px;
}

.h-energy{
    font-weight:bold;
    color:#00e676;
}

.h-temp{
    width:110px;
    color:#ff8a65;
}

.h-hum{
    width:70px;
    color:#4fc3f7;
}

.h-pres{
    width:40px;
    text-align:center;
    color:#aed581;
}

.meteo-row.day_good{
    border-left:4px solid #00e676;
    background:rgba(0,230,118,0.05);
}

.meteo-row.day_mid{
    border-left:4px solid #ffd54f;
    background:rgba(255,213,79,0.05);
}

.meteo-row.day_bad{
    border-left:4px solid #555;
    background:rgba(255,255,255,0.02);
}

.meteo-row.header{
    font-weight:bold;
    color:#9ad1ff;
    border-bottom:1px solid #444;
    background:#1f1f1f;
}

/* === STUDNA === */

/* panel (obal) */
.well_panel {
    max-width: 420px;
    margin: 40px auto;
    padding: 25px;
    border-radius: 20px;
    background: linear-gradient(145deg, #1a1f25, #0f1317);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* layout uvnitř */
.well_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

/* === STUDNA TĚLO === */
.well{
    position: relative;
    width: 140px;
    height: 320px;
    border: 3px solid #888;

    /*  méně "bojler", víc "šachta" */
    border-top-left-radius: 8px;
	border-top-right-radius: 8px;

	border-bottom-left-radius: 18px;
	border-bottom-right-radius: 18px;

    overflow: hidden;

    background: linear-gradient(
        to right,
        #0a0d10 0%,
        #111 20%,
        #111 80%,
        #0a0d10 100%
    );

    box-shadow:
        inset 0 0 20px rgba(0,0,0,0.8),
        0 10px 25px rgba(0,0,0,0.4);
}

/* jemná optická hloubka */
.well::before{
    content:"";
    position:absolute;
    top:0;
    left:10%;
    width:80%;
    height:100%;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.03),
        transparent 30%,
        transparent 70%,
        rgba(255,255,255,0.03)
    );
    pointer-events:none;
}

/* === VODA === */
.water{
    position:absolute;
    bottom:0;
    width:100%;
    background: linear-gradient(
        to top,
        #1e88e5 0%,
        #42a5f5 60%,
        #90caf9 100%
    );
    transition: height 0.5s ease;
}

/* hladina */
.water::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background: rgba(255,255,255,0.4);
}

/* teplota vody */
.water_temp{
    position:absolute;
    bottom:40%;
    width:100%;
    text-align:center;
    font-size:13px;
    color:#e3f2fd;
    font-weight:bold;
    text-shadow:0 0 4px rgba(0,0,0,0.6);
    transform: translateY(50%);
}

/* === GHOST HLADINA === */
.water_prev {
    position: absolute;
    bottom: 0;
    width: 100%;
    pointer-events: none;
    z-index: 2;
}

/* vypnutý starý pseudo prvek */
.water_prev::after{
    display:none;
}

/* === LIMITY === */
.limit {
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    z-index: 3;
}

.limit.high {
    bottom: calc(100% - (30 / 440 * 100%));
    background: #ff5252;
}

.limit.low {
    bottom: calc(100% - (350 / 440 * 100%));
    background: #ffb300;
}

/* === LABEL 24h === */
.well_box{
    position: relative;
    display: inline-block;
}

.water_label{
    position:absolute;
    right: 100%;
    margin-right: 8px;
    transform: translateY(50%);
    font-size:11px;
    color:#aaa;
    white-space:nowrap;
    z-index:50;
}

.water_label::before{
    content:"";
    position:absolute;
    right:-6px;
    top:50%;
    width:6px;
    height:1px;
    background:#aaa;
}

/* === DISTANCE === */
.well_distance{
    position:absolute;
    width:100%;
    text-align:center;
    font-size:13px;
    color:#cfd8dc;
    font-weight:bold;
    text-shadow:0 0 4px rgba(0,0,0,0.6);
    transform: translateY(-120%);
    z-index:4;
}

.well_distance::after{
    content:"";
    display:block;
    margin:4px auto 0;
    width:40%;
    height:1px;
    background:#cfd8dc33;
}

/* === INFO BLOK === */
.well_info {
    color: #fff;
    min-width: 140px;
}

.well_big {
    font-size: 28px;
    font-weight: bold;
}

.well_sub {
    font-size: 14px;
    color: #9aa5ab;
    margin-top: 4px;
}

.well_status {
    margin-top: 12px;
    font-size: 14px;
}

.well_trend {
    margin-top: 10px;
    font-size: 14px;
}

.well_mode {
    margin-top: 6px;
    font-size: 13px;
}

.well_day{
    margin-top:8px;
    font-size:13px;
}

.well_week{
    margin-top:6px;
    font-size:13px;
}

.well_alert{
    margin-top:10px;
    font-size:13px;
    color:#ff5252;
}

/* === MOBIL === */
@media (max-width: 600px) {
    .well_wrap {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .well {
        margin: 0 auto;
    }

    .water_label {
        right: 5px;
        color: #ccc;
    }
}

.well_range{
    margin-top:6px;
    font-size:13px;
    color:#9aa5ab;
}

/* =====================================================
   VIZUÁLNÍ SJEDNOCENÍ 2026-10
===================================================== */

:root{
    --bg:#0b0f12;
    --surface:#12181d;
    --surface-2:#171f25;
    --surface-3:#1c252c;
    --line:rgba(154,209,255,.12);
    --line-strong:rgba(154,209,255,.22);
    --text:#dce7ed;
    --muted:#82949f;
    --blue:#75cfee;
    --cyan:#21d4e8;
    --green:#23d18b;
    --orange:#ff9a4b;
    --red:#ff6677;
}

html{
    min-height:100%;
    background:var(--bg);
}

body:not(.login){
    box-sizing:border-box;
    min-height:100vh;
    margin:0 auto;
    padding:30px 36px 56px;
    max-width:1600px;
    color:var(--text);
    background:
        radial-gradient(circle at 18% 0%, rgba(33,212,232,.055), transparent 30rem),
        linear-gradient(180deg, #0c1013 0%, #0a0d10 100%);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

h2{
    margin-top:26px;
    color:var(--blue);
    letter-spacing:-.025em;
}

h3{
    color:var(--blue);
}

a{
    color:#69b7ff;
}

.cards,
.group_cards{
    gap:16px;
}

.card{
    box-sizing:border-box;
    min-height:124px;
    padding:16px 17px;
    background:linear-gradient(145deg, rgba(24,31,36,.97), rgba(17,22,26,.97));
    border:1px solid var(--line);
    border-radius:13px;
    box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.card:hover{
    transform:translateY(-2px);
    border-color:var(--line-strong);
    box-shadow:0 14px 32px rgba(0,0,0,.28);
}

.card.ok{
    border-left:3px solid var(--green);
}

.card.warn{
    border-left:3px solid #ffc857;
}

.card.dead{
    border-left:3px solid var(--red);
}

.card_title{
    color:#87d4ff;
    letter-spacing:.005em;
}

.card_temp{
    letter-spacing:-.03em;
}

.card_meta,
.measured{
    color:var(--muted);
}

.group{
    box-sizing:border-box;
    margin-top:38px;
    padding:0 0 11px;
    border-bottom:1px solid var(--line);
    color:#8bd5f5;
    font-size:18px;
    letter-spacing:.01em;
}

.sparkbox canvas,
canvas{
    box-shadow:none;
}

.meteo-container{
    max-width:1180px;
}

.meteo-main,
.meteo-history{
    background:linear-gradient(145deg, rgba(20,27,32,.98), rgba(15,20,24,.98));
    border:1px solid var(--line);
    box-shadow:0 16px 40px rgba(0,0,0,.2);
}

.meteo-item,
.gauge{
    background:var(--surface-2);
    border:1px solid var(--line);
}

.meteo-row{
    border-bottom-color:rgba(255,255,255,.055);
}

.page-shell{
    max-width:1180px;
    margin:0 auto;
}

.page-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin:8px 0 22px;
}

.page-heading h2,
.panel-heading h3{
    margin:2px 0 0;
}

.eyebrow{
    color:var(--green);
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.page-subtitle,
.chart-note{
    color:var(--muted);
}

.well-page .well_panel{
    box-sizing:border-box;
    width:100%;
    max-width:none;
    margin:0 0 22px;
    padding:28px 36px;
    border:1px solid var(--line);
    border-radius:16px;
    background:
        radial-gradient(circle at 14% 20%, rgba(88,199,255,.09), transparent 22rem),
        linear-gradient(145deg, #151c22, #0f1418);
    box-shadow:0 18px 45px rgba(0,0,0,.25);
}

.well-page .well_wrap{
    justify-content:flex-start;
    gap:42px;
    max-width:560px;
    margin:0 auto;
}

.well-chart-panel{
    padding:24px;
    border:1px solid var(--line);
    border-radius:16px;
    background:linear-gradient(145deg, rgba(20,27,32,.98), rgba(14,19,23,.98));
    box-shadow:0 18px 45px rgba(0,0,0,.22);
}

.panel-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.range-switch{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.range-switch a{
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:999px;
    color:#a6bac5;
    background:rgba(255,255,255,.025);
    font-size:13px;
}

.range-switch a:hover,
.range-switch a.active{
    color:#071013;
    border-color:var(--cyan);
    background:var(--cyan);
}

.well-summary-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
}

.metric-card{
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--surface-2);
}

.metric-card span{
    display:block;
    margin-bottom:5px;
    color:var(--muted);
    font-size:12px;
}

.metric-card strong{
    font-size:22px;
    color:#e9f3f7;
}

.metric-card.refill strong{
    color:var(--green);
}

.metric-card.draw strong{
    color:var(--orange);
}

.well-chart-wrap{
    position:relative;
    height:390px;
}

.well-chart-wrap canvas{
    box-sizing:border-box;
    width:100% !important;
    height:100% !important;
    margin:0;
    padding:10px 4px 0;
    border:0;
    background:transparent;
}

.chart-note{
    margin:14px 2px 0;
    font-size:12px;
    line-height:1.55;
}

.top-back{
    width:min(1148px,100%);
    margin:0 auto 14px;
}

.top-back a{
    color:#93a8b3;
    font-size:14px;
}

.sensor-page{
    display:grid;
    gap:20px;
}

.sensor-now{
    min-width:150px;
    padding:13px 17px;
    border:1px solid rgba(33,212,232,.24);
    border-radius:12px;
    background:rgba(33,212,232,.055);
    text-align:right;
}

.sensor-now strong,
.sensor-now span{
    display:block;
}

.sensor-now strong{
    color:var(--cyan);
    font-size:27px;
}

.sensor-now span{
    margin-top:3px;
    color:var(--muted);
    font-size:12px;
}

.sensor-metrics{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.sensor-metrics .metric-card small{
    display:block;
    margin-top:5px;
    color:var(--muted);
}

.metric-card .cold{color:#69a9ff}
.metric-card .warm{color:#ff8066}

.sensor-controls{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px 20px;
    padding:15px;
    border:1px solid var(--line);
    border-radius:13px;
    background:var(--surface);
}

.mode-switch{
    padding-left:20px;
    border-left:1px solid var(--line);
}

.date-range-form{
    display:flex;
    align-items:end;
    flex-wrap:wrap;
    gap:8px;
    margin-left:auto;
}

.date-range-form label{
    color:var(--muted);
    font-size:11px;
}

.date-range-form input,
.date-range-form button{
    display:block;
    min-height:37px;
    box-sizing:border-box;
    margin-top:3px;
    padding:7px 10px;
    border:1px solid var(--line);
    border-radius:8px;
    color:#dbe8ee;
    background:#0d1216;
}

.date-range-form button{
    cursor:pointer;
    border-color:rgba(33,212,232,.55);
    color:#081114;
    background:var(--cyan);
    font-weight:800;
}

.chart-panel,
.meteo-chart-panel{
    padding:22px 24px;
    border:1px solid var(--line);
    border-radius:16px;
    background:linear-gradient(145deg,rgba(20,27,32,.98),rgba(14,19,23,.98));
    box-shadow:0 18px 45px rgba(0,0,0,.20);
}

.chart-panel h3,
.meteo-chart-panel h3{
    margin:0;
}

.sensor-chart-main,
.sensor-chart-small,
.meteo-chart-wrap{
    position:relative;
    height:390px;
    margin-top:15px;
}

.sensor-chart-small{height:270px}

.sensor-chart-main canvas,
.sensor-chart-small canvas,
.meteo-chart-wrap canvas{
    width:100% !important;
    height:100% !important;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
}

.meteo-chart-panel{
    margin:22px 0;
}

.perf-panel{
    max-width:1148px;
    margin:22px auto 0;
    padding:16px;
    border:1px solid rgba(255,200,87,.28);
    border-radius:12px;
    background:rgba(255,200,87,.045);
    color:#d9e4e9;
}

.perf-row{
    display:flex;
    justify-content:space-between;
    gap:18px;
    margin-top:8px;
    color:#9cafba;
    font-size:13px;
}

.perf-row b{
    color:#ffc857;
    white-space:nowrap;
}

@media (max-width: 760px){
    body:not(.login){
        padding:18px 14px 40px;
    }

    .panel-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .well-page .well_panel{
        padding:24px 18px;
    }

    .well-summary-grid{
        grid-template-columns:1fr;
    }

    .well-chart-wrap{
        height:320px;
    }

    .sensor-metrics{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .page-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .sensor-now{
        box-sizing:border-box;
        width:100%;
        text-align:left;
    }

    .mode-switch{
        padding-left:0;
        border-left:0;
    }

    .date-range-form{
        width:100%;
        margin-left:0;
    }

    .date-range-form label{
        flex:1;
    }

    .date-range-form input{
        width:100%;
    }

    .sensor-chart-main,
    .meteo-chart-wrap{
        height:330px;
    }

    .chart-panel,
    .meteo-chart-panel{
        padding:18px 14px;
    }

    .meteo-row{
        min-width:650px;
    }

    .meteo-history{
        overflow-x:auto;
    }
}