:root{ --bg:#0f172a; --card:#111827; --muted:#6b7280; --text:#e5e7eb; --accent:#22c55e; --link:#60a5fa;}
*{box-sizing:border-box}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans,'Apple Color Emoji','Segoe UI Emoji'; background:var(--bg); color:var(--text);}
a{color:var(--link); text-decoration:none} a:hover{text-decoration:underline}
header{position:sticky; top:0; z-index:10; background:rgba(2,6,23,.9); backdrop-filter: blur(6px); border-bottom:1px solid #1f2937}
.container{max-width:1100px; margin:0 auto; padding:16px;}
h1{font-size:clamp(22px,3vw,32px); margin:0 0 8px}
.searchbar{display:flex; gap:8px; margin:12px 0 8px}
input[type="search"]{flex:1; padding:12px 12px; border-radius:10px; border:1px solid #334155;}
button.primary{padding:10px 14px; margin-left: 10px; border-radius:10px; border:1px solid #334155; background:#0b1220; color:var(--text); cursor:pointer}
button.primary:hover{border-color:#475569}
.grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px}
.card{background:var(--card); border:1px solid #1f2937; border-radius:16px; padding:16px; box-shadow:0 4px 12px rgba(0,0,0,.2)}
.badge{display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:#0b1220; border:1px solid #334155; color:#cbd5e1; margin:10px}
footer{border-top:1px solid #1f2937; margin-top:32px}
.list{display:flex; flex-direction:column; gap:8px}
.item{display:flex; gap:12px; align-items:center; padding:10px; border-radius:12px; border:1px solid #1f2937; background:rgb(72 72 72)}
.item:hover{background:rgba(17,24,39,.8)}
.thumb{width:64px; height:64px; border-radius:10px; object-fit:cover; background:#0b1220; border:1px solid #334155}
.small{font-size:12px; color:#9ca3af}
.artletters{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 16px}
.letter{padding:6px 10px; border:1px solid #334155; border-radius:8px; background:#0b1220; color:#ffffff}
.hero{display:flex; gap:14px; align-items:center}
.price{font-weight:700; color:#a7f3d0}
hr{border:0; border-top:1px solid #1f2937; margin:10px 0}
.pagination{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0}
.page-link{padding:6px 10px; border:1px solid #334155; border-radius:8px; background:#0b1220}
.navtabs{display:flex; gap:10px; margin-top:8px}
.navtabs a{padding:6px 10px; border:1px solid #334155; border-radius:8px; background:#0b1220}
.buybtn{display:inline-block; padding:10px 14px; border-radius:12px; background:#16a34a; color:white; border:1px solid #22c55e; margin:10px;}
.buybtn:hover{filter:brightness(1.1)}