/* --- 1. CORE CONFIG --- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Quicksand:wght@500;600;700&display=swap');

:root {
    --primary: #6366f1; --primary-dark: #4f46e5;
    --bg: #f3f4f6; --surface: #ffffff;
    --text: #1f2937; --text-light: #6b7280;
    --shadow-card: 0 10px 30px -10px rgba(0,0,0,0.15);
    --shadow-float: 0 15px 35px -5px rgba(99,102,241,0.4);
    --radius: 24px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; font-family:'Nunito', sans-serif; }
body { background:var(--bg); color:var(--text); height:100vh; display:flex; flex-direction:column; overflow:hidden; }
button { cursor:pointer; border:none; outline:none; transition:0.2s; } button:active { transform:scale(0.95); }
.hidden { display:none!important; }

/* AUTH */
.auth-overlay { position:fixed; inset:0; background:linear-gradient(135deg, #4f46e5, #8b5cf6); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; transition:0.4s; }
.auth-overlay.hidden { transform:translateY(-100%); opacity:0; pointer-events:none; }
.auth-card { background:rgba(255,255,255,0.95); width:100%; max-width:350px; padding:30px; border-radius:30px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.3); backdrop-filter:blur(10px); }
.logo-animate { font-size:48px; color:var(--primary); margin-bottom:10px; animation:bounce 2s infinite; }
.auth-inputs { margin:25px 0; }
.input-box {
    position: relative;
    margin-bottom: 15px;
}

.input-box .input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af; /* var(--text-light) */
    font-size: 20px;
    pointer-events: none; /* QUAN TRỌNG: Để click xuyên qua được */
}

/* 2. Ô nhập liệu */
.input-box input {
    width: 100%;
    /* Padding: Trên - Phải - Dưới - Trái */
    /* Phải 50px để né con mắt, Trái 45px để né icon khóa */
    padding: 15px 50px 15px 45px; 
    border: 2px solid #e5e7eb;
    border-radius: 15px;
    font-size: 16px;
    outline: none;
    font-weight: 600;
    background: #fff;
    transition: 0.3s;
}

.input-box input:focus {
    border-color: #6366f1; /* var(--primary) */
    background: #f5f3ff;
}
.input-box i { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--text-light); font-size:20px; }
.btn-auth-submit { width:100%; padding:16px; background:var(--primary); color:white; border-radius:15px; font-weight:800; font-size:16px; letter-spacing:0.5px; box-shadow:0 5px 15px rgba(99,102,241,0.4); }
.auth-switch { margin-top:20px; font-size:14px; color:var(--text-light); } .auth-switch b { color:var(--primary); text-decoration:underline; }

/* LAYOUT */
#main-app { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.top-bar { padding:15px 24px; background:var(--surface); display:flex; justify-content:space-between; align-items:center; z-index:10; }
.user-info { display:flex; align-items:center; gap:10px; }
.avatar-circle { width:40px; height:40px; background:#e0e7ff; color:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; }

/* Trạng thái đồng bộ (Thay nút bấm) */
.sync-status { display:flex; align-items:center; gap:6px; background:#f0fdf4; color:#16a34a; padding:6px 12px; border-radius:20px; font-size:12px; font-weight:700; border:1px solid #bbf7d0; opacity:0; transition:0.5s; }
.sync-status.show { opacity:1; }
.sync-status.saving { background:#eff6ff; color:#3b82f6; border-color:#bfdbfe; }

.view { flex:1; overflow-y:auto; padding:20px 24px 110px; display:none; animation:fadeIn 0.3s; }
.view.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes bounce { 0%, 100% {transform:translateY(0);} 50% {transform:translateY(-10px);} }

/* HOME */
.stats-container { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:25px; }
.stat-box { background:white; padding:15px; border-radius:20px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-card); }
.stat-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; color:white; }
.purple .stat-icon { background:#8b5cf6; } .pink .stat-icon { background:#ec4899; }
.stat-box h2 { font-size:20px; line-height:1; } .stat-box p { font-size:12px; color:var(--text-light); }

.ai-banner { background:linear-gradient(135deg, #6366f1, #a855f7); padding:20px; border-radius:24px; color:white; display:flex; justify-content:space-between; align-items:center; box-shadow:var(--shadow-float); margin-bottom:30px; position:relative; overflow:hidden; }
.badge-new { background:white; color:var(--primary); font-size:10px; font-weight:800; padding:3px 8px; border-radius:6px; display:inline-block; margin-bottom:5px; }
.ai-illustration { font-size:60px; opacity:0.2; transform:rotate(-15deg); position:absolute; right:-10px; bottom:-10px; }

.section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.section-head h3 { font-size:16px; font-weight:800; } .section-head span { color:var(--primary); font-size:13px; font-weight:600; }
.list-container { display:flex; flex-direction:column; gap:12px; }
.item-card { background:white; padding:18px; border-radius:18px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 2px 10px rgba(0,0,0,0.03); border:1px solid #f3f4f6; }
.item-info h4 { font-size:16px; font-weight:700; color:var(--text); } 
.item-info span { font-size:12px; background:#f3f4f6; color:var(--text-light); padding:3px 10px; border-radius:8px; font-weight:600; }

/* AI STUDIO */
.tabs-pill { display:flex; background:#e5e7eb; padding:5px; border-radius:14px; margin-bottom:20px; }
.tab-pill { flex:1; padding:10px; background:transparent; font-weight:700; color:var(--text-light); border-radius:10px; font-size:14px; }
.tab-pill.active { background:white; color:var(--primary); box-shadow:0 2px 5px rgba(0,0,0,0.1); }
.form-card { background:white; padding:25px; border-radius:24px; box-shadow:var(--shadow-card); }
.form-group { margin-bottom:15px; }
.form-group label { display:block; font-size:13px; font-weight:700; margin-bottom:8px; color:var(--text); }
.form-group input, select, textarea { width:100%; padding:14px; border:2px solid #e5e7eb; border-radius:14px; font-size:15px; font-weight:600; outline:none; background:white; }
.form-group input:focus, select:focus, textarea:focus { border-color:var(--primary); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.btn-primary-lg { width:100%; padding:16px; background:var(--text); color:white; border-radius:16px; font-weight:800; font-size:16px; display:flex; justify-content:center; align-items:center; gap:8px; margin-top:10px; box-shadow:0 5px 15px rgba(0,0,0,0.2); }
.btn-outline { width:100%; padding:12px; border:2px solid #e5e7eb; background:white; border-radius:14px; font-weight:700; margin-bottom:15px; color:var(--text); display:flex; justify-content:center; gap:8px; }

/* SETTINGS */
.setting-section { background:white; border-radius:20px; overflow:hidden; margin-bottom:20px; box-shadow:var(--shadow-card); }
.section-label { font-size:11px; font-weight:800; color:var(--text-light); margin:10px 0 5px 15px; letter-spacing:0.5px; }
.setting-item { display:flex; align-items:center; padding:16px; border-bottom:1px solid #f3f4f6; cursor:pointer; }
.setting-item:last-child { border:none; }
.icon-sq { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; color:white; margin-right:15px; }
.blue{background:#3b82f6} .green{background:#10b981} .purple{background:#8b5cf6} .red{background:#fee2e2; color:#ef4444!important;}
.item-text h4 { font-size:15px; font-weight:700; } .item-text p { font-size:12px; color:var(--text-light); }
.btn-logout { width:100%; padding:15px; background:#fee2e2; color:#ef4444; font-weight:700; border-radius:16px; margin-top:10px; border:none; }

/* NAV */
.nav-bar { position:fixed; bottom:0; left:0; right:0; background:white; padding:10px 20px 25px; display:flex; justify-content:space-around; align-items:center; border-radius:24px 24px 0 0; box-shadow:0 -5px 20px rgba(0,0,0,0.05); z-index:100; }
.nav-item { font-size:26px; color:#d1d5db; background:transparent; padding:10px; border-radius:14px; } .nav-item.active { color:var(--primary); background:#e0e7ff; }
.nav-fab { width:52px; height:52px; background:linear-gradient(135deg, #6366f1, #8b5cf6); border-radius:50%; color:white; font-size:26px; display:flex; align-items:center; justify-content:center; margin-top:-30px; box-shadow:0 8px 20px rgba(99,102,241,0.5); border:4px solid var(--bg); cursor:pointer; }

/* STUDY */
.study-overlay { position:fixed; inset:0; background:#f8fafc; z-index:2000; display:flex; flex-direction:column; }
.study-header { padding:40px 20px 20px; display:flex; align-items:center; gap:15px; }
.btn-icon-round { width:44px; height:44px; background:white; border-radius:50%; box-shadow:0 4px 10px rgba(0,0,0,0.05); font-size:20px; color:var(--text); }
.progress-pill { flex:1; background:white; height:36px; border-radius:20px; display:flex; align-items:center; padding:0 5px; box-shadow:0 4px 10px rgba(0,0,0,0.05); }
#progress-text { font-size:12px; font-weight:800; color:var(--primary); padding:0 10px; }
.progress-bg { flex:1; height:8px; background:#f3f4f6; border-radius:5px; overflow:hidden; margin-right:5px; }
#progress-bar { height:100%; width:0%; background:var(--primary); transition:0.3s; border-radius:5px; }

.card-area { flex:1; display:flex; align-items:center; justify-content:center; padding:20px; perspective:1200px; }
.flashcard { width:100%; max-width:340px; height:500px; position:relative; transform-style:preserve-3d; transition:transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor:pointer; }
.flashcard.flipped { transform:rotateY(180deg); }

.face { position:absolute; inset:0; backface-visibility:hidden; border-radius:32px; background:white; box-shadow:0 25px 50px -12px rgba(0,0,0,0.15); border:1px solid #fff; padding:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.face.front { background:linear-gradient(180deg, #ffffff 0%, #f9fafb 100%); }
.face.back { transform:rotateY(180deg); background:#fff; }

.card-top-label { position:absolute; top:30px; background:#f3f4f6; color:var(--text-light); font-size:11px; font-weight:800; padding:6px 12px; border-radius:20px; letter-spacing:1px; }
.word-content { margin-top:20px; }
#card-word { font-size:42px; font-weight:800; color:var(--primary); margin-bottom:8px; line-height:1.1; }
#card-ipa { font-family:'Quicksand', sans-serif; font-size:20px; color:var(--text-light); background:#f3f4f6; padding:4px 16px; border-radius:12px; display:inline-block; }
.tap-hint { margin-top:auto; font-size:13px; color:#9ca3af; display:flex; align-items:center; gap:6px; animation:bounce 2s infinite; }

.meaning-section { margin-bottom:30px; }
.label-mini { font-size:10px; font-weight:800; color:#d1d5db; display:block; margin-bottom:5px; }
#card-meaning { font-size:32px; font-weight:700; color:var(--text); }
.example-box { background:#f0f9ff; padding:20px; border-radius:20px; width:100%; text-align:left; position:relative; }
.example-box i { color:#0ea5e9; font-size:24px; position:absolute; top:-10px; left:20px; background:white; padding:0 5px; border-radius:50%; }
#card-ex { font-size:16px; font-style:italic; color:#0369a1; line-height:1.5; margin-top:5px; }

.study-controls { padding:30px; padding-bottom:40px; }
.btn-study-action { width:100%; padding:18px; background:var(--text); color:white; font-size:18px; font-weight:800; border-radius:20px; box-shadow:0 10px 25px rgba(0,0,0,0.2); display:flex; align-items:center; justify-content:center; gap:10px; }

/* UTILS */
#toast-box { position:fixed; top:20px; left:0; right:0; display:flex; justify-content:center; z-index:9000; pointer-events:none; }
.toast { background:rgba(0,0,0,0.9); color:white; padding:12px 24px; border-radius:50px; font-weight:600; font-size:14px; animation:fadeIn 0.3s; pointer-events:auto; }
#loader { position:fixed; inset:0; background:rgba(255,255,255,0.95); z-index:8000; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.spinner { width:40px; height:40px; border:4px solid #e0e7ff; border-top-color:var(--primary); border-radius:50%; animation:spin 0.8s linear infinite; margin-bottom:10px; }
@keyframes spin { to {transform:rotate(360deg);} }
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:5000; display:flex; align-items:center; justify-content:center; }
.modal-content { background:white; width:90%; max-width:320px; padding:20px; border-radius:24px; text-align:center; }
.scroll-list { max-height:300px; overflow-y:auto; text-align:left; margin:15px 0; }
.btn-close-text { background:none; border:none; color:var(--text-light); font-weight:700; cursor:pointer; }

/* Thêm/Sửa các class này vào file CSS */

/* AUTH CARD */
.auth-card {
    background: rgba(255, 255, 255, 0.98);
    width: 100%;
    max-width: 360px;
    padding: 40px 30px;
    border-radius: 32px;
    text-align: center;
    box-shadow: 0 20px 60px -10px rgba(79, 70, 229, 0.3); /* Bóng đổ tím đẹp */
    position: relative;
    overflow: hidden;
}

/* INPUT BOX PRO */
.input-box {
    position: relative;
    margin-bottom: 16px;
}
.input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 20px;
    transition: 0.3s;
}
.input-box input {
    width: 100%;
    padding: 16px 45px 16px 50px; /* Chừa chỗ cho icon 2 bên */
    border: 2px solid #f1f5f9;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    outline: none;
    transition: 0.3s;
    background: #f8fafc;
}
.input-box input:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.input-box input:focus + .input-icon {
    color: var(--primary);
}

/* TOGGLE PASSWORD ICON */
/* 3. Icon con mắt bên phải */
.toggle-pass {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    
    /* FIX CHÍNH: Hủy bỏ thuộc tính left bị dính từ icon trái */
    left: auto !important; 
    
    color: #cbd5e1;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
    padding: 5px; /* Tăng vùng bấm cho dễ */
}

.toggle-pass:hover {
    color: #1f2937; /* var(--text) */
}


/* BUTTON PRO */
.btn-auth-submit {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    border-radius: 16px;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
    margin-top: 10px;
    box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
}
.btn-auth-submit:active { transform: scale(0.98); }
.btn-auth-submit:hover { box-shadow: 0 15px 30px -5px rgba(99, 102, 241, 0.5); transform: translateY(-2px); }

/* LOGO ANIMATION */
.logo-animate {
    font-size: 56px;
    color: var(--primary);
    margin-bottom: 10px;
    display: inline-block;
    filter: drop-shadow(0 5px 15px rgba(99, 102, 241, 0.3));
}