/* ZIBADIS Design System — Dark Gold — system-monitor */
* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 0%,  rgba(201,162,61,.15), transparent 28%),
    radial-gradient(circle at 80% 0%,  rgba(180,122,50,.10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(44,101,255,.07), transparent 32%),
    linear-gradient(180deg, #050607 0%, #07090b 52%, #050607 100%);
  color: #f4eee0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.shell { width: min(1220px, calc(100% - 32px)); margin: 32px auto; }

.hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.095);
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  padding: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,.48);
  backdrop-filter: blur(20px);
}

.eyebrow {
  color: #c9a23d;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

h1 {
  margin: 6px 0;
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f4eee0;
}

h2 { margin: 0 0 4px; font-weight: 400; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: #c9a23d; }

.sub { color: #9c9588; max-width: 720px; margin: 0; font-size: .9rem; }

.data-health {
  margin: 16px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(114,165,255,.22);
  background: rgba(114,165,255,.06);
  color: #a9c4ff;
  font-size: .76rem;
  letter-spacing: .055em;
}
.data-health.is-live { border-color: rgba(100,214,154,.24); background: rgba(100,214,154,.055); color: #83dba9; }
.data-health.is-unavailable { border-color: rgba(224,122,106,.35); background: rgba(224,122,106,.075); color: #ef9b8d; }

.panel { margin: 18px 0; }

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.gauge {
  border: 1px solid rgba(255,255,255,.095);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.32);
}

.gauge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.gauge-label {
  color: #9c9588;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gauge-value {
  font-size: 22px;
  font-weight: 250;
  color: #ead28b;
  font-variant-numeric: tabular-nums;
}

.meter {
  height: 6px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6fb3c9, #c9a23d);
  transition: width .3s ease;
}

.meter-fill.is-warn { background: linear-gradient(90deg, #e6b75a, #e07a6a); }
.meter-fill.is-hot { background: linear-gradient(90deg, #e07a6a, #c94f3d); }

.task-time-card {
  border: 1px solid rgba(201,162,61,.22);
  background: rgba(201,162,61,.055);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
}

.task-time-label {
  color: #9c9588;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.task-time-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 18px;
  color: #ead28b;
  font-variant-numeric: tabular-nums;
}

.task-time-value.is-idle { color: #6f6a61; }

.checker-track{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--checker-cols, 9), 1fr);
  grid-template-rows: repeat(3, 3px);
  grid-auto-flow: column;
  row-gap: 5px;
  align-items: center;
  justify-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.095);
  background: rgba(255,255,255,.02);
}

.checker-cell{
  width: 3px;
  height: 3px;
  background: rgba(255,255,255,.08);
  transition: background .4s ease;
}

.engagement-card{
  border: 1px solid rgba(255,255,255,.095);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.32);
}

.engagement-stat{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.engagement-meter{ height: 6px; margin-top: 4px; }

.z-island-nav{position:sticky;top:0;z-index:999;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(5,6,7,.96);backdrop-filter:blur(18px);gap:12px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.z-brand{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden}
.z-mark{width:18px;height:18px;background:linear-gradient(135deg,#c9a23d,#b47a32);flex-shrink:0;display:inline-block}
.z-os{font-size:.67rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,238,224,.45);white-space:nowrap}
.z-sep{color:rgba(255,255,255,.18);padding:0 2px}
.z-app-name{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#c9a23d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.z-back{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,238,224,.38);text-decoration:none;border:1px solid rgba(255,255,255,.08);padding:5px 12px;transition:.2s;white-space:nowrap;flex-shrink:0;font-family:inherit}
.z-back:hover{color:#c9a23d;border-color:rgba(201,162,61,.32)}
.z-island-footer{border-top:1px solid rgba(255,255,255,.07);padding:12px 18px;display:flex;justify-content:space-between;align-items:center;font-size:.65rem;letter-spacing:.1em;color:rgba(244,238,224,.24);text-transform:uppercase;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}

@media (max-width: 820px) {
  .hero { flex-direction: column; align-items: stretch; }
  h1 { font-size: clamp(24px, 8vw, 40px); }
  .task-time-card { flex-direction: column; align-items: flex-start; }
}