:root{
  --bg:#0b0b0f;
  --card:#12121a;
  --muted:#a8acb8;
  --text:#f5f7ff;
  --brand:#5ec576;
  --danger:#ff6b6b;
  --shadow: 0 10px 25px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans','Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';background:var(--bg);color:var(--text)}

.container{max-width:1100px;margin:0 auto;padding:16px}
.header{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.header h1{margin:0;font-size:28px}
.header .badge{background:var(--brand);color:#06160b;padding:4px 10px;border-radius:999px;font-weight:600}

.hero{
  width:100%;height:220px;border-radius:20px;
  background:#1a1a26 center/cover no-repeat;
  box-shadow:var(--shadow);
}

.section{margin-top:20px}
.card{background:var(--card);border-radius:16px;padding:14px;box-shadow:var(--shadow)}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chip{padding:6px 12px;border-radius:999px;border:1px solid #2a2a3a;cursor:pointer;user-select:none}
.chip.active{background:var(--brand);color:#06160b;border-color:transparent}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:780px){.grid{grid-template-columns:1fr}}

.item{display:flex;gap:12px}
.item img{width:92px;height:92px;border-radius:12px;object-fit:cover;background:#222}
.item .meta{flex:1}
.item .name{font-weight:700}
.item .desc{color:var(--muted);font-size:14px;margin:6px 0}
.item .line{display:flex;justify-content:space-between;align-items:center}
.price{font-weight:800}

.muted{color:var(--muted)}

.button{background:var(--brand);color:#06160b;border:none;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer}
.button.secondary{background:#2a2a3a;color:#ddd}
.button.danger{background:var(--danger);color:#290808}

.input, select, textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #2a2a3a;background:#101018;color:#fff}
label{font-size:14px;color:var(--muted);display:block;margin:10px 0 6px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #222;text-align:left}
.table th{color:var(--muted);font-weight:600}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.qr-box{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.qr{background:#fff;padding:8px;border-radius:12px}
.auth{max-width:360px;margin:40px auto}