:root{
  --bg:#f5f7fa;
  --panel:#ffffff;
  --line:#e4e7ec;
  --text:#1a1f2e;
  --muted:#697283;
  --ok:#1eaa6c;
  --partial:#f0a020;
  --bad:#d63846;
  --accent:#3b82f6;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; min-height:100%}
body{
  background:var(--bg); color:var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- PIN gate ---- */
.pin-gate{
  position:fixed; inset:0; background:#0d1018;
  display:flex; align-items:center; justify-content:center; z-index:100;
}
.pin-card{
  background:#161a23; color:#e8eaf2; border-radius:14px;
  padding:30px 36px; max-width:360px; width:90%;
  border:1px solid #2a2f3e; text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.pin-card h2{margin:0 0 6px; font-size:18px; font-weight:700}
.pin-card p{margin:0 0 18px; font-size:13px; color:#9099ab}
.pin-row{display:flex; gap:10px; justify-content:center}
.pin-input{
  width:46px; height:54px; border-radius:10px; border:1px solid #2a2f3e;
  background:#0d1018; color:#e8eaf2; text-align:center;
  font-size:22px; font-weight:600; outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.pin-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.pin-err{color:#ff6b6b; font-size:12px; margin-top:14px}

/* ---- Top bar ---- */
.sp-topbar{
  background:#ffffff; border-bottom:1px solid var(--line);
  padding:18px 28px; display:flex; justify-content:space-between; align-items:center;
}
.sp-brand{font-size:17px; font-weight:700; display:flex; align-items:center; gap:10px}
.sp-subbrand{font-weight:400; color:var(--muted)}
.sp-logo{width:24px; height:24px; border-radius:5px; object-fit:contain}
.sp-dot{display:none}
.sp-meta{font-size:12px; color:var(--muted)}

.sp-main{max-width:920px; margin:0 auto; padding:32px 24px 60px}

/* ---- Overall status banner ---- */
.sp-overall{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:24px 26px; margin-bottom:24px;
  display:flex; align-items:center; gap:16px;
}
.sp-overall h1{margin:0; font-size:24px; font-weight:700}
.sp-pulse{
  width:14px; height:14px; border-radius:50%; flex:none;
  background:var(--ok);
  box-shadow:0 0 0 0 rgba(30,170,108,.45);
  animation:pulse 2s infinite;
}
.sp-overall.partial .sp-pulse{background:var(--partial); box-shadow:0 0 0 0 rgba(240,160,32,.5); animation:pulse-warn 2s infinite}
.sp-overall.outage .sp-pulse{background:var(--bad); box-shadow:0 0 0 0 rgba(214,56,70,.5); animation:pulse-bad 2s infinite}
.sp-overall.partial{border-color:var(--partial)}
.sp-overall.outage{border-color:var(--bad)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,170,108,.45)}70%{box-shadow:0 0 0 12px rgba(30,170,108,0)}100%{box-shadow:0 0 0 0 rgba(30,170,108,0)}}
@keyframes pulse-warn{0%{box-shadow:0 0 0 0 rgba(240,160,32,.5)}70%{box-shadow:0 0 0 12px rgba(240,160,32,0)}100%{box-shadow:0 0 0 0 rgba(240,160,32,0)}}
@keyframes pulse-bad{0%{box-shadow:0 0 0 0 rgba(214,56,70,.5)}70%{box-shadow:0 0 0 12px rgba(214,56,70,0)}100%{box-shadow:0 0 0 0 rgba(214,56,70,0)}}

/* ---- App rows ---- */
.sp-apps{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  overflow:hidden;
}
.sp-app{
  padding:18px 22px; border-bottom:1px solid var(--line);
}
.sp-app:last-child{border-bottom:0}
.sp-app-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.sp-app-name{font-weight:600; font-size:15px; display:flex; align-items:center; gap:10px; min-width:0}
.sp-app-name a{color:inherit}
.sp-app-icon-wrap{width:22px; height:22px; flex:none; display:inline-flex; align-items:center; justify-content:center}
.sp-app-icon{width:22px; height:22px; border-radius:5px; object-fit:contain; background:#f0f3f8; flex:none; display:block}
.sp-app-sub{font-weight:400; font-size:11.5px; color:var(--muted); margin-left:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Group sections (Servers / Services) */
.sp-group{margin-bottom:24px}
.sp-group-title{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:0 0 8px 4px;
}
.sp-server .sp-app-name{gap:8px}
.sp-server-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:5px; background:#f0f3f8;
  font-size:14px;
}
.sp-app-status{font-size:13px; font-weight:500; display:inline-flex; align-items:center; gap:6px}
.sp-app-status.operational{color:var(--ok)}
.sp-app-status.partial{color:var(--partial)}
.sp-app-status.down{color:var(--bad)}
.sp-app-status::before{
  content:""; width:8px; height:8px; border-radius:50%; background:currentColor;
}

/* 90-cell uptime ribbon — one slim bar per day, like Atlassian / status.claude.com */
.sp-ribbon{
  display:flex; gap:2px; align-items:stretch; height:32px;
  margin: 14px 0 8px;
}
.sp-cell{
  flex:1 1 0; min-width:3px; height:100%;
  border-radius:2px; background:#dfe3ea;
  transition:filter .12s, transform .08s;
  cursor:help;
}
.sp-cell.operational{background:var(--ok)}
.sp-cell.partial{background:var(--partial)}
.sp-cell.down{background:var(--bad)}
.sp-cell.empty{background:#e2e6ee}
.sp-cell:hover{filter:brightness(.88); transform:scaleY(1.08)}
.sp-ribbon-labels{
  display:flex; justify-content:space-between; font-size:11px; color:var(--muted);
  margin-top:6px;
}

.sp-foot{
  text-align:center; color:var(--muted); font-size:12px; margin-top:22px;
}

/* ===== Custom scrollbars (global) ===== */
*{ scrollbar-width: thin; scrollbar-color: rgba(59,130,246,.4) transparent }
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-track{ background: rgba(0,0,0,.04); border-radius:5px }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(59,130,246,.55), rgba(30,170,108,.55));
  border-radius:5px; border:2px solid transparent; background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(59,130,246,.8), rgba(30,170,108,.8));
  background-clip:padding-box;
}
*::-webkit-scrollbar-corner{ background:transparent }

/* ===== Mobile polish ===========================================
   Tighter padding, wrappable header rows, ribbon that scales down
   gracefully on narrow viewports. Layered on top of the desktop
   styles above. */
@media (max-width: 640px){
  body{ font-size: 14.5px; }

  .sp-topbar{
    padding: 12px 14px;
    /* allow the meta line to slip below the brand on really narrow
       screens instead of squishing the brand text. */
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .sp-brand{ font-size: 16px; gap: 8px; }
  .sp-logo{ width: 22px; height: 22px; }
  .sp-meta{ font-size: 11px; width: 100%; }

  .sp-main{ padding: 20px 14px 50px; }

  .sp-overall{
    padding: 18px 16px;
    margin-bottom: 18px;
    gap: 12px;
    border-radius: 10px;
  }
  .sp-overall h1{ font-size: 19px; line-height: 1.25; }
  .sp-pulse{ width: 12px; height: 12px; }

  .sp-group{ margin-bottom: 18px; }
  .sp-group-title{
    font-size: 11px;
    letter-spacing: .12em;
    margin-left: 2px;
  }

  .sp-apps{ border-radius: 10px; }
  .sp-app{ padding: 13px 14px; }

  /* Let the row wrap: name on top, status pill on the second line, so
     a long service name (with subtitle) doesn't crush the pill out of
     view or hide behind ellipsis. */
  .sp-app-head{
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 10px;
  }
  .sp-app-name{
    flex: 1 1 100%;
    min-width: 0;
    font-size: 14.5px;
  }
  .sp-app-sub{
    font-size: 11px;
    margin-left: 6px;
  }
  .sp-app-status{ font-size: 12.5px; }

  /* 90-day ribbon: tighter gaps + smaller minimum cell so the strip
     keeps its proportions on a 360-width screen. */
  .sp-ribbon{
    height: 28px;
    gap: 1px;
    margin: 12px 0 6px;
  }
  .sp-cell{ min-width: 2px; border-radius: 1.5px; }
  .sp-ribbon-labels{ font-size: 10.5px; }

  .sp-foot{
    font-size: 11.5px;
    margin-top: 18px;
    line-height: 1.55;
  }
}

/* Extra-narrow phones (≤360px): drop a touch more. */
@media (max-width: 360px){
  .sp-main{ padding: 16px 10px 40px; }
  .sp-app{ padding: 12px 12px; }
  .sp-overall{ padding: 16px 14px; }
  .sp-overall h1{ font-size: 17.5px; }
  .sp-ribbon{ height: 24px; }
  .sp-cell{ min-width: 1.5px; }
}

/* Make tap targets a hair bigger so a fingertip can land on any cell
   when the user wants to see a day's status — but only switch when
   hover is unavailable so we don't bloat the ribbon on desktop. */
@media (hover: none){
  .sp-cell{ transition: none; }
}