/* Student Engagement Plugin - Student Interface Styles (Enhanced Colorful Version) */

.se-tasks{margin:2rem 0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(135deg,#f0f9ff 0%,#fce7f3 100%);padding:2rem;border-radius:24px}
.se-course-filter{display:flex;align-items:center;gap:.75rem;margin:0 0 1.25rem;background:white;padding:1rem;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.se-course-filter-select{padding:.55rem .75rem;border:2px solid rgba(6,182,212,.2);border-radius:12px;background:#fff;font-weight:600;transition:all .3s}
.se-course-filter-select:focus{outline:none;border-color:#06b6d4;box-shadow:0 0 0 4px rgba(6,182,212,.1)}
.se-course-title{margin:1.75rem 0 .75rem;font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#06b6d4,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.se-task{border:3px solid transparent;border-radius:20px;overflow:hidden;margin:0 0 1.5rem;box-shadow:0 12px 40px rgba(6,182,212,.15);background:#fff;transition:all .3s}
.se-task:hover{transform:translateY(-4px);box-shadow:0 16px 50px rgba(6,182,212,.25);border-color:#06b6d4}
.se-task-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;background:linear-gradient(135deg,#06b6d4 0%,#ec4899 100%);color:white}
.se-task-title{margin:0;font-size:1.25rem;line-height:1.3;font-weight:800;color:white}
.se-toggle-task{border:2px solid white;border-radius:999px;padding:.55rem 1rem;background:rgba(255,255,255,.2);cursor:pointer;font-weight:900;color:white;backdrop-filter:blur(10px);transition:all .3s}
.se-toggle-task:hover{background:white;color:#06b6d4;transform:scale(1.05)}
.se-task-body{padding:1.25rem 1.5rem}
.se-task-content{margin:0 0 1rem;line-height:1.6;color:#334155}

.se-submission-form p{margin:.75rem 0}
.se-submission-form label{font-weight:700;color:#1e293b}
.se-submission-form input[type=text],.se-submission-form input[type=email],.se-submission-form textarea{width:100%;max-width:100%;padding:.75rem;border:2px solid rgba(6,182,212,.2);border-radius:14px;background:#fff;outline:none;font-size:1rem;transition:all .3s}
.se-submission-form textarea{min-height:140px;resize:vertical}
.se-submission-form input:focus,.se-submission-form textarea:focus{border-color:#06b6d4;box-shadow:0 0 0 4px rgba(6,182,212,.15)}

.se-submission-form button[type=submit],.se-submission-form input[type=submit]{border:0;border-radius:14px;padding:.75rem 1.5rem;cursor:pointer;font-weight:900;color:#fff;background:linear-gradient(135deg,#06b6d4,#ec4899);font-size:1.125rem;transition:all .3s;box-shadow:0 4px 12px rgba(6,182,212,.3)}
.se-submission-form button[type=submit]:hover,.se-submission-form input[type=submit]:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(6,182,212,.4)}
.se-submission-form button[type=submit]:disabled,.se-submission-form input[type=submit]:disabled{opacity:.65;cursor:not-allowed;transform:none}

.se-result{border:3px solid #06b6d4;border-radius:20px;padding:1.5rem;margin:.5rem 0 0;background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(236,72,153,.15));box-shadow:0 8px 24px rgba(6,182,212,.2)}
.se-result-title{margin:0 0 .5rem;font-size:1.5rem;font-weight:900;color:#0e7490}
.se-result-sub{margin:0 0 .75rem;opacity:.9;font-size:1rem;color:#475569}
.se-result-sub.se-error{opacity:1;color:#dc2626;font-weight:800}
.se-ai-error{margin:-.25rem 0 .75rem;padding:.75rem;border-radius:14px;background:rgba(220,38,38,.1);border:2px solid #ef4444;color:#991b1b}

.se-section{margin:1rem 0 0}
.se-section h4{margin:0 0 .75rem;font-size:1.125rem;font-weight:800;color:#1e293b}
.se-feedback{padding:1rem;border-radius:16px;background:white;border:2px solid rgba(6,182,212,.2);line-height:1.6;color:#334155;box-shadow:0 4px 12px rgba(0,0,0,.05)}

.se-badges{display:flex;flex-wrap:wrap;gap:.75rem}
.se-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .75rem;border-radius:999px;font-weight:900;font-size:.9rem;border:2px solid;background:#fff;transition:all .3s;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.se-badge:hover{transform:scale(1.05)}
.se-badge:nth-child(4n+1){background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(6,182,212,.1));border-color:#06b6d4;color:#0e7490}
.se-badge:nth-child(4n+2){background:linear-gradient(135deg,rgba(236,72,153,.2),rgba(236,72,153,.1));border-color:#ec4899;color:#9f1239}
.se-badge:nth-child(4n+3){background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.1));border-color:#f59e0b;color:#92400e}
.se-badge:nth-child(4n+4){background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(16,185,129,.1));border-color:#10b981;color:#065f46}

.se-progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
.se-progress-card{background:white;border:2px solid rgba(6,182,212,.2);border-radius:18px;padding:1rem;box-shadow:0 8px 20px rgba(0,0,0,.08);transition:all .3s}
.se-progress-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.12);border-color:#06b6d4}
.se-progress-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .5rem}
.se-progress-skill{font-weight:900;color:#1e293b}
.se-progress-why{opacity:.9;line-height:1.4;color:#475569}
.se-hint{margin:.75rem 0 0;opacity:.8;font-size:.9rem;color:#64748b}

.se-level{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.25rem .65rem;font-weight:900;font-size:.8rem;border:2px solid}
.se-level.beginner{background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(6,182,212,.1));color:#0e7490;border-color:#06b6d4}
.se-level.strategist{background:linear-gradient(135deg,rgba(236,72,153,.2),rgba(236,72,153,.1));color:#9f1239;border-color:#ec4899}
.se-level.leader{background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.1));color:#92400e;border-color:#f59e0b}

.se-spinner{display:inline-flex;align-items:center;gap:.5rem}
.se-spinner:before{content:'';width:16px;height:16px;border-radius:50%;border:3px solid rgba(6,182,212,.2);border-top-color:#06b6d4;animation:seSpin .8s linear infinite}
@keyframes seSpin{to{transform:rotate(360deg)}}

.se-leaderboard{border-collapse:collapse;width:100%;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.1)}
.se-leaderboard th,.se-leaderboard td{border:1px solid rgba(6,182,212,.15);padding:.75rem;text-align:left}
.se-leaderboard thead th{background:linear-gradient(135deg,#06b6d4,#ec4899);color:white;font-weight:800}
.se-leaderboard tbody tr{transition:all .2s}
.se-leaderboard tbody tr:hover{background:linear-gradient(135deg,rgba(6,182,212,.05),rgba(236,72,153,.05))}

/* Rank + medal styling */
.se-lb-rank{display:inline-flex;align-items:center;gap:.5rem;font-weight:900}
.se-lb-medal{font-size:1.25rem;line-height:1;filter:saturate(1.2)}
.se-lb-rank-num{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;border-radius:999px;background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(236,72,153,.2));border:2px solid #06b6d4;color:#0e7490;font-weight:900}

/* Leaderboard UI improvements */
.se-leaderboard td{vertical-align:top}
.se-lb-cell{display:flex;flex-direction:column;gap:.5rem}
.se-lb-cell-title{display:inline-flex;align-items:center;gap:.5rem;font-weight:900;font-size:.9rem;letter-spacing:.3px;color:#0e7490}
.se-lb-cell-title span{filter:saturate(1.2)}

.se-lb-badges{display:flex;flex-wrap:wrap;gap:.5rem}
.se-lb-badge{display:inline-flex;align-items:center;gap:.35rem;max-width:100%;padding:.35rem .65rem;border-radius:999px;border:2px solid;font-weight:900;font-size:.8rem;transition:all .3s}
.se-lb-badge:hover{transform:scale(1.05)}
.se-lb-badge:nth-child(2n){background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(236,72,153,.15));border-color:#06b6d4;color:#0e7490}
.se-lb-badge:nth-child(2n+1){background:linear-gradient(135deg,rgba(236,72,153,.15),rgba(245,158,11,.15));border-color:#ec4899;color:#9f1239}
.se-lb-badge-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:18rem}
.se-lb-badge-count{margin-left:.25rem;padding:.15rem .45rem;border-radius:999px;background:rgba(245,158,11,.2);border:2px solid #f59e0b;font-weight:900;color:#92400e}

.se-lb-path-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.se-lb-path-grid[data-count="1"],.se-lb-path-grid[data-count="2"]{grid-template-columns:1fr}
.se-lb-path-grid[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.se-lb-path{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem;border-radius:14px;border:2px solid;background:white;box-shadow:0 4px 12px rgba(0,0,0,.06);transition:all .3s}
.se-lb-path:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.1)}
.se-lb-path:nth-child(2n){border-color:#06b6d4;background:linear-gradient(135deg,rgba(6,182,212,.05),rgba(236,72,153,.05))}
.se-lb-path:nth-child(2n+1){border-color:#ec4899;background:linear-gradient(135deg,rgba(236,72,153,.05),rgba(245,158,11,.05))}
.se-lb-path-icon{font-size:1.1rem;line-height:1}
.se-lb-path-abbr{font-weight:900;color:#0e7490;min-width:1.5rem;text-align:left}
.se-lb-path-level{margin-left:auto}

@media (max-width:720px){
  .se-tasks{padding:1rem}
  .se-lb-path-grid{grid-template-columns:1fr}
  .se-lb-badge-text{max-width:12rem}
}

.se-muted{opacity:.65}

/* Mind Reveal (Explain Your Thinking) */
.se-mind-reveal{border:3px solid #06b6d4;background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(236,72,153,.15));border-radius:16px;padding:1rem}
.se-mind-q{font-weight:900;margin:.25rem 0 .5rem;color:#1e293b;font-size:1.125rem}
.se-mind-row{display:flex;align-items:center;gap:.75rem;margin:0 0 .5rem}
.se-mind-timer{font-weight:900;padding:.35rem .65rem;border-radius:999px;border:2px solid #06b6d4;background:rgba(6,182,212,.2);color:#0e7490}
.se-mind-hint{opacity:.85;font-weight:700;color:#475569}
.se-mind-answer{width:100%;max-width:100%;padding:.75rem;border:2px solid rgba(6,182,212,.3);border-radius:14px;background:#fff;outline:none;min-height:90px;resize:vertical;transition:all .3s}
.se-mind-answer:focus{border-color:#06b6d4;box-shadow:0 0 0 4px rgba(6,182,212,.15)}
.se-mind-actions{margin:.75rem 0 0}
.se-mind-submit{border:0;border-radius:14px;padding:.65rem 1rem;cursor:pointer;font-weight:900;color:#fff;background:linear-gradient(135deg,#06b6d4,#ec4899);transition:all .3s;box-shadow:0 4px 12px rgba(6,182,212,.3)}
.se-mind-submit:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(6,182,212,.4)}
.se-mind-submit:disabled{opacity:.65;cursor:not-allowed;transform:none}
.se-mind-msg{margin:.75rem 0 0;padding:.65rem .85rem;border-radius:14px;border:2px solid;font-weight:800}
.se-mind-msg.ok{border-color:#10b981;background:rgba(16,185,129,.1);color:#065f46}
.se-mind-msg.err{border-color:#ef4444;background:rgba(239,68,68,.1);color:#991b1b}

/* Legacy compatibility styles */
.se-badges--lb{gap:.5rem}
.se-badge--lb{font-size:.8rem;padding:.3rem .6rem}
.se-paths{display:flex;flex-wrap:wrap;gap:.5rem}
.se-path-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .6rem;border-radius:999px;font-weight:900;font-size:.8rem;border:2px solid}
.se-path-pill.beginner{background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(6,182,212,.1));color:#0e7490;border-color:#06b6d4}
.se-path-pill.strategist{background:linear-gradient(135deg,rgba(236,72,153,.2),rgba(236,72,153,.1));color:#9f1239;border-color:#ec4899}
.se-path-pill.leader{background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.1));color:#92400e;border-color:#f59e0b}