:root{ --bg:#0b1220; --card:#141b2d; --muted:#94a3b8; --txt:#e5e7eb; --chip:#1f2937; --up:#10b981; --down:#ef4444; --auto:#fbbf24; }
*{ box-sizing:border-box; } body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:#0b1220; color:#e5e7eb; }
.wrap{ padding:16px 18px 28px; }
.header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.title{ font-weight:700; font-size:20px; letter-spacing:.3px; display:flex; align-items:center; gap:10px; }
.badge{ font-size:12px; background:#1f2937; color:#cbd5e1; padding:2px 8px; border-radius:10px; }
.menu a{ color:#cbd5e1; text-decoration:none; margin-right:14px; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.menu a:hover{ color:#fff; }
.refresh{ display:flex; align-items:center; gap:8px; font-size:13px; color:#94a3b8; }
.card{ background:#141b2d; border:1px solid #1f2937; border-radius:14px; padding:12px 14px; }
.grid{ display:grid; gap:12px; } .grid.cards{ grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); } .grid.list{ grid-template-columns:1fr; }
.kv{ color:#cbd5e1; font-size:13px; } .kv b{ color:#fff; font-size:16px; }
.table{ width:100%; border-collapse:collapse; } .table th,.table td{ padding:8px; border-bottom:1px solid #1f2937; text-align:center; }
.table th{ color:#cbd5e1; font-weight:600; background:#0f172a; position:sticky; top:0; }
.controlsbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.controls-left{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex:1 1 auto; }
.select,.input,.btn{ background:#0f172a; border:1px solid #1f2937; color:#e5e7eb; padding:7px 10px; border-radius:10px; font-size:13px; text-decoration:none; }
.btn{ cursor:pointer; text-decoration:none; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.chip{ padding:2px 6px; border-radius:999px; background:#0f172a; border:1px solid #1f2937; font-size:12px; color:#cbd5e1; }
.up{ color:var(--up);} .down{ color:var(--down);} .small{ font-size:12px; color:#94a3b8; }
.top5{ text-align:left; padding-left:16px; list-style-position:inside; }
.led{ width:12px; height:12px; background:var(--up); border-radius:999px; box-shadow:0 0 12px rgba(16,185,129,.6); display:inline-block; }
.statusdot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.statusdot.up{ background:var(--up); box-shadow:0 0 8px rgba(16,185,129,.5); }
.statusdot.down{ background:var(--down); box-shadow:0 0 8px rgba(239,68,68,.35); }
.notice{ font-size:12px; padding:4px 8px; border-radius:8px; margin-left:8px; opacity:0; transition:opacity .2s ease; border:1px solid transparent; }
.notice.show{ opacity:1; }
.notice.manual{ color:#d1fae5; background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.35); } /* green */
.notice.auto{ color:#fff7ed; background:rgba(251,191,36,.18); border-color:rgba(251,191,36,.55); }   /* yellow */

.footer{margin-top:16px;padding-top:10px;border-top:1px solid #1f2937;text-align:center;color:#94a3b8;font-size:12px;}

/* R10d header/menu order */
.header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.header .title{order:1;flex:1 1 auto}
.header .refresh{order:2}
.header .menu{order:3;margin-left:auto}
.lastrun{margin-left:10px;font-size:12px;color:#9ca3af;white-space:nowrap}
.lastrun.running{color:#f59e0b}  /* amber when running */