:root{--primary:#0b3d91;--primary2:#082e6d;--accent:#f59e0b;--bg:#f1f5f9;--card:#fff;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;--ok:#166534;--okbg:#dcfce7;--warn:#92400e;--warnbg:#fef3c7;--soon:#475569;--soonbg:#e2e8f0}
*{box-sizing:border-box} body{margin:0;font-family:Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.top{background:linear-gradient(135deg,var(--primary),#1d4ed8);color:#fff;padding:1.1rem 1.25rem;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.top .inner{max-width:1500px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand h1{margin:0;font-size:1.35rem;letter-spacing:.2px}
.brand p{margin:.15rem 0 0;opacity:.9;font-size:.92rem}
.top a{color:#fff}
.wrap{max-width:1500px;margin:1.25rem auto;padding:0 .75rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem 1.05rem;box-shadow:0 4px 14px rgba(15,23,42,.05);display:flex;flex-direction:column;gap:.4rem}
.card h3{margin:.1rem 0;font-size:1.05rem}
.card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.4;flex:1}
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:.18rem .55rem;border-radius:999px;letter-spacing:.2px}
.b-ok{background:var(--okbg);color:var(--ok)} .b-soon{background:var(--warnbg);color:var(--warn)} .b-later{background:var(--soonbg);color:var(--soon)}
.actions{margin-top:.55rem}
.btn{display:inline-block;background:var(--primary);color:#fff;text-decoration:none;padding:.5rem .85rem;border-radius:9px;font-weight:600;font-size:.9rem}
.btn:hover{background:var(--primary2)} .btn.off{background:#94a3b8;pointer-events:none}
.foot{color:var(--muted);font-size:.85rem;margin:1.25rem 0 .5rem;text-align:center}
.hero{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;margin-bottom:1rem}
.hero h2{margin:.1rem 0 .2rem;font-size:1.1rem;color:var(--primary)}
.hero p{margin:0;color:var(--muted)}
.empty{max-width:640px;margin:2rem auto;padding:1.25rem;background:#fff;border:1px solid var(--border);border-radius:14px;text-align:center}
.empty h2{margin:.2rem 0;color:var(--primary)} .empty p{color:var(--muted)}