:root{
      --bg0:#0b0f14;
      --bg1:#0f172a;
      --card:#0f1623;
      --muted:#93a4b8;

      --up:#22c55e;
      --down:#ef4444;
      --maint:#3b82f6;
      --error:#f59e0b;
      --disabled:#64748b;
    }

    html, body{
      height:100%;
      background: radial-gradient(1200px 800px at 50% -10%, #16213a 0%, var(--bg0) 55%, #070a0f 100%);
      color:#e5e7eb;
    }

    .topbar{
      backdrop-filter: blur(10px);
      background: rgba(10,14,20,.55);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .container-narrow{
      max-width: 1200px;
    }

    .sensor-grid{
      display:grid;
      gap: 1rem;
      grid-template-columns: repeat(12, 1fr);
      align-items: stretch;
    }
    @media (max-width: 1200px){ .sensor-grid{ grid-template-columns: repeat(8, 1fr);} }
    @media (max-width: 768px){  .sensor-grid{ grid-template-columns: repeat(4, 1fr);} }
    @media (max-width: 420px){  .sensor-grid{ grid-template-columns: repeat(2, 1fr);} }

    /* .sensor-card{
      grid-column: span 3;
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.08);
      border-left-width: 6px;
      border-radius: 16px;
      padding: 14px 14px 12px;
      position: relative;
      overflow: hidden;
      min-height: 160px;
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    } */
      .sensor-card{
        grid-column: span 3;
        background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
        border: 1px solid rgba(255,255,255,.1);
        border-left-width: 6px;
        border-radius: 18px;
        padding: 16px;
        position: relative;
        overflow: hidden;

        /* ⬇️ groter en stabieler */
        min-height: 260px;

        display: flex;
        flex-direction: column;
        }

    @media (max-width: 768px){ .sensor-card{ grid-column: span 4; } }
    @media (max-width: 420px){ .sensor-card{ grid-column: span 2; } }

    .sensor-title{
      font-weight: 700;
      letter-spacing: .2px;
      margin: 0;
      font-size: 1.05rem;
      line-height: 1.2;
    }
    .sensor-meta{
      color: var(--muted);
      font-size: .9rem;
    }
    .pill{
      font-size: .75rem;
      padding: .25rem .5rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      color: #e5e7eb;
      font-weight: 600;
      letter-spacing: .3px;
    }

    /* Status borders */
    .st-up{ border-left-color: var(--up); }
    .st-down{ border-left-color: var(--down); }
    .st-maint{ border-left-color: var(--maint); }
    .st-error{ border-left-color: var(--error); }
    .st-disabled{
      border-left-color: var(--disabled);
      filter: saturate(.2) brightness(.9);
      opacity: .85;
    }

    /* Bottom “animation stage” */
    /* .anim-stage{
      position:absolute;
      left: 0; right: 0; bottom: 0;
      height: 66px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 8px 10px;
      background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.30));
    } */
      .anim-stage{
        margin-top: auto;
        height: 90px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,.06);
        }


    .heartbeat{
    width: 100%;
    max-width: 300px;
    height: 56px;
    position: relative;
    border-radius: 12px;
    border: 1px solid rgba(34,197,94,.35);
    background: rgba(34,197,94,.08);
    overflow: hidden;
    }

    .heartbeat::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, transparent 0%, rgba(34,197,94,.15) 40%, transparent 80%);
    animation: scan 1.2s linear infinite;
    }

    .heartbeat svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index: 1;
    }

    /* dot glow */
    .heartbeat circle{
    filter: drop-shadow(0 0 8px rgba(34,197,94,.9));
    }

    @keyframes scan{
    0%{ transform: translateX(-70%); }
    100%{ transform: translateX(70%); }
    }



    /* FLATLINE (DOWN) */
    .flatline{
      width: 100%;
      max-width: 260px;
      height: 44px;
      border-radius: 10px;
      border: 1px solid rgba(239,68,68,.25);
      background: rgba(239,68,68,.06);
      position: relative;
      overflow:hidden;
    }
    .flatline::after{
      content:"";
      position:absolute;
      left:-40%;
      top:50%;
      width: 60%;
      height: 2px;
      background: rgba(239,68,68,.85);
      box-shadow: 0 0 14px rgba(239,68,68,.35);
      animation: flatmove 1s linear infinite;
      transform: translateY(-50%);
    }
    @keyframes flatmove{
      0%{ left:-60%; }
      100%{ left:110%; }
    }

    /* WRENCH (MAINTENANCE) */
    .wrench{
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(59,130,246,.35);
    background: rgba(59,130,246,.12);

    
    animation: wrenchGlow 2.4s ease-in-out infinite;
    }

    .wrench i{
    animation: wrenchTick 2.8s steps(6, end) infinite alternate;
    }

    @keyframes wrenchTick{
    from { transform: rotate(-20deg); }
    to   { transform: rotate(20deg); }
    }


    @keyframes wrenchGlow{
    0%   { box-shadow: 0 0 0 0 rgba(59,130,246,.25); }
    50%  { box-shadow: 0 0 22px rgba(59,130,246,.35); }
    100% { box-shadow: 0 0 0 0 rgba(59,130,246,.25); }
    }


    /* WARNING (ERROR) */
      .warning{
        width: 64px;
        height: 64px;
        display:grid;
        place-items:center;
        border-radius: 16px;
        border: 1px solid rgba(245,158,11,.45);
        background: rgba(245,158,11,.15);
        animation: warn 1.2s ease-in-out infinite;
        }

        .warning i{
        font-size: 2.1rem;
        color: #fde68a;
        animation: blink .8s steps(2, end) infinite;
        }

    @keyframes warn{
      0%,100%{ transform: translateY(0); box-shadow: 0 0 0 rgba(245,158,11,0); }
      50%{ transform: translateY(-2px); box-shadow: 0 0 20px rgba(245,158,11,.18); }
    }
    @keyframes blink{
      0%{ opacity: 1; }
      49%{ opacity: 1; }
      50%{ opacity: .3; }
      100%{ opacity: .3; }
    }

    .subtle-divider{
      height:1px;
      background: rgba(255,255,255,.08);
      margin: 10px 0;
    }