:root{--bg-color: #0f172a;--card-bg: #1e293b;--text-main: #f8fafc;--text-sub: #94a3b8;--accent: #3b82f6}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-main);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}nav{background-color:#1e293b;padding:1rem 2rem;border-bottom:1px solid #334155;display:flex;justify-content:space-between;align-items:center}nav a{color:var(--text-main);text-decoration:none;margin-left:1.5rem;font-weight:500}nav a:hover{color:var(--accent)}.grid-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;padding:2rem}.card{background-color:var(--card-bg);border-radius:8px;padding:1.5rem;box-shadow:0 4px 6px -1px #00000080;cursor:pointer;transition:transform .2s;border:1px solid #334155;position:relative}.card:hover{transform:translateY(-5px);border-color:var(--accent)}.card h3{margin-top:0;color:var(--text-main)}.card p{color:var(--text-sub);font-size:.9rem}.tag{position:absolute;top:1rem;right:1rem;background:#dc2626;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:700}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:var(--card-bg);padding:2rem;border-radius:8px;max-width:600px;width:90%;position:relative}.close-btn{position:absolute;top:1rem;right:1rem;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}