:root{
    --bg:#161f26;
    --bg2:#0f0f0f;
    --card:#202d36;
    --card-soft:#1b2730;
    --accent:#caa749;
    --accent2:#cf5b26;
    --text:#f4d9c8;
    --muted:#d2b9aa;
    --line:rgba(244,217,200,.14);

    --ok-bg:#161f26;
    --ok-card:#202d36;
    --ok-accent:#caa749;

    --warn-bg:#2d2114;
    --warn-card:#4a3216;
    --warn-accent:#caa749;

    --alarm-bg:#2b1210;
    --alarm-card:#5a1c12;
    --alarm-accent:#cf5b26;

    --cold-warn-bg:#171d32;
    --cold-warn-card:#222b4b;
    --cold-warn-accent:#6b6ac6;

    --cold-alarm-bg:#161328;
    --cold-alarm-card:#2b2148;
    --cold-alarm-accent:#ae83fc;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{
    font-family:'Outfit',sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    transition:background .8s ease;
    overflow-x:hidden;
  }
  body::before{
    content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(circle at 18% 8%,rgba(202,167,73,.16),transparent 38%),
               radial-gradient(circle at 82% 92%,rgba(207,91,38,.13),transparent 42%);
  }
  .wrap{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:30px 20px 60px}
  header{display:flex;align-items:center;gap:14px;margin-bottom:8px}
  .brand-header{justify-content:center;margin-bottom:4px}
  .brand-logo{width:100%;max-width:100%;height:auto;object-fit:contain}
  .logo{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
  h1{font-family:'Fraunces',serif;font-weight:900;font-size:34px;letter-spacing:-.5px}
  .sub{color:var(--muted);font-size:15px;margin-bottom:22px;font-weight:300}

  .notify-box{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin-bottom:20px;
    background:rgba(15,15,15,.22);box-shadow:0 6px 20px rgba(0,0,0,.16);
  }
  .notify-box small{display:block;color:var(--muted);line-height:1.25}
  .notify-box strong{font-size:14px}
  .notify-box button{
    border:0;border-radius:999px;padding:10px 14px;white-space:nowrap;
    background:var(--accent);color:#161f26;font-weight:700;cursor:pointer;
  }
  .notify-box button:disabled{opacity:.55;cursor:not-allowed}

  .status-banner{
    border-radius:22px;padding:22px 24px;margin-bottom:20px;
    background:var(--card);transition:background .8s ease;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
    position:relative;overflow:hidden;border:1px solid var(--line);
  }
  .status-banner .pulse{
    position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
    background:var(--accent);opacity:.14;transition:background .8s ease;
  }
  .status-label{font-size:13px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:6px}
  .status-text{font-family:'Fraunces',serif;font-weight:600;font-size:26px;line-height:1.1}

  .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
  .card{
    background:var(--card-soft);border-radius:20px;padding:24px 20px;
    box-shadow:0 6px 20px rgba(0,0,0,.2);transition:background .8s ease;
    border:1px solid var(--line);
  }
  .card .ico{font-size:22px;margin-bottom:10px;display:block}
  .card .lbl{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
  .card .val{font-family:'Fraunces',serif;font-weight:900;font-size:42px;line-height:1}
  .card .unit{font-size:20px;color:var(--muted);font-weight:400}

  .meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);padding:0 6px;margin-bottom:24px}
  .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#888;margin-right:7px;vertical-align:middle;transition:background .3s}
  .dot.on{background:#5BD68A;box-shadow:0 0 10px #5BD68A}
  .dot.off{background:#cf5b26;box-shadow:0 0 10px rgba(207,91,38,.45)}

  .thresholds,.hist{background:var(--card-soft);border-radius:20px;padding:20px 22px;transition:background .8s;border:1px solid var(--line)}
  .thresholds h3,.hist h3{font-family:'Fraunces',serif;font-weight:600;font-size:16px;margin-bottom:14px;color:var(--muted)}
  .trow{display:flex;align-items:center;gap:10px;font-size:14px;padding:6px 0;color:var(--text)}
  .trow .sw{width:12px;height:12px;border-radius:3px;flex-shrink:0}
  .hist{margin-top:24px}
  .spark{display:flex;align-items:flex-end;gap:3px;height:60px}
  .spark .bar{flex:1;background:var(--accent);border-radius:3px 3px 0 0;min-height:3px;opacity:.8;transition:height .4s, background .8s}

  .foot{text-align:center;margin-top:34px;font-size:12px;color:var(--muted);opacity:.65}
  @keyframes fadein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .wrap>*{animation:fadein .6s ease backwards}
  .wrap>*:nth-child(2){animation-delay:.05s}
  .wrap>*:nth-child(3){animation-delay:.1s}
  .wrap>*:nth-child(4){animation-delay:.15s}
  .wrap>*:nth-child(5){animation-delay:.2s}