:root {
    --lp-bg-start: #111318;
    --lp-bg-end: #1c1f27;
    --lp-tile-bg: rgba(255, 255, 255, 0.08);
    --lp-tile-bg-hover: rgba(255, 255, 255, 0.14);
    --lp-text: rgba(255, 255, 255, 0.92);
    --lp-text-dim: rgba(255, 255, 255, 0.7);
    --lp-border: rgba(255, 255, 255, 0.12);
}

html, body {
    height: 100%;
}

/* Background gradient with subtle pattern */
.launchpad {
    min-height: 100vh;
    background: radial-gradient(1200px 800px at 20% 10%, #2a2f3a 0%, transparent 60%),
    radial-gradient(1000px 600px at 80% 80%, #202634 0%, transparent 60%),
    linear-gradient(160deg, var(--lp-bg-start), var(--lp-bg-end));
    position: relative;
    overflow: hidden;
}

.launchpad::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .4;
    mask-image: radial-gradient(1200px 800px at 50% 50%, black, transparent 85%);
    pointer-events: none;
}

/* Grid tiles */
.app-tile {
    display: inline-block;
}

.app-icon-wrap {
    /* No background or border by default for transparency */
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    padding: 14px;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.app-icon {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 22%; /* macOS-like rounded squircle */
    display: block;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

@media (min-width: 576px) {
    .app-icon {
        width: 108px;
        height: 108px;
    }
}

@media (min-width: 768px) {
    .app-icon {
        width: 120px;
        height: 120px;
    }
}

.app-name {
    font-size: .95rem;
    color: var(--lp-text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Hover and focus states */
.app-tile:focus .app-icon,
.app-tile:hover .app-icon {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.app-tile:focus .app-name,
.app-tile:hover .app-name {
    color: var(--lp-text);
}

/* Subtle bounce on click */
.app-tile:active .app-icon-wrap {
    transform: translateY(0) scale(0.98);
}

/* Fine-tune row spacing on small screens */
.row.g-4 > [class^="col-"] {
    display: flex;
}