:root {
            --bg: #0b1418;
            --panel: #0f1f26;
            --panel2: #132932;
            --blue: #128592;
            --blue-soft: rgba(18, 133, 146, .15);
            --text: #e7f6f9;
            --muted: #9fc9cf;
            --border: #1f3f46;
            --active: rgba(18, 133, 146, .35);
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            font-family: system-ui, Segoe UI, Roboto, Arial;
            background: linear-gradient(180deg, #081015, #0b1418);
            color: var(--text);
        }

        .container {
            max-width: 1200px;
            margin: auto;
            padding: 20px
        }

        h1 {
            margin: 0 0 8px;
            color: var(--blue)
        }

        .subtitle {
            color: var(--muted);
            margin-bottom: 20px
        }

        .panel {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 10px;            
        }

        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 900px;
        }

        th,
        td {
            padding: 12px 10px;
            border-bottom: 1px solid var(--border);
            vertical-align: top;
        }

        th {
            color: var(--blue);
            background: var(--panel2);
            text-align: left;
        }

        tr:hover td {
            background: #132d36
        }

        tr.active td {
            background: var(--active);
        }

        .badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            background: var(--blue-soft);
            color: var(--blue);
            border: 1px solid rgba(18, 133, 146, .45);
        }

        .bbch {
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
        }

        /* Tooltip */
        .bbch[data-tip]:hover::after {
            content: attr(data-tip);
            position: absolute;
            left: 0;
            top: 120%;
            background: #071015;
            color: var(--text);
            padding: 8px 10px;
            border-radius: 10px;
            font-size: 12px;
            white-space: nowrap;
            border: 1px solid var(--border);
            z-index: 10;
        }

        /* Ikonky */
        .bbch svg {
            width: 18px;
            height: 18px;
            stroke: var(--blue);
            fill: none;
            stroke-width: 2;
        }

        .icon-fill {
            fill: var(--blue);
            stroke: none
        }

        .footer {
            text-align: center;
            color: var(--muted);
            font-size: 13px;
            margin-top: 30px;
        }

        .accordion details{
        background:var(--panel2);
        border:1px solid var(--border);
        border-radius:12px;
        margin-bottom:10px;
        padding:12px 14px;
        }
        
        .accordion summary{
        cursor:pointer;
        font-weight:600;
        color:var(--blue);
        list-style:none;
        }
        
        .accordion summary::-webkit-details-marker{
        display:none;
        }
        
        .accordion p{
        margin:10px 0 0;
        color:var(--text);
        font-size:14px;
        line-height:1.5;
        }

        #countdownPanel{
        background:linear-gradient(180deg,#102b33,#0f1f26);
        border-left:4px solid var(--blue);
        }

        .switch{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        }
        
        .switch button{
        background:var(--panel2);
        border:1px solid var(--border);
        color:var(--text);
        padding:8px 14px;
        border-radius:12px;
        cursor:pointer;
        font-weight:600;
        }
        
        .switch button.active{
        background:var(--blue-soft);
        border-color:var(--blue);
        color:var(--blue);
        }
        
        .switch button:hover{
        background:#15323a;
        }

        .pressure-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        }

.pressure-card{
  background:var(--panel2);
  border:1px solid var(--border);  
  padding:8px 8px;
  border-radius:12px;
  background:linear-gradient(180deg,#132932,#0f1f26);
}

.pressure-card h3{  
  color:var(--blue);  
  font-size:14px;
  margin:0 0 4px;
}

.pressure-card .level{
  font-size:14px;
  font-weight:600;
}

.pressure-card .desc{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

/* stavy */
.pressure-card.low{border-left:4px solid #2ecc71;}
.pressure-card.medium{border-left:4px solid #f1c40f;}
.pressure-card.high{border-left:4px solid #e74c3c;}
.pressure-card.warn{border-left:4px solid #ff9f43;}

.dashboard-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}

.dashboard-wrap{
max-width: 1200px;
margin-top: 10px;
margin-bottom: 10px;
}

@media (max-width: 900px){
  .dashboard-grid{
    grid-template-columns:1fr;
  }
}

.pressure-card.waiting{
border:1px dashed var(--border);
color:var(--muted);
background:linear-gradient(180deg,#0f1f26,#0c1a20);
}

.pressure-card.waiting .title{
font-weight:600;
margin-bottom:6px;
}

.pressure-card.waiting .desc{
font-size:13px;
line-height:1.4;
opacity:.85;
}

.mix-wrap{
overflow-x:auto;
margin-top:10px;
}

.mix-table{
border-collapse:collapse;
font-size:12px;
min-width:800px;
}

.mix-table th,
.mix-table td{
padding:6px 8px;
border:1px solid var(--border);
text-align:center;
}

.mix-table thead th{
background:#0f2a33;
color:var(--blue);
position:sticky;
top:0;
z-index:2;
}

.mix-table tbody th{
text-align:left;
background:#102a33;
color:#e7f6f9;
}

.mix-table td.ok{background:#9ccc65;color:#000;}
.mix-table td.no{background:#e53935;color:#fff;}
.mix-table td.warn{background:#fbc02d;color:#000;}
.mix-table td.plus{background:#aed581;color:#000;font-weight:700;}
.mix-table td.self{background:#000;color:#fff;}

.mix-table tr.active{
outline:2px solid var(--blue);
background:rgba(18,133,146,.15);
}

.mix-table td.col-active,
.mix-table th.col-active{
outline:2px solid var(--blue);
background:rgba(18,133,146,.25) !important;
}

#gddChart{
position:relative;
}

.gdd-tooltip{
position:absolute;
background:#0f1f26;
border:1px solid #19d1e0;
color:#e7f6f9;
padding:6px 8px;
font-size:12px;
border-radius:6px;
pointer-events:none;
display:none;
}

.done-row{
opacity:0.5;
text-decoration: line-through;
}

.doneCheck{
transform:scale(1.2);
cursor:pointer;
}

.sprayItem{
display:block;
padding:6px 8px;
border-radius:8px;
transition:0.2s;
}

.sprayItem input{
margin-right:6px;
transform:scale(1.2);
}

.sprayDone{
opacity:0.5;
text-decoration: line-through;
background:rgba(25,209,224,0.05);
}

.today-highlight {
    outline: 2px solid #19d1e0;
    border-radius: 10px;
    background: rgba(25, 209, 224, 0.08);
}

#protectionValue {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 8px;
}

#protectionBar {
    height: 10px;
    border-radius: 10px;
    background: #132932;
    overflow: hidden;
}

#protectionBar::after {
    content: "";
    display: block;
    height: 100%;
    width: 0%;
    background: #19d1e0;
    transition: 0.4s;
}

.checkCol {
    width: 60px;
    text-align: center;
    vertical-align: top;
}

#plan td {
    vertical-align: top;
}

.sprayDone {
    opacity: 0.5;
    text-decoration: line-through;
}

.today-highlight {
  border-left: 4px solid #19d1e0;
  background: rgba(25,209,224,0.08);
}

/* 🔥 odporúčaná kombinácia */
.spray-recommended {
  border-radius: 8px;
  padding: 6px;
  background: rgba(22,199,132,.15);
  box-shadow: 0 0 8px rgba(22,199,132,.4);
  transition: all .25s ease;
}

/* 🌿 výživa */
.spray-b {
  background: rgba(25,209,224,.15);
  box-shadow: 0 0 8px rgba(25,209,224,.4);
}

.fire-icon {
  margin-right: 4px;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}