:root {
    --sd-cols-d: 3;
    --sd-cols-t: 2;
    --sd-cols-m: 1;
}

#sd-tiles {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(var(--sd-cols-d), 1fr);
    margin-top: 20px;
}

@media (max-width: 1024px) { #sd-tiles { grid-template-columns: repeat(var(--sd-cols-t), 1fr); } }
@media (max-width: 600px) { #sd-tiles { grid-template-columns: repeat(var(--sd-cols-m), 1fr); } }

.sd-tile {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    background: #fff;
    transition: 0.3s;
}

.sd-tile:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* Modal Styles */
#sd-modal {
    position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center;
}

.sd-modal-content {
    background: #fff; padding: 30px; border-radius: 12px; width: 90%; max-width: 600px;
    position: relative; max-height: 80vh; overflow-y: auto;
}

.sd-close { position: absolute; right: 20px; top: 10px; font-size: 28px; cursor: pointer; }
.sd-modal-hidden { display: none; }