*{box-sizing:border-box}
body{margin:0;background:#101010;color:#fff;font-family:Arial,Helvetica,sans-serif}
a{color:#f5c542;text-decoration:none}
a:hover{text-decoration:underline}
.topbar{background:#000;border-bottom:4px solid #f5c542;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brand{font-size:28px;font-weight:900;color:#f5c542;letter-spacing:.3px}
.tagline{opacity:.82;font-size:14px;margin-top:3px}
.nav a{margin-left:14px;font-weight:800;color:#f5c542}
.wrap{padding:24px;max-width:1220px;margin:auto}
.hero{background:linear-gradient(135deg,#171717,#25210e);border:1px solid #3c3212;border-radius:22px;padding:24px;margin-bottom:20px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hero h1{margin:0 0 8px;font-size:36px}
.badge{display:inline-block;background:#f5c542;color:#000;border-radius:999px;padding:6px 12px;font-weight:900}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.card{background:#1b1b1b;border:1px solid #343434;border-radius:18px;padding:20px;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.card h2,.card h3{margin-top:0;color:#f5c542}
.item{padding:11px 0;border-bottom:1px solid #333;line-height:1.35}
.item:last-child{border-bottom:0}
.muted{opacity:.74}
.btn{display:inline-block;background:#f5c542;color:#000;border:0;border-radius:10px;padding:10px 14px;font-weight:900;cursor:pointer;text-decoration:none}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.secondary{background:#2b2b2b;color:#f5c542;border:1px solid #4a4a4a}
.input,select,textarea{padding:10px;border-radius:9px;border:1px solid #555;background:#222;color:#fff;width:100%;max-width:620px;font-family:Arial,Helvetica,sans-serif}
textarea.input{min-height:120px}
label{display:block;margin:13px 0;line-height:1.45}
.footer{opacity:.65;text-align:center;padding:30px}
.ok{color:#77f28a}.warn{color:#ffd166}.bad{color:#ff6b6b}
.monitor{font-size:120%;overflow:hidden}
.clock{font-size:56px;font-weight:900;color:#f5c542;margin-bottom:18px}
.bigevent{font-size:30px;font-weight:900}
.status-dot{height:12px;width:12px;border-radius:50%;display:inline-block;background:#77f28a;margin-right:7px;box-shadow:0 0 12px #77f28a}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #333;padding:11px;text-align:left;vertical-align:top}
.table th{color:#f5c542}
@media(max-width:700px){.hero h1{font-size:28px}.nav a{display:inline-block;margin:6px 8px 0 0}.wrap{padding:16px}.clock{font-size:42px}}