/* Dark theme */
:root {
  --bg: #0b0e11;
  --card: #0f1418;
  --muted: #9aa5b1;
  --accent: #4cc1ff;
  --green: #5edc7a;
  --text: #e6eef6;
  --glass: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.04);
}

/* Basic reset */
* { box-sizing: border-box; }
html,body { height: 100%; margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg,var(--bg),#071018); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.page { max-width: 1000px; margin: 48px auto; padding: 20px; }
.hidden { display: none; }

/* header */
.site-header h1 { margin: 0 0 6px 0; font-size: 1.6rem; letter-spacing: -0.02em; }
.site-header h2 { margin:0; color:var(--muted); font-weight: 500; font-size: 1rem; }

/* loader */
.loader-overlay {
  position: fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:9999; background: linear-gradient(180deg, rgba(2,6,10,0.7), rgba(2,6,10,0.9));
  transition: opacity 220ms ease;
}
.loader-overlay.hidden, .loader-overlay[aria-hidden="true"] { opacity:0; pointer-events:none; visibility:hidden; }
.loader-box { background:var(--card); padding:22px 28px; border-radius:12px; border:1px solid var(--border); box-shadow: 0 8px 30px rgba(0,0,0,0.6); display:flex; gap:16px; align-items:center; }
.spinner { width:36px; height:36px; border-radius:50%; border:4px solid rgba(255,255,255,0.06); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text { color:var(--muted); }

/* layout */
.content { display:grid; grid-template-columns: 1fr; gap:28px; margin-top:18px; }
.timeline-section { background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); padding:18px; border-radius:10px; border:1px solid var(--border); }
.timeline { display:flex; flex-direction:column; gap:14px; position:relative; padding-left:18px; }
.timeline-start, .timeline-end { color:var(--muted); font-size:0.9rem; margin-bottom:6px; }
.timeline-item { position:relative; padding:12px; border-radius:8px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); border:1px solid var(--border); outline: none; }
.timeline-item:focus { box-shadow: 0 0 0 3px rgba(76,193,255,0.08); border-color: var(--accent); }
.timeline-date { display:block; color:var(--muted); font-size:0.9rem; margin-bottom:6px; }
.timeline-title { font-weight:600; margin-bottom:6px; }
.timeline-snippet { display:none; color:var(--text); background:var(--glass); padding:12px; border-radius:8px; margin-top:8px; border:1px dashed rgba(255,255,255,0.02); white-space: pre-wrap; }

/* hovering: show snippet */
.timeline-item:hover .timeline-snippet,
.timeline-item:focus .timeline-snippet {
  display:block;
}

/* inline help link */
.inline-help-link { color: var(--accent); margin-left:8px; font-weight:600; }

/* server info button (green clickable text) */
.server-info-btn {
  color: var(--green);
  background: transparent;
  border: none;
  padding:0;
  font-weight:700;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  margin-left:6px;
}
.server-info-btn:hover { text-decoration: underline; }

/* stats container */
.status-section { padding:18px; border-radius:10px; border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); }
.stats-container { margin-top:10px; color:var(--text); }

/* help */
.help-section { padding:18px; border-radius:10px; border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); }

/* modal */
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:10000; }
.modal[aria-hidden="false"] { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.54), rgba(0,0,0,0.6)); }
.modal-panel { position:relative; background:var(--card); border:1px solid var(--border); padding:18px; border-radius:10px; max-width:640px; width:90%; z-index:2; box-shadow:0 10px 40px rgba(0,0,0,0.6); }
.modal-close { position:absolute; right:10px; top:8px; background:transparent; border:none; color:var(--muted); font-size:18px; cursor:pointer; }
.modal-body { color:var(--text); margin-top:8px; }

/* footer */
.site-footer { margin-top:28px; color:var(--muted); text-align:center; }

/* accessibility helper */
.sr-only { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* small screens tweak */
@media (max-width:700px) {
  .page { margin: 18px; }
}