/* --- INCLUDE SAME CSS AS INDEX.HTML --- */
        :root { --glass-border: 1px solid rgba(255, 255, 255, 0.6); --aero-grad: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.2) 100%); --xp-blue: #2c76dd; }
        body { margin: 0; background: linear-gradient(135deg, #0077b6 0%, #48cae4 25%, #90e0ef 50%, #caf0f8 75%, #ade8f4 100%) no-repeat center center fixed; background-size: cover; font-family: 'Verdana', sans-serif; font-size: 11px; color: #333; }
        #wrapper { width: 960px; margin: 20px auto; background: rgba(255, 255, 255, 0.9); border-radius: 8px; box-shadow: 0 15px 40px rgba(0,0,0,0.2); overflow: hidden; min-height: 600px; }
        header { height: 120px; background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); position: relative; border-bottom: 1px solid #8bb0cc; }
        .logo-area { position: absolute; top: 20px; left: 20px; }
        h1 { margin: 0; font-family: 'Trebuchet MS', sans-serif; font-size: 32px; color: #0055aa; text-shadow: 2px 2px 2px rgba(255,255,255,0.8); }
        #nav-bar { position: absolute; bottom: 0; right: 20px; display: flex; gap: 3px; }
        .nav-tab { display: block; padding: 8px 12px; background: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%); border-radius: 8px 8px 0 0; border: 1px solid #aaa; border-bottom: none; text-decoration: none; color: #555; font-weight: bold; font-size: 11px; white-space: nowrap; }
        .nav-tab:hover { background: linear-gradient(to bottom, #d4f4ff 0%, #a3e4ff 100%); color: #0055aa; }
        .nav-tab.active { background: #fff; padding-bottom: 9px; color: #000; margin-bottom: -1px; z-index: 10; }
        .content-pad { padding: 40px; }
        .content-pad h2 { border-bottom: 2px solid #0078d7; padding-bottom: 10px; color: #004488; }
        .content-pad h3 { color: #004488; margin-top: 25px; }
        .policy-box { background: #fff; border: 1px solid #ddd; padding: 20px 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-radius: 5px; line-height: 1.6; }
        .policy-box a { color: #2c76dd; }
        footer { text-align: center; padding: 20px; color: #666; border-top: 1px solid #ccc; background: #f0f0f0; font-size: 10px; }
        footer a { color: #2c76dd; }
    
    

        #auth-container {
            position: absolute; top: 15px; right: 20px; z-index: 1000;
            display: flex; gap: 10px; align-items: center;
            font-family: 'Verdana', sans-serif; font-size: 11px;
        }
        .glass-pill {
            border-radius: 20px; padding: 5px 15px; cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: flex;
            align-items: center; gap: 8px; font-weight: bold;
            transition: all 0.2s; position: relative; user-select: none;
        }
        .glass-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
        .token-pill {
            background: linear-gradient(to bottom, #fff 0%, #fffdf0 50%, #fff8db 100%);
            border: 1px solid #d4af37; color: #8a6d3b;
        }
        .user-pill {
            background: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
            border: 1px solid #aaa; color: #333;
        }
        #user-dropdown {
            display: none; position: absolute; top: 35px; right: 0; width: 160px;
            background: rgba(255, 255, 255, 0.98); border: 1px solid #999;
            border-radius: 5px; box-shadow: 0 5px 20px rgba(0,0,0,0.3);
            backdrop-filter: blur(5px); text-align: left; overflow: hidden; z-index: 2000;
        }
        .dd-item {
            display: block; padding: 8px 12px; color: #333; text-decoration: none;
            border-bottom: 1px solid #eee;
        }
        .dd-item:hover { background: #e6f7ff; color: #0055aa; }
    
@keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}