/* ========== English Words Learning System - Common Styles ========== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background:#f0f2f5; color:#333; min-height:100vh; }

/* ===== Navbar ===== */
.navbar { background:linear-gradient(135deg,#43a047,#2e7d32); color:#fff; padding:0 24px; display:flex; align-items:center; height:56px; box-shadow:0 2px 8px rgba(0,0,0,.15); position:sticky; top:0; z-index:100; }
.navbar .logo { font-size:20px; font-weight:700; letter-spacing:1px; margin-right:32px; display:flex; align-items:center; gap:8px; }
.navbar .logo span { font-size:24px; }
.nav-tabs { display:flex; gap:4px; flex:1; }
.nav-tabs .tab { padding:8px 18px; border-radius:8px 8px 0 0; cursor:pointer; font-size:14px; color:rgba(255,255,255,.75); transition:all .2s; user-select:none; }
.nav-tabs .tab:hover { background:rgba(255,255,255,.12); color:#fff; }
.nav-tabs .tab.active { background:rgba(255,255,255,.2); color:#fff; font-weight:600; }
.navbar .user-info { display:flex; align-items:center; gap:12px; font-size:14px; }
.navbar .user-info .role-badge { background:rgba(255,255,255,.2); padding:2px 10px; border-radius:12px; font-size:12px; }
.navbar .btn-logout { background:rgba(255,255,255,.15); border:none; color:#fff; padding:8px 14px; border-radius:6px; cursor:pointer; font-size:13px; transition:background .2s; }
.navbar .btn-logout:hover { background:rgba(255,255,255,.3); }

/* ===== Navbar Password Button ===== */
.navbar .btn-pwd { background:rgba(255,255,255,.15); border:none; color:#fff; padding:8px 14px; border-radius:6px; cursor:pointer; font-size:13px; transition:background .2s; }
.navbar .btn-pwd:hover { background:rgba(255,255,255,.3); }

/* ===== Layout ===== */
.main-container { max-width:1200px; margin:24px auto; padding:0 20px; }
.page { display:none; }
.page.active { display:block; }

/* ===== Cards ===== */
.card { background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.06); padding:24px; margin-bottom:20px; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-header h3 { font-size:18px; color:#2e7d32; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border:none; border-radius:8px; font-size:14px; cursor:pointer; transition:all .2s; font-weight:500; }
.btn-primary { background:#4CAF50; color:#fff; }
.btn-primary:hover { background:#43a047; box-shadow:0 2px 8px rgba(76,175,80,.3); }
.btn-danger { background:#e53935; color:#fff; }
.btn-danger:hover { background:#c62828; }
.btn-outline { background:transparent; border:1.5px solid #4CAF50; color:#4CAF50; }
.btn-outline:hover { background:#4CAF50; color:#fff; }
.btn-sm { padding:8px 16px; font-size:13px; }
.btn-lg { padding:12px 32px; font-size:16px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ===== Forms ===== */
.form-group { margin-bottom:16px; }
.form-group label { display:block; margin-bottom:6px; font-size:14px; color:#555; font-weight:500; }
.form-input { width:100%; padding:10px 14px; border:1.5px solid #ddd; border-radius:8px; font-size:16px; transition:border-color .2s; outline:none; }
.form-input:focus { border-color:#4CAF50; box-shadow:0 0 0 3px rgba(76,175,80,.1); }
select.form-input { appearance:auto; }
textarea.form-input { resize:vertical; min-height:120px; font-family:inherit; }

/* ===== Tables ===== */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; }
th, td { padding:12px 16px; text-align:left; border-bottom:1px solid #eee; font-size:14px; }
th { background:#f8faf8; color:#2e7d32; font-weight:600; position:sticky; top:0; }
tr:hover { background:#f9fdf9; }

/* ===== Modal ===== */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal { background:#fff; border-radius:16px; padding:28px; width:90%; max-width:520px; max-height:85vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.2); animation:modalIn .25s ease; }
@keyframes modalIn { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
.modal h3 { margin-bottom:20px; color:#2e7d32; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }

/* ===== Toast ===== */
.toast-container { position:fixed; top:70px; right:20px; z-index:300; display:flex; flex-direction:column; gap:8px; }
.toast { padding:12px 20px; border-radius:10px; color:#fff; font-size:14px; box-shadow:0 4px 16px rgba(0,0,0,.15); animation:toastIn .3s ease; min-width:200px; }
.toast.success { background:#43a047; }
.toast.error { background:#e53935; }
.toast.info { background:#1976d2; }
@keyframes toastIn { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }

/* ===== Stats Cards ===== */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:20px; }
.stat-card { background:#fff; border-radius:12px; padding:20px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.stat-card .stat-value { font-size:32px; font-weight:700; color:#2e7d32; }
.stat-card .stat-label { font-size:13px; color:#888; margin-top:4px; }

/* ===== Flashcard ===== */
.flashcard-area { display:flex; flex-direction:column; align-items:center; padding:20px 0; }
.flashcard-progress { width:100%; max-width:500px; margin-bottom:20px; }
.progress-bar { height:8px; background:#e0e0e0; border-radius:4px; overflow:hidden; }
.progress-bar .fill { height:100%; background:linear-gradient(90deg,#4CAF50,#66bb6a); border-radius:4px; transition:width .3s; }
.progress-text { text-align:center; font-size:13px; color:#888; margin-top:6px; }
.flashcard { width:100%; max-width:500px; height:300px; perspective:1000px; cursor:pointer; margin-bottom:24px; }
.flashcard-inner { width:100%; height:100%; position:relative; transition:transform .5s; transform-style:preserve-3d; }
.flashcard.flipped .flashcard-inner { transform:rotateY(180deg); }
.flashcard-front, .flashcard-back { position:absolute; inset:0; backface-visibility:hidden; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; box-shadow:0 4px 20px rgba(0,0,0,.1); }
.flashcard-front { background:linear-gradient(135deg,#fff,#f8fdf8); }
.flashcard-back { background:linear-gradient(135deg,#e8f5e9,#c8e6c9); transform:rotateY(180deg); }
.flashcard .word-text { font-size:36px; font-weight:700; color:#2e7d32; margin-bottom:8px; }
.flashcard .phonetic-text { font-size:16px; color:#888; margin-bottom:12px; }
.flashcard .meaning-text { font-size:20px; color:#333; text-align:center; line-height:1.6; }
.flashcard .hint { font-size:13px; color:#aaa; margin-top:16px; }
.flashcard-btns { display:flex; gap:16px; }
.flashcard-btns .btn { min-width:120px; justify-content:center; font-size:16px; padding:12px 28px; }
.btn-know { background:#4CAF50; color:#fff; }
.btn-know:hover { background:#388E3C; }
.btn-dunno { background:#ff7043; color:#fff; }
.btn-dunno:hover { background:#e64a19; }

/* ===== Task List ===== */
.task-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.task-card { background:#fff; border-radius:12px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.05); border-left:4px solid #4CAF50; transition:transform .2s, box-shadow .2s; cursor:pointer; }
.task-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.1); }
.task-card h4 { font-size:16px; color:#333; margin-bottom:8px; }
.task-card .task-meta { font-size:13px; color:#888; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.task-card .task-meta span { display:flex; align-items:center; gap:4px; }
.task-card .task-progress { margin-top:8px; }
.task-card .task-progress .progress-bar { height:6px; }

/* ===== Empty State ===== */
.empty-state { text-align:center; padding:60px 20px; color:#aaa; }
.empty-state .empty-icon { font-size:48px; margin-bottom:12px; }
.empty-state p { font-size:16px; }

/* ===== Badge ===== */
.badge { display:inline-block; padding:2px 10px; border-radius:12px; font-size:12px; font-weight:500; }
.badge-green { background:#e8f5e9; color:#2e7d32; }
.badge-blue { background:#e3f2fd; color:#1565c0; }
.badge-orange { background:#fff3e0; color:#e65100; }
.badge-red { background:#ffebee; color:#c62828; }

/* ===== Login Page ===== */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1b5e20,#4CAF50,#81c784); }
.login-box { background:#fff; border-radius:20px; padding:40px; width:90%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.login-box h2 { text-align:center; color:#2e7d32; margin-bottom:8px; font-size:24px; }
.login-box .subtitle { text-align:center; color:#888; font-size:14px; margin-bottom:28px; }
.login-box .form-input { padding:12px 16px; font-size:16px; }
.login-box .btn-primary { width:100%; padding:12px; font-size:16px; margin-top:8px; }

/* ===== Responsive ===== */
@media (max-width:768px) {
    .navbar { padding:8px 12px; height:auto; flex-wrap:wrap; gap:4px; align-items:center; }
    .navbar .logo { order:1; flex:1 1 auto; margin:0; font-size:18px; }
    .navbar .user-info { order:2; flex:0 0 auto; gap:8px; font-size:13px; }
    .navbar .user-info .role-badge { display:none; }
    .nav-tabs { order:3; flex:1 1 100%; width:100%; overflow-x:auto; gap:2px; justify-content:center; margin-top:4px; }
    .nav-tabs .tab { padding:8px 14px; font-size:13px; white-space:nowrap; }
    .main-container { padding:0 12px; margin:12px auto; }
    .card { padding:16px; }
    .card-header { flex-wrap:wrap; gap:10px; }
    .stats-row { grid-template-columns:repeat(2,1fr); }
    .task-list { grid-template-columns:1fr; }
    .card-grid { grid-template-columns:1fr; }
    .flashcard { height:220px; }
    .flashcard .word-text { font-size:24px; }
    .flashcard .meaning-text { font-size:17px; }
    .flashcard-btns .btn { min-width:100px; padding:14px 24px; font-size:15px; }
    .flashcard-btns { gap:12px; }
    .modal { width:95%; padding:20px; }
    .modal-actions { flex-wrap:wrap; }
    .login-box { padding:24px; }
    .toast-container { left:50%; transform:translateX(-50%); right:auto; }
    .toast { min-width:180px; }
    table { font-size:13px; }
    th, td { padding:10px 10px; }
}

/* ===== Pronunciation Button ===== */
.pron-btn { background:none; border:none; cursor:pointer; font-size:20px; padding:6px 10px; margin-left:6px; border-radius:50%; transition:background .2s, transform .15s; vertical-align:middle; line-height:1; color:#4CAF50; }
.pron-btn:hover { background:rgba(76,175,80,.12); transform:scale(1.15); }
.pron-btn:active { transform:scale(0.95); }

/* ===== Wrong Words Page ===== */
.wrong-filter-bar { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }

/* ===== Spelling Test ===== */
.spelling-card { width:100%; max-width:500px; text-align:center; padding:30px; }
.spelling-card .spelling-meaning { font-size:22px; font-weight:700; color:#2e7d32; margin-bottom:6px; }
.spelling-card .spelling-phonetic { font-size:14px; color:#888; margin-bottom:20px; }

/* ===== Test Styles ===== */
.test-choice-btn {
    transition: all 0.2s;
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #333 !important;
}
.test-choice-btn:hover {
    border-color: #1565c0 !important;
    background: #e3f2fd !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(21,101,192,0.15);
}
.test-choice-btn:active {
    transform: translateY(0);
}