/* OpenPortal VPN — PWA styles (Tailwind handles most; this fills the gaps) */

body {
    -webkit-tap-highlight-color: transparent;
}

/* Glass morphism — referenced in index.html */
.glass-card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.glass-panel {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Step badge used in Android/iOS setup screens */
.step-pill {
    background: #6c5ce7;
    color: #fff;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Material Symbols — ensure consistent render style */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

/* Smooth momentum scroll on iOS */
main {
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar on chrome/safari mobile */
::-webkit-scrollbar {
    display: none;
}