/* KnexPay Base Styles - Blueprint Inspired */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    font-size: 14px;
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    overscroll-behavior: none;
    touch-action: manipulation;
}

/* Landscape Mode Warning */
@media screen and (orientation: landscape) {
    .app-container {
        display: none !important;
    }

    body::before {
        content: "Please rotate your device to portrait mode";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: var(--bg);
        color: var(--neon);
        padding: 20px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        font-family: var(--font);
        text-align: center;
        font-size: 14px;
        z-index: var(--z-toast);
        width: 80%;
        max-width: 400px;
        text-shadow: var(--glow-neon);
    }
}

/* Selection */
::selection {
    background: var(--neon);
    color: var(--bg);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon);
}

/* Links */
a {
    color: var(--neon);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--cyan);
    text-shadow: var(--glow-cyan);
}

/* Focus States */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--neon);
    outline-offset: 2px;
}

/* Text Utilities */
.text-neon { color: var(--neon); text-shadow: var(--glow-neon); }
.text-cyan { color: var(--cyan); text-shadow: var(--glow-cyan); }
.text-magenta { color: var(--magenta); text-shadow: var(--glow-magenta); }
.text-yellow { color: var(--yellow); text-shadow: var(--glow-yellow); }
.text-red { color: var(--red); text-shadow: var(--glow-red); }
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }

/* Display Utilities */
.hidden { display: none !important; }
.visible { display: block !important; }
.flex { display: flex !important; }
.grid { display: grid !important; }

/* Spacing Utilities */
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }