:root{
  --bg:#0b1220; --panel:#121a2a; --text:#eaeef7; --muted:#a7b1c4;
  --brand:#14B8A6; --accent:#6366F1; --card:#101929; --border:#1f2b43;
}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,Segoe UI,Roboto,Ubuntu,Inter,Arial;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav {display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--panel);border-bottom:1px solid var(--border)}
.nav .brand{font-weight:800;color:var(--brand);font-size:1.1rem}
.nav-links a{margin-left:16px;color:var(--text);padding:6px 8px;border-radius:8px}
.nav-links a.active{background:#0f1a2b;border:1px solid var(--border)}
.search{display:flex;gap:8px;flex:1;max-width:460px;margin:0 16px}
.search input{flex:1;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#0d1524;color:var(--text)}
.search button{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:#0e1a2b;color:var(--text)}
.alert{background:#1b273e;border:1px solid var(--border);padding:10px;border-radius:10px;margin:12px 0;color:#f8d7da}
.hero{padding:64px 24px;background:linear-gradient(180deg, rgba(20,184,166,.08), rgba(99,102,241,.08));border:1px solid var(--border);border-radius:16px}
.hero h1{font-size:2.2rem;margin:0 0 12px}
.hero .sub{color:var(--muted);margin:0 0 16px}
.btn{display:inline-block;background:var(--brand);color:#03161a;padding:10px 16px;border-radius:10px;font-weight:700}
.btn-outline{display:inline-block;padding:8px 14px;border:1px solid var(--brand);border-radius:10px;color:var(--brand)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:24px}
.card{background:var(--card);border:1px solid var(--border);padding:16px;border-radius:16px}
.card h3{margin:0 0 6px}
.meta{list-style:none;padding:0;margin:0 0 12px;color:var(--muted);display:grid;gap:4px}
.detail{background:var(--card);border:1px solid var(--border);padding:18px;border-radius:16px}
.bullets{margin:0 0 16px 16px}
.form{display:grid;gap:10px;max-width:520px}
.form input,.form textarea,.filters input,.filters select{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;background:#0e1627;color:var(--text)}
.filters{display:flex;gap:10px;align-items:center;margin:10px 0 18px}
.table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left;vertical-align:top}
.page h1{margin:0 0 8px}
.page .price{font-weight:800;margin-top:8px}

.footer{margin-top:32px;padding:24px;color:var(--muted);border-top:1px solid var(--border);background:#0c1322}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:8px}
.footer a{color:#cdd6ea}
.footer-grid a:hover {color: var(--brand);transition: color 0.2s ease;}
.footer-grid h4 {font-size: 1rem;font-weight: 600;}
.footer svg:hover {fill: var(--brand);transition: fill 0.2s ease;}

.copy{margin-top:8px;text-align:center}
@media (max-width:720px){ .search{display:none} .filters{flex-direction:column;align-items:stretch} }