/* ===============================
   layout tổng
=================================*/
body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f9fafb;
    color: #111827;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 16px;
}

.app {
    display: grid;
    grid-template-columns: 260px minmax(0, 840px);
    gap: 16px;
    max-width: 1200px;
    width: 100%;
}

/* ===============================
   SIDEBAR
=================================*/
.sidebar {
    background: #f3f4ff;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.logo-block {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}
.logo-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #4f46e5;
    color: white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
}
.logo-text-main {
    font-size: 16px;
    font-weight: 600;
}
.logo-text-sub {
    font-size: 12px;
    color: #6b7280;
}

.streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 10px;
    background: #fef3c7;
    font-size: 12px;
    color:#92400e;
    margin-bottom: 12px;
}
.streak-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background:#f97316;
}

/* nav */
.nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.nav-button {
    border: none;
    border-radius: 999px;
    padding: 6px 10px;
    display:flex;
    align-items:center;
    gap: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
}
.nav-button.active {
    background:#e0e7ff;
}
.nav-button .icon {
    font-size: 16px;
}

/* goal card */
.goal-card {
    background: #ecfdf5;
    border-radius: 18px;
    padding: 10px 12px;
    font-size: 13px;
    margin-top: 6px;
}
.goal-card h3 {
    font-size: 14px;
    margin: 0 0 4px;
}
.goal-chip-row {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-top: 6px;
}
.goal-chip {
    border-radius: 999px;
    padding:2px 8px;
    background:#d1fae5;
    font-size:11px;
}

/* sidebar bottom */
.sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.account-card {
    background: #fefce8;
    border-radius: 18px;
    padding: 10px 12px;
    border: 1px solid #facc15;
}
.account-label {
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 6px;
}
.user-pill {
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2ff;
    font-size: 12px;
    color: #4338ca;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-actions {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top: 8px;
}
.full-width {
    width: 100%;
    justify-content: center;
}

.footer-note {
    font-size: 11px;
    color:#6b7280;
}

/* ===============================
   MAIN
=================================*/
.main {
    background:#ffffff;
    border-radius:24px;
    padding:16px;
}
.main-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}
.main-title {
    font-size:18px;
    font-weight:600;
}
.main-sub {
    font-size:12px;
    color:#6b7280;
}
.main-header-right {
    display:flex;
    align-items:center;
    gap:8px;
}

/* buttons */
.btn-primary {
    border:none;
    border-radius:999px;
    padding:8px 14px;
    font-size:13px;
    font-weight:500;
    background:#4f46e5;
    color:white;
    cursor:pointer;
}
.btn-ghost {
    border:none;
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    background:#e5e7eb;
    cursor:pointer;
}

/* pill */
.pill {
    border-radius:999px;
    padding:4px 10px;
    background:#e0f2fe;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
}
.pill-dot {
    width:8px;
    height:8px;
    border-radius:999px;
    background:#0ea5e9;
}

/* ===============================
   CARDS
=================================*/
.card {
    border-radius:18px;
    border:1px solid #e5e7eb;
    padding:12px 14px;
    margin-bottom:12px;
    background:#ffffff;
}
.card-header-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
}
.card-title {
    font-size:15px;
    font-weight:600;
}
.card-description {
    font-size:12px;
    color:#6b7280;
}
.badge {
    font-size:11px;
    padding:3px 8px;
    border-radius:999px;
    background:#f3e8ff;
    color:#6b21a8;
}

/* ===============================
   FORM GRID
=================================*/
.form-grid {
    display:grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap:8px 12px;
}
.form-field label {
    font-size:12px;
    display:block;
    margin-bottom:2px;
}
.form-field input,
.form-field textarea,
.form-field select {
    width:100%;
    box-sizing:border-box;
    padding:6px 8px;
    border-radius:10px;
    border:1px solid #e5e7eb;
    font-size:12px;
    outline:none;
}
.form-field textarea {
    min-height:60px;
}
.ai-btn {
    margin-top:4px;
    font-size:11px;
    padding:4px 8px;
}

/* ===============================
   WORD TABLE
=================================*/
.word-list {
    margin-top:8px;
}
.word-row {
    display:grid;
    grid-template-columns: 1.0fr 0.8fr 1.1fr 1.6fr 0.6fr 0.7fr 0.7fr 0.7fr;
    gap:6px;
    padding:4px 0;
    font-size:12px;
    align-items:center;
}
.word-header {
    font-weight:600;
    border-bottom:1px solid #e5e7eb;
    margin-bottom:4px;
}
.word-empty {
    font-size:12px;
    color:#6b7280;
    margin-top:8px;
}

/* folder filter */
.folder-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.folder-pill {
    border: none;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    background: #e5e7eb;
    color: #374151;
    cursor: pointer;
}

.folder-pill.active {
    background: #4f46e5;
    color: #ffffff;
}

/* tags */
.tag-level {
    border-radius:999px;
    padding:2px 6px;
    font-size:11px;
}
.tag-A1 { background:#dbeafe; color:#1d4ed8; }
.tag-A2 { background:#dcfce7; color:#166534; }
.tag-B1 { background:#fee2e2; color:#b91c1c; }
.tag-B2 { background:#fef3c7; color:#92400e; }
.tag-C1 { background:#fce7f3; color:#9d174d; }
.tag-other { background:#e5e7eb; color:#374151; }

/* status */
.status-pill {
    border-radius:999px;
    padding:2px 6px;
    font-size:11px;
}
.status-new      { background:#eff6ff; color:#1d4ed8; }
.status-learning { background:#ecfdf5; color:#15803d; }
.status-review   { background:#fef3c7; color:#92400e; }
.status-mastered { background:#f3e8ff; color:#6b21a8; }

/* actions */
.word-actions {
    display:flex;
    gap:4px;
    flex-wrap:wrap;
}
.mini-btn {
    border:none;
    border-radius:999px;
    padding:2px 6px;
    font-size:11px;
    cursor:pointer;
    background:#e5e7eb;
}
.mini-btn.voice { background:#e0f2fe; }
.mini-btn.edit { background:#dbeafe; color:#1d4ed8; }
.mini-btn.delete { background:#fee2e2; color:#b91c1c; }

/* ===============================
   MODAL (đổi mật khẩu + gemini)
=================================*/
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.modal-card {
    width: 340px;
    max-width: 95vw;
    background: #ffffff;
    border-radius: 20px;
    padding: 18px 18px 14px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(209, 213, 219, 0.95);
}
.modal-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.modal-sub {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 10px;
}
.modal-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}
.modal-message {
    font-size: 12px;
    margin-top: 4px;
}
.modal-message.error { color: #b91c1c; }
.modal-message.success { color: #15803d; }

/* ===============================
   LOGIN PAGE
=================================*/
.login-body {
    background:#eef2ff;
}
.login-wrapper {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}
.login-card {
    background:white;
    border-radius:24px;
    padding:20px 22px;
    box-shadow:0 20px 40px rgba(15,23,42,0.2);
    width:320px;
    max-width:95vw;
}
.login-logo {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}
.login-form label {
    font-size:12px;
    display:block;
    margin-bottom:2px;
}
.login-form input {
    width:100%;
    box-sizing:border-box;
    padding:6px 8px;
    border-radius:10px;
    border:1px solid #e5e7eb;
    font-size:12px;
    margin-bottom:6px;
}
.login-message {
    font-size:12px;
    margin-top:4px;
}

/* ===============================
   AI POPUP (spinner)
=================================*/
.ai-card {
    background: white;
    padding: 18px 20px;
    width: 300px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    animation: aiScaleIn 0.22s ease-out;
}
.ai-title {
    font-size: 14px;
    font-weight: 600;
}
.ai-body {
    margin-top: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.ai-spinner {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 3px solid #e5e7eb;
    border-top-color: #4f46e5;
    animation: aiSpin 0.7s linear infinite;
}
.ai-word-label {
    font-size: 13px;
    font-weight: 600;
}
.ai-text {
    font-size: 12px;
    color: #6b7280;
}

@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiScaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ===============================
   TOAST GÓC PHẢI
=================================*/
#toast {
    position: fixed;
    right: 20px;
    bottom: 24px;
    background: #111827;
    color: white;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    z-index: 99999;
    box-shadow: 0 10px 25px rgba(15,23,42,0.35);
    max-width: 260px;
}
#toast.success { background: #15803d; }
#toast.error   { background: #b91c1c; }
#toast.info    { background: #2563eb; }

#toast.show {
    animation: toastSlideIn 0.25s forwards;
}

/* Toast Loading (Góc PHẢI dưới) */
#toast-loading {
    position: fixed;
    right: 20px;  /* <--- SỬA THÀNH RIGHT */
    bottom: 24px;
    
    background: #ffffff;
    color: #374151;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 99999;
    
    /* Hiệu ứng trượt lên */
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#toast-loading.show {
    transform: translateY(0);
    opacity: 1;
}

/* Spinner nhỏ quay tròn */
.mini-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
}

.page-info {
    color: #6b7280;
}

.page-btn {
    border: none;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    background: #e5e7eb;
    cursor: pointer;
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* ===============================
   REVIEW SECTION
=================================*/
.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.review-option-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    gap: 16px;
    cursor: pointer;
    transition: all 0.2s;
    background: #f9fafb;
}
.review-option-card:hover {
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: #4f46e5;
    transform: translateY(-2px);
}
.review-icon {
    font-size: 32px;
    background: #eef2ff;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}
.review-info h3 {
    margin: 0 0 4px;
    font-size: 16px;
    color: #111827;
}
.review-info p {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

/* FLASHCARD STYLES */
.flashcard-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}
.flashcard-scene {
    width: 320px;
    height: 220px;
    perspective: 1000px;
}
.flashcard {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
}
.flashcard.is-flipped {
    transform: rotateY(180deg);
}
.flashcard-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #e5e7eb;
}
.flashcard-front {
    background: #ffffff;
    color: #111827;
}
.flashcard-back {
    background: #f0fdf4; /* xanh nhạt */
    color: #166534;
    transform: rotateY(180deg);
}
.tap-hint {
    margin-top: 12px;
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.review-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

/* FILL GAME STYLES */
.fill-game-container {
    max-width: 400px;
    margin: 20px auto;
}
.question-box {
    background: #eff6ff;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    text-align: center;
}
.q-text {
    font-size: 18px;
    font-weight: 600;
    margin-top: 4px;
    color: #1e3a8a;
}
.q-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
}
.answer-box {
    display: flex;
    gap: 8px;
}
.feedback-msg {
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    min-height: 20px;
}
.feedback-msg.correct { color: #16a34a; font-weight: 600; }
.feedback-msg.wrong { color: #dc2626; font-weight: 600; }

/* GAME SẮP XẾP (SCRAMBLE) */
.scramble-container {
    max-width: 450px;
    margin: 20px auto;
    text-align: center;
}

/* Vùng chứa các ô chữ kết quả */
.scramble-slots {
    min-height: 50px;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    border: 2px dashed #d1d5db;
}

/* Vùng chứa các ô chữ nguồn */
.scramble-pool {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Ô chữ cái */
.letter-tile {
    width: 36px;
    height: 36px;
    background: #ffffff;
    border: 1px solid #9ca3af;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: #374151;
    cursor: pointer;
    box-shadow: 0 2px 0 #9ca3af;
    user-select: none;
    transition: transform 0.1s;
}

.letter-tile:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* Trạng thái đã chọn (ẩn đi ở pool) */
.letter-tile.used {
    opacity: 0;
    pointer-events: none;
}

/* Màu khi đúng/sai */
.scramble-slots.correct { border-color: #22c55e; background: #f0fdf4; }
.scramble-slots.wrong { border-color: #ef4444; background: #fef2f2; }
/* Auth switch link */
.auth-switch {
    margin-top: 12px;
    font-size: 12px;
    text-align: center;
    color: #6b7280;
}
.auth-switch a {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 600;
}
.auth-switch a:hover {
    text-decoration: underline;
}

/* ===============================
   PAYMENT INFO BOX (Thông tin chuyển khoản)
=================================*/
.payment-box {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
    text-align: left;
}

.price-tag {
    font-size: 24px;
    font-weight: 700;
    color: #059669; /* Màu xanh lá tiền tệ */
    text-align: center;
    margin-bottom: 12px;
    display: block;
}

.bank-info {
    font-size: 13px;
    color: #334155;
    line-height: 1.6;
}

.bank-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 4px;
}
.bank-label { color: #64748b; }
.bank-value { font-weight: 600; color: #0f172a; text-align: right; }

.transfer-syntax {
    background: #e0f2fe;
    color: #0369a1;
    padding: 8px;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    font-family: monospace;
    font-size: 14px;
    margin-top: 10px;
    border: 1px solid #bae6fd;
}
.contact-admin {
    font-size: 12px;
    color: #6b7280;
    margin-top: 12px;
    font-style: italic;
}

/* Legal Note (Cảnh báo/Lưu ý) */
.legal-note {
    font-size: 11px;
    color: #64748b;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1; /* Đường gạch ngang phân cách */
    text-align: justify;
    line-height: 1.4;
    font-style: italic;
    background: #f1f5f9;
    padding: 8px;
    border-radius: 6px;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Hiệu ứng hiện modal mượt mà */
#celebration-modal.show {
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* ===============================
   IRREGULAR VERBS SEARCH (Giao diện tra cứu)
=================================*/
.irregular-search-box {
    text-align: center;
    padding: 30px 0 20px;
}
.search-title {
    font-size: 22px;
    font-weight: 700;
    color: #4f46e5;
    margin-bottom: 6px;
}
.search-sub {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 20px;
}
.search-input-wrapper {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 400px;
    margin: 0 auto;
}
#irregular-search-input {
    width: 100%;
    padding: 10px 16px;
    border-radius: 99px;
    border: 2px solid #e0e7ff;
    font-size: 15px;
    outline: none;
    transition: all 0.2s;
}
#irregular-search-input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.search-btn {
    padding: 0 20px;
    border-radius: 99px;
    font-size: 18px;
}

/* KẾT QUẢ TRA CỨU (CARD) */
.irregular-result-area {
    max-width: 500px;
    margin: 0 auto;
    padding-top: 20px;
}

.verb-detail-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    animation: slideUp 0.3s ease-out;
    margin-bottom: 16px;
}

.verb-meaning {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 20px;
    border-bottom: 1px dashed #e5e7eb;
    padding-bottom: 12px;
}

.verb-forms-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.verb-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.verb-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
}
.verb-word {
    font-size: 16px;
    font-weight: 700;
    padding: 8px 4px;
    border-radius: 8px;
}

/* Màu sắc từng cột */
.v1-style { background: #eef2ff; color: #4338ca; }
.v2-style { background: #fef2f2; color: #b91c1c; }
.v3-style { background: #ecfdf5; color: #047857; }

@keyframes slideUp {
    from { opacity:0; transform: translateY(10px); }
    to { opacity:1; transform: translateY(0); }
}

/* ===============================
   RESPONSIVE
=================================*/
@media (max-width: 840px) {
    .app {
        grid-template-columns: 1fr;
    }
}