@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

body {
    font-family: 'Inter', sans-serif !important;
    background: linear-gradient(135deg, #121216 0%, #2d1b22 100%) !important;
    background-attachment: fixed !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

.card, .input, .badge {
    border-radius: 16px !important;
    background-color: rgba(30, 30, 35, 0.4) !important; 
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 183, 197, 0.15) !important; 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important; 
}

header > div {
    display: grid !important;
}

@media (max-width: 768px) {
    header > div {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100vw !important;
        justify-items: center !important;
        align-items: start !important;
        padding: 10px !important;
    }

    form {
        grid-column: 1 / span 3 !important;
        grid-row: 1 / span 1 !important;
        width: 95% !important;
        max-width: 100% !important;
        margin: 10px auto !important;
        min-width: 0 !important;
    }

    .glances {
        grid-column: 1 / span 3 !important;
        grid-row: 2 / span 1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 183, 197, 0.05) !important;
        border-radius: 12px !important;
        padding: 5px 0 !important;
        box-sizing: border-box !important;
    }

    .glances span {
        font-size: 10px !important;
        margin-top: 2px !important;
        word-break: break-word !important;
        text-align: center !important;
    }

    .grid {
        grid-template-columns: 1fr !important;
        margin-top: 20px !important;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px !important;
    }
    
    header > div {
        gap: 8px !important;
        padding: 8px !important;
        grid-template-rows: auto auto !important;
    }
    
    form {
        width: 90% !important;
        margin: 8px auto !important;
        grid-column: 1 / span 3 !important;
        grid-row: 1 / span 1 !important;
    }
    
    .glances {
        padding: 4px 0 !important;
        grid-column: 1 / span 3 !important;
        grid-row: 2 / span 1 !important;
    }
    
    .glances span {
        font-size: 9px !important;
        margin-top: 1px !important;
    }
    
    .card, .input, .badge {
        border-radius: 12px !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .glances {
        transform: scale(0.9) !important;
        transform-origin: center top !important;
    }
}

* {
    box-sizing: border-box !important;
    word-wrap: break-word !important;
}