:root {
    --tuyet-main-blue: #00a8ff;
    --tuyet-card-bg: rgba(15, 23, 42, 0.65); 
    --tuyet-border-light: rgba(255, 255, 255, 0.15);
    --tuyet-border-mid: rgba(255, 255, 255, 0.3);
    --text-main: #f8fafc;
    --text-sub: #cbd5e1;
}

body {
    background: linear-gradient(to bottom, #020617, #0f172a);
    background-attachment: fixed;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; margin: 0; font-family: 'Noto Serif', serif; padding: 20px;
    overflow-x: hidden; color: var(--text-main);
}

/* --- UI/UX: MÀN HÌNH INTRO & LOADER --- */
#intro-overlay, #global-loader {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
#intro-overlay { background-color: #0b192c; cursor: pointer; }
#global-loader { background: rgba(2, 6, 23, 0.85); backdrop-filter: blur(8px); z-index: 9999999; transition-duration: 0.3s; }
.hidden { opacity: 0 !important; visibility: hidden !important; display: none !important; }

#intro-overlay img { max-width: 80%; max-height: 60vh; object-fit: contain; border-radius: 50%; box-shadow: 0 0 40px rgba(0, 168, 255, 0.4); animation: pulse-intro 3s infinite alternate; }
.intro-text, #loader-text { font-family: 'Dancing Script', cursive; color: #00a8ff; animation: blink 1.5s infinite; text-align: center; }
.intro-text { font-size: 2.8em; margin-top: 30px; text-shadow: 0 0 15px rgba(0, 168, 255, 0.8); padding: 0 20px; }
#loader-text { font-size: 1.8em; margin-top: 20px; text-shadow: 0 0 10px rgba(0,168,255,0.5); }
.loader-spinner { font-size: 3.5em; animation: spinLoader 2s linear infinite; filter: drop-shadow(0 0 15px rgba(0, 168, 255, 0.8)); }

@keyframes pulse-intro { from { transform: scale(1); box-shadow: 0 0 30px rgba(0, 168, 255, 0.3); } to { transform: scale(1.05); box-shadow: 0 0 60px rgba(0, 168, 255, 0.9); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes spinLoader { 100% { transform: rotate(360deg); } }

#snow-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; }

.card {
    background-color: var(--tuyet-card-bg); backdrop-filter: blur(12px); padding: 25px; border-radius: 16px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.5); text-align: center; border: 1px solid var(--tuyet-border-light);
    max-width: 450px; width: 100%; min-height: 630px; position: relative; z-index: 10;
}

h2 { color: #00a8ff; font-family: 'Dancing Script', cursive; margin-top: 0; font-size: 2.4em; text-shadow: 1px 1px 0px rgba(255,255,255,0.1), 2px 2px 0px rgba(0,0,0,0.3); }

.tab-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-bottom: 25px; border-bottom: 1px solid var(--tuyet-border-light); padding-bottom: 5px; }
.tab-btn { padding: 10px 4px; cursor: pointer; background: none; border: none; font-family: 'Noto Serif', serif; font-size: 0.85em; color: var(--text-sub); transition: 0.3s; flex: 1 1 20%; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab-btn:hover { color: var(--text-main); }
.tab-btn.active { color: #00a8ff; border-bottom: 2px solid #00a8ff; font-weight: bold; }

.btn-logout-white { background: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 6px; color: #fff !important; flex: 1 1 100% !important; margin-top: 5px; padding: 8px !important; font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.btn-logout-white:hover { background: rgba(255, 255, 255, 0.25) !important; border-color: #fff !important; }

.tab-pane { display: none; animation: tabFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.tab-pane.active-tab { display: block; }
@keyframes tabFadeIn { 0% { opacity: 0; transform: translateY(15px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

/* --- FORMS & BUTTONS --- */
.form-group { text-align: left; margin-bottom: 18px; }
.form-group label { display: block; font-size: 0.9em; color: var(--text-sub); margin-bottom: 7px; }
.form-group input { width: 100%; padding: 13px; border: 1px solid var(--tuyet-border-mid); border-radius: 8px; box-sizing: border-box; font-size: 16px; outline: none; background-color: rgba(0, 0, 0, 0.4); color: var(--text-main); transition: 0.3s; }
.form-group input:focus { border-color: #00a8ff; background-color: rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 3px rgba(0,168,255,0.2); }

.submit-button, .btn { width: 100%; background-color: #00a8ff; color: white; padding: 14px; border: none; border-radius: 8px; font-size: 1.05em; cursor: pointer; transition: 0.3s; margin-top: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; }
.submit-button:hover, .btn:hover { background-color: #0097e6; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,168,255,0.3); }
.submit-button:active, .btn:active { transform: translateY(0); }
.btn-download { background-color: #27ae60; margin-top: 15px; font-size: 1em; letter-spacing: 0.5px; }
.btn-download:hover { background-color: #219150; }
.btn-join { background-color: #00a8ff; border: 1px solid #00a8ff; } 
.btn-leave { background-color: rgba(0, 168, 255, 0.1); color: #00a8ff; border: 1px solid #00a8ff; }
.btn-join:hover { background-color: #0097e6; border-color: #0097e6; }
.btn-leave:hover { background-color: rgba(0, 168, 255, 0.2); color: #00a8ff; border-color: #00a8ff; }
.btn:disabled { background-color: #475569; cursor: not-allowed; transform: none; box-shadow: none; border-color: #475569; color: #94a3b8;}

/* --- MODALS & EXTRAS --- */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 2000; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.modal-content { background: var(--tuyet-card-bg); backdrop-filter: blur(15px); padding: 25px; border-radius: 12px; text-align: center; max-width: 320px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); border: 1px solid var(--tuyet-border-light); color: var(--text-main); }
.policy-content { max-width: 450px !important; width: 90%; max-height: 80vh; overflow-y: auto; text-align: left !important; }
.btn-container { display: flex; gap: 12px; margin-top: 15px;}

.top-right-tools { position: fixed; top: 20px; right: 20px; display: flex; gap: 12px; z-index: 9999; }
.icon-btn { background-color: var(--tuyet-card-bg); backdrop-filter: blur(8px); border: 1px solid var(--tuyet-border-light); width: 45px; height: 45px; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.3); font-size: 1.3em; display: flex; align-items: center; justify-content: center; transition: 0.3s; padding: 0; color: var(--text-main); }
.icon-btn:hover { color: #00a8ff; border-color: #00a8ff; transform: translateY(-2px); }
.icon-btn.dimmed { opacity: 0.5; filter: grayscale(100%); }

#toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(10px); color: #fff; padding: 12px 24px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); font-size: 0.95em; opacity: 0; transform: translateY(-20px); transition: all 0.3s ease; text-align: center; border-left: 4px solid #00a8ff; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-left-color: #ff4757; }
.toast.success { border-left-color: #2ed573; }

.btn-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }