:root{
  --bg0:#0c0a10;
  --bg1:#0f0c15;
  --bg2:#13101b;
  --glass: rgba(255,255,255,.04);
  --glass-border: rgba(255,255,255,.08);
  /* Reduce the default card height slightly to make cards more compact on larger screens */
  /* Increase the default card height slightly to prevent the last row
     of metrics from being clipped in the carousel. */
  /* Increase card height slightly to prevent the last row from being clipped
     when there are three items per carousel page (e.g. Root‑Me categories). */
  --card-h: 260px;
  --gap: 28px;
  --radius: 18px;
  --text:#e7e9ee;
  --muted:#a9afbe;
  --accent:#90f0b5;
  --green:#2ea46f;
  --green-dim:#1d6a4a;
  --red:#d85c6a;
  --red-dim:#8b3740;
  --gray:#7e889b;
  --gray-dim:#545c6a;
  --pill:#252a36;
  --shadow: 0 6px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
}

/* Infinite, soft gradient background */
body{
  margin:0;
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background: #100c18;
  min-height:100vh;
  overflow-x:hidden;
}
/* gradient layer */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1200px 1200px at 20% 10%, rgba(149,103,255,.12), transparent 55%),
    radial-gradient(900px 900px at 80% 0%, rgba(90,0,160,.18), transparent 55%),
    linear-gradient(180deg, rgba(22,16,32,1) 0%, rgba(14,9,22,1) 100%);
  /* Tile a subtle texture without visible seams */
  mask-image: radial-gradient(1200px 1200px at 50% -10%, rgba(0,0,0,.85), rgba(0,0,0,.95));
  pointer-events:none;
}

.container{
  max-width:1200px;
  margin:40px auto;
  padding:0 28px;
}

.glass{
  background: var(--glass);
  border:1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:24px;
}
.header .id{display:flex;gap:18px;align-items:center}
/* Increase avatar size for better visibility */
.avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
  border:2px solid rgba(145,111,255,.35);
  box-shadow: 0 0 0 3px rgba(145,111,255,.12);
  background:#1a1326;
}
.titleblock h1{margin:0 0 6px 0;font-size:28px}
.titleblock .lead{
  margin:0;
  color:var(--muted);
  line-height:1.5;
  max-width:900px;
  /* Align the description text naturally for better readability on all screens */
  text-align:left;
}

/* Update badge */
.badge{
  display:inline-block;
  text-align:right;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  align-self:flex-start;
  white-space:nowrap;
}
.badge .label{font-size:12px;color:var(--muted);}
.badge .time{font-weight:600;margin-top:2px}

.cards{
  margin-top:28px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.card{
  height: var(--card-h);
  padding:18px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden; /* hide carousel overflow */
}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.title{color:var(--text);text-decoration:none;font-weight:700;font-size:22px}
.title-wrap{display:flex;align-items:center;gap:10px}
.soon-pill{
  text-transform:uppercase;
  font-size:12px;letter-spacing:.06em;
  color:#b6bdc9;background:var(--pill);
  padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.06);
}

.status-dot{
  width:12px;height:12px;border-radius:50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
}
.status-dot[data-status="ok"]{background:linear-gradient(180deg, #1f7e57, #154f38)}
.status-dot[data-status="fail"]{background:linear-gradient(180deg, #8a3b43, #57252a)}
.status-dot[data-status="soon"]{background:linear-gradient(180deg, #4b5361, #2e333c)}

.carousel{position:relative;flex:1;overflow:hidden;border-radius:12px}
.list{list-style:none;margin:0;padding:0;position:absolute;inset:0;display:flex;transition:transform .35s ease}
.page{
  /*
    Each carousel page should never exceed the width of its container. By
    default browsers apply `box-sizing: content-box`, which means `width`
    and `min-width` only set the content area and any padding/border will
    add to the overall size. In our horizontal carousel the pages are
    given `min-width: 100%` so that each page spans the full width of the
    carousel. Without adjusting the box‑sizing this results in each page
    becoming slightly wider than its container because of the horizontal
    padding on `.page`. This causes the list of pages to overflow and
    appear wider than the parent card. Setting `box-sizing: border-box`
    ensures that the padding is included in the width calculation,
    preventing the overflow.
  */
  box-sizing: border-box;
  min-width: 100%;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.row .k{color:var(--muted);font-weight:600}
.row .v{font-weight:600}

/* Pager */
.pager{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.nav{
  width:34px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:var(--text);font-size:18px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:.7;transition:opacity .2s ease;
}
.nav:hover{opacity:1}

/* Footer */
footer{
  text-align:center;
  color:var(--muted);
  margin:38px 0 24px;
}

/* Ensure footer lines stack neatly */
footer .updated-time, footer .footer-meta{
  display:block;
}
footer .updated-time{
  /* Add extra space above the timestamp to push it towards the bottom of the page */
  /* Increase the margin so the timestamp sits lower on the page */
  margin-top:2.5rem;
  /* Make the updated line smaller (1.5x smaller than normal text) */
  font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 1100px){
  .cards{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 720px){
  .header{flex-direction:column;align-items:flex-start}
  /*
    Center the “last update” badge on smaller screens.  When stacking the
    header vertically we want the badge to sit under the description and
    be centered relative to the column.  Using `align-self: center` positions
    the badge along the cross‑axis.
  */
  /* Center the “last update” badge under the description on mobile. */
  .badge{align-self:center}
  .cards{grid-template-columns: 1fr;}
  :root{ --card-h: 280px; }
  /* Allow cards to grow naturally with their content instead of using a fixed height on mobile/tablet widths */
  .card{ height:auto; }

  /* Adjust minimum height for cards on medium-width screens to strike a balance between visibility and compactness */
  .card{ min-height:250px; }

  /* Center carousel pages vertically within the card on medium screens */
  .page{ justify-content:center; }

  /* On mobile/tablet widths, ensure the gradient background scrolls with the content
     rather than remaining fixed. This prevents visual glitches on some mobile browsers. */
  .bg{ background-attachment: scroll; }
}

/*
  Additional mobile optimizations
  On very small screens (e.g. smartphones under ~480px wide) the default layout
  becomes cramped.  To improve readability and usability we reduce padding
  values, shrink the avatar, and slightly lower the card height.  We also
  adjust font sizes and the pager buttons.
*/
@media (max-width: 480px){
  /* reduce side padding on the overall container */
  .container{padding:0 16px;}
  /* stack header contents with tighter spacing */
  .header{flex-direction:column;gap:16px;padding:16px;}
  /* shrink the avatar for small screens while keeping it bigger than before */
  .avatar{width:96px;height:96px;}
  /* slightly smaller title */
  .titleblock h1{font-size:24px;}
  /* reduce line-length for the lead text */
  .titleblock .lead{font-size:14px;max-width:100%;text-align:left;}
  /* tighten card spacing */
  .cards{margin-top:20px;gap:20px;}
  /* shrink card padding */
  .card{padding:14px;}
  /* smaller navigation buttons */
  .nav{width:28px;height:28px;font-size:16px;}
  /* adjust card height variable to reduce excess vertical space below the
     categories. Using a smaller height keeps the pager closer to the last
     row of content on mobile screens. */
  /* Increase card height on very small screens to avoid clipping */
  :root{--card-h:280px;}

  /* reduce top margin of the pager so arrows sit closer to the content */
  .pager{margin-top:6px;}

  /* Ensure cards on very small screens also grow based on content rather than the CSS variable height */
  .card{ height:auto; }
  /* Provide a modest minimum height for very small screens */
  .card{ min-height:280px; }

  /* Center carousel pages vertically within the card on very small screens */
  .page{ justify-content:center; }
  /* center the update badge on very small screens */
  .badge{align-self:center;}
}