/* CSS extracted from: c:\xampp\htdocs\school\views\auth\login.php */

:root {
            --neu-bg-sage:          #7b9b86;
            --neu-surface-cream:    #faf8f3;
            --neu-surface-cream-2:  #f4f1e8;
            --neu-terracotta:       #c87d55;
            --neu-terracotta-dark:  #a95e38;
            --neu-teal:             #58a497;
            --neu-text-dark:        #2c3531;
            --neu-text-muted:       #48544e;
            
            --neu-shadow-raised-lg: 14px 18px 36px rgba(40, 60, 48, 0.16), -12px -12px 30px #ffffff;
            --neu-shadow-sunken:    inset 3px 3px 8px rgba(44, 53, 49, 0.12), inset -3px -3px 8px #ffffff;
            --neu-shadow-pressed:   inset 4px 4px 10px rgba(44, 53, 49, 0.18), inset -4px -4px 10px #ffffff;
            --neu-edge-specular:    1px solid rgba(255, 255, 255, 0.85);
            --neu-edge-border:      1px solid rgba(220, 215, 202, 0.60);
        }

        body {
            font-family: 'Inter', system-ui, sans-serif;
            min-height: 100vh;
            background-color: var(--neu-bg-sage);
            background-image: radial-gradient(at 0% 0%, rgba(255, 255, 255, 0.12) 0px, transparent 50%),
                              radial-gradient(at 100% 100%, rgba(0, 0, 0, 0.05) 0px, transparent 50%);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-x: hidden;
            padding: 24px 16px;
            margin: 0;
            position: relative;
            color: var(--neu-text-dark);
        }

        /* Ambient Tactile Login Card Container */
        .login-card {
            width: 100%;
            max-width: 440px;
            background-color: var(--neu-surface-cream);
            border-radius: 28px;
            border: var(--neu-edge-specular);
            box-shadow: var(--neu-shadow-raised-lg);
            padding: 42px 36px;
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 22px;
            animation: neuFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: none !important;
        }

        /* Role Quick Selection Pills */
        .role-pill-group {
            display: flex;
            gap: 6px;
            justify-content: center;
            flex-wrap: wrap;
            background-color: var(--neu-surface-cream-2);
            padding: 6px;
            border-radius: 50px;
            box-shadow: var(--neu-shadow-sunken);
            border: var(--neu-edge-border);
        }
        .role-pill-btn {
            border: none;
            background: transparent;
            color: var(--neu-text-muted);
            font-weight: 700;
            font-size: 12px;
            padding: 6px 14px;
            border-radius: 50px;
            transition: all 0.2s ease;
            cursor: pointer;
            text-decoration: none;
        }
        .role-pill-btn:hover {
            color: var(--neu-text-dark);
        }
        .role-pill-btn.active {
            background-color: var(--neu-surface-cream);
            color: var(--neu-terracotta);
            box-shadow: 4px 4px 10px rgba(45, 65, 53, 0.12), -4px -4px 10px #ffffff;
        }

        /* Brand Logo Specular Recess */
        .brand-logo-recess {
            width: 80px; height: 80px;
            background-color: var(--neu-surface-cream-2);
            border-radius: 22px;
            box-shadow: var(--neu-shadow-sunken);
            border: var(--neu-edge-border);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            overflow: hidden;
            padding: 12px;
            transition: all 0.25s ease;
        }
        .brand-logo-recess:hover {
            transform: scale(1.05);
        }

        .login-title {
            font-size: 22px;
            font-weight: 800;
            text-align: center;
            margin-bottom: 4px;
            color: var(--neu-text-dark);
            letter-spacing: -0.4px;
        }

        .login-subtitle {
            font-size: 13px;
            font-weight: 600;
            text-align: center;
            color: var(--neu-text-muted);
            margin-bottom: 0;
        }

        /* Sunken Concave Recessed Form Controls */
        .neu-form-field {
            position: relative;
            margin-bottom: 16px;
        }
        .neu-input-control {
            width: 100%;
            background-color: var(--neu-surface-cream-2);
            box-shadow: var(--neu-shadow-sunken);
            border: var(--neu-edge-border);
            border-radius: 16px;
            height: 52px;
            padding: 12px 16px 12px 46px;
            font-size: 14px;
            font-weight: 600;
            color: var(--neu-text-dark);
            outline: none;
            transition: all 0.2s ease;
        }
        .neu-input-control:focus {
            border-color: var(--neu-teal);
            box-shadow: inset 4px 4px 10px rgba(44, 53, 49, 0.16), inset -4px -4px 10px #ffffff, 0 0 0 3px rgba(88, 164, 151, 0.2);
            background-color: var(--neu-surface-cream);
        }
        .neu-field-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--neu-text-muted);
            font-size: 16px;
            pointer-events: none;
            transition: color 0.2s ease;
        }
        .neu-input-control:focus ~ .neu-field-icon {
            color: var(--neu-teal);
        }

        /* Tactile Pill Submit Button */
        .btn-submit-neu {
            background: linear-gradient(135deg, var(--neu-terracotta) 0%, var(--neu-terracotta-dark) 100%);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 50px;
            height: 52px;
            width: 100%;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 6px 6px 18px rgba(169, 94, 56, 0.35), -4px -4px 14px #ffffff;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .btn-submit-neu:hover {
            transform: translateY(-2px);
            box-shadow: 8px 8px 22px rgba(169, 94, 56, 0.45), -4px -4px 14px #ffffff;
            color: #ffffff;
        }
        .btn-submit-neu:active {
            transform: translateY(2px);
            box-shadow: var(--neu-shadow-pressed);
        }

        .footer-text {
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: var(--neu-text-muted);
        }

        @keyframes neuFadeIn {
            from { opacity: 0; transform: translateY(12px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }