* { margin:0; padding:0; box-sizing:border-box; }
body {
    background:#0f0f0f;
    color:#fff;
    font-family:'Roboto', sans-serif;
}
header {
    background:#1a1a1a;
    padding:15px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:100;
}
.logo { font-size:28px; font-weight:bold; color:#ff4081; }
nav a { color:#ddd; margin:0 15px; text-decoration:none; }
.search input {
    width:400px;
    padding:10px 15px;
    border:none;
    border-radius:25px;
    background:#333;
    color:white;
}
.buy-btn {
    background:#ff4081;
    color:white;
    border:none;
    padding:10px 20px;
    border-radius:25px;
    font-weight:bold;
    cursor:pointer;
}

/* Grid */
.main { padding:20px; }
.grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:20px;
}
.card {
    background:#1a1a1a;
    border-radius:8px;
    overflow:hidden;
    transition:0.3s;
}
.card:hover { transform:scale(1.05); }
.thumbnail { height:200px; position:relative; }
.thumbnail img { width:100%; height:100%; object-fit:cover; }
.duration {
    position:absolute; bottom:8px; right:8px;
    background:rgba(0,0,0,0.8); padding:2px 6px; border-radius:3px; font-size:12px;
}
.info { padding:12px; }
.title { font-size:15px; margin-bottom:8px; line-height:1.3; }

/* Modal */
.modal {
    display:none;
    position:fixed;
    top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.9);
    z-index:1000;
    align-items:center;
    justify-content:center;
}
.modal-content {
    background:#1f1f1f;
    padding:30px;
    border-radius:12px;
    width:90%;
    max-width:520px;
    text-align:center;
    position:relative;
}
.close {
    position:absolute; top:10px; right:20px;
    font-size:30px; cursor:pointer; color:#aaa;
}
.price-options {
    display:flex;
    gap:20px;
    margin:25px 0;
    justify-content:center;
}
.price-card {
    background:#2a2a2a;
    padding:20px;
    border-radius:10px;
    width:48%;
}
.price-card.best { border:2px solid #ff4081; position:relative; }
.popular {
    position:absolute; top:-10px; left:50%; transform:translateX(-50%);
    background:#ff4081; padding:2px 12px; border-radius:20px; font-size:12px;
}
.copy-btn {
    margin-top:15px;
    padding:12px 30px;
    background:#00c853;
    border:none;
    border-radius:25px;
    color:white;
    font-weight:bold;
    cursor:pointer;
}