body { background-color: #0A1A2F; color: #fff; font-family: 'Inter', sans-serif; }
        .glass { background: rgba(26,42,63,0.5); backdrop-filter: blur(24px); border: 1px solid rgba(168,216,255,0.12); }
        .glass-card { background: linear-gradient(135deg, rgba(168,216,255,0.05) 0%, rgba(10,26,47,0.4) 100%); backdrop-filter: blur(20px); border: 1px solid rgba(168,216,255,0.15); transition: all 0.3s ease; }
        .page { display: none; }
        .page.active { display: block; }
        .tab { display: none; }
        .tab.active { display: block; }
        .field input, .field textarea, .field select { width: 100%; padding: 0.75rem 1rem 0.75rem 2.75rem; background: rgba(10,26,47,0.6); border: 1px solid rgba(168,216,255,0.15); border-radius: 0.75rem; color: white; font-size: 0.875rem; transition: border-color 0.2s; }
        .field input:focus, .field textarea:focus { outline: none; border-color: #A8D8FF; box-shadow: 0 0 0 3px rgba(168,216,255,0.08); }
        .field-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: #4a6080; pointer-events: none; }
        .btn-primary { width: 100%; padding: 0.875rem; background: #A8D8FF; color: #0A1A2F; font-weight: 700; border-radius: 0.75rem; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.9rem; letter-spacing: 0.01em; }
        .btn-primary:hover { background: #fff; box-shadow: 0 0 30px rgba(168,216,255,0.4); transform: translateY(-1px); }
        .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
        .msg-admin { background: rgba(168,216,255,0.08); border-left: 3px solid #A8D8FF; border-radius: 0 0.5rem 0.5rem 0; }
        .msg-client { background: rgba(168,216,255,0.04); border-left: 3px solid rgba(255,255,255,0.15); border-radius: 0 0.5rem 0.5rem 0; }
        .spinner { border: 2px solid rgba(10,26,47,0.3); border-top-color: #0A1A2F; border-radius: 50%; width: 18px; height: 18px; animation: spin 0.7s linear infinite; display: inline-block; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .auth-tab-active { background: #A8D8FF; color: #0A1A2F; font-weight: 600; }
        .auth-tab-inactive { color: rgba(255,255,255,0.5); }
        .auth-tab-inactive:hover { color: rgba(255,255,255,0.8); }
        .code-input { background: rgba(10,26,47,0.6) !important; border: 1px solid rgba(168,216,255,0.2) !important; border-radius: 0.75rem !important; color: white !important; text-align: center; font-size: 2rem !important; font-weight: 700; letter-spacing: 0.5rem; padding: 1rem !important; width: 100% !important; transition: border-color 0.2s; }
        .code-input:focus { outline: none; border-color: #A8D8FF !important; box-shadow: 0 0 0 3px rgba(168,216,255,0.1) !important; }
        .tab-btn { transition: all 0.2s; }
        .glow { box-shadow: 0 0 40px rgba(168,216,255,0.15); }
        @keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
        .fade-up { animation: fadeUp 0.4s ease forwards; }

        /* Welcome overlay */
        #welcome-overlay {
            position: fixed; inset: 0; z-index: 200;
            background: rgba(5,15,26,0.85); backdrop-filter: blur(12px);
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        #welcome-overlay.show { opacity: 1; visibility: visible; }
        .welcome-card {
            background: linear-gradient(135deg, rgba(26,42,63,0.95) 0%, rgba(10,26,47,0.98) 100%);
            border: 1px solid rgba(168,216,255,0.2);
            border-radius: 1.5rem; padding: 2.5rem;
            max-width: 420px; width: 90%; text-align: center;
            transform: scale(0.9) translateY(20px);
            transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
            box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 60px rgba(168,216,255,0.08);
        }
        #welcome-overlay.show .welcome-card { transform: scale(1) translateY(0); }
        .welcome-icon {
            width: 80px; height: 80px; border-radius: 50%;
            background: rgba(168,216,255,0.08);
            border: 1px solid rgba(168,216,255,0.2);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 1.5rem;
            animation: welcome-pulse 2s ease-in-out infinite;
        }
        @keyframes welcome-pulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(168,216,255,0.2); }
            50% { box-shadow: 0 0 0 12px rgba(168,216,255,0); }
        }
        /* Confetti */
        .confetti-piece {
            position: fixed; width: 8px; height: 8px; border-radius: 2px;
            animation: confetti-fall linear forwards;
            pointer-events: none; z-index: 201;
        }
        @keyframes confetti-fall {
            0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }
        /* Toast de regresso */
        #return-toast {
            position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(80px);
            background: rgba(26,42,63,0.95); border: 1px solid rgba(168,216,255,0.2);
            border-radius: 9999px; padding: 0.75rem 1.5rem;
            display: flex; align-items: center; gap: 0.75rem;
            font-size: 0.875rem; color: #fff; z-index: 100;
            transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.5s ease;
            opacity: 0; backdrop-filter: blur(12px);
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
            white-space: nowrap;
        }
        #return-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }