:root{
  /* Yorkshire theme palette */
  --bg: radial-gradient(circle at top, #1b2a3a, #0f1720);
  --header: linear-gradient(135deg, #2b3f55, #1c2a3a);
  --menubar: linear-gradient(135deg, #2b3f55, #1c2a3a);
  --panel: transparent;

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);

  --line: rgba(255,255,255,0.12);
  --card: rgba(255,255,255,0.06);

  --shadow: 0 8px 20px rgba(0,0,0,0.35);
  --shadow-hover: 0 14px 28px rgba(0,0,0,0.45);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  min-width: 760px;
}

/* Header */
#top{
  position: relative;
  height: 115px;
  width: 100%;
  background: var(--header);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.site-title{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 18px 20px 0 20px;
  margin: 0;
  color: rgba(255,255,255,0.95);
}

.site-sub{
  font-size: 13px;
  color: var(--muted);
  padding: 6px 22px 12px 22px;
  margin: 0;
}

/* logo top right */
.site-logo{
  position:absolute;
  right:20px;
  top:12px;
  height:72px;
  width:auto;
  opacity:0.95;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}
.site-logo:hover{ opacity:1; }

/* Menubar */
#menubar{
  width:100%;
  background: var(--menubar);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  box-shadow: var(--shadow);
}

.wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Status line */
.statusline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--line);
}

.status-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.dot{
  width:10px;height:10px;border-radius:50%;
  background:#2b7a2b;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.10);
}
.dot.bad{ background:#A40018; }

.muted{ color: var(--muted); font-size: 13px; }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

/* Content area */
#content{
  background: var(--panel);
  padding: 18px 0 32px;
}

/* Layout */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Cards */
.card{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.card-b{ padding: 12px 14px 14px; }

/* Tables */
table{
  width:100%;
  border-collapse:collapse;
  font-size: 14px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow:hidden;
  color: rgba(255,255,255,0.90);
}

thead th{
  text-align:left;
  padding: 10px 10px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: rgba(255,255,255,0.92);
}

tbody td{
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: top;
  white-space: nowrap;
}

tbody tr:last-child td{ border-bottom:none; }

tbody tr:nth-child(even) td{
  background: rgba(255,255,255,0.03);
}

tbody tr:hover td{
  background: rgba(79,134,247,0.12);
}

/* Footer */
#footer{
  width:100%;
  background: linear-gradient(135deg, #2b3f55, #1c2a3a);
  border-top: 1px solid var(--line);
  color: rgba(255,255,255,0.78);
  box-shadow: var(--shadow);
}

.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 22px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  font-size: 12px;
  gap: 10px;
  flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 980px){
  body{ min-width: 0; }
  .row{ grid-template-columns: 1fr; }
  .site-logo{ height: 56px; top: 18px; }
  .site-title{ font-size: 30px; }
  tbody td{ white-space: normal; }
}

/* Let tables fit cards without horizontal scroll */
table{
  table-layout: fixed;         /* important */
}

thead th, tbody td{
  white-space: normal;         /* allow wrapping */
  overflow-wrap: anywhere;
}

td.mono{
  white-space: normal;         /* override earlier nowrap */
}

/* Timestamps shown as 2-line blocks */
.dt{
  display: inline-block;
  line-height: 1.1;
}
.dt .d{ opacity: 0.92; }
.dt .t{ opacity: 0.80; }

/* Slightly tighter table for dense cards */
thead th{ font-size: 12px; }
tbody td{ font-size: 13px; }

/* Mobile: stack better and keep readable */
@media (max-width: 980px){
  table{ font-size: 13px; }
  thead th, tbody td{ padding: 8px 8px; }
}

.dt{ display:inline-block; line-height:1.2; }
.dt .t{ font-weight:600; }
.dt .d{ opacity:0.85; }