/* 1619.INFO LMS — Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg: #0a0a12; --bg2: #10101a; --bg3: #181825;
  --text: #e8e8f5; --text2: #9999bb; --text3: #666688;
  --accent: #7c5cfc; --accent2: #5cf4d0; --accent3: #fc5c7d;
  --border: rgba(255,255,255,0.08); --border-a: rgba(124,92,252,0.2);
  --card: rgba(255,255,255,0.03); --hover: rgba(255,255,255,0.06);
  --grad: linear-gradient(135deg, #7c5cfc, #5cf4d0);
  --glow: 0 0 40px rgba(124,92,252,0.15);
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --r: 1rem; --rl: 1.5rem; --rxl: 2rem;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-family:'Inter',-apple-system,sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
body { min-height:100vh; line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea { font-family:inherit; }

/* Noise */
body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events:none; z-index:0; opacity:0.4; }

.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; position:relative; z-index:1; }

/* === HEADER === */
.lms-header { position:sticky; top:0; z-index:100; backdrop-filter:blur(24px); background:rgba(3,3,4,0.85); border-bottom:1px solid var(--border); }
.lms-header-inner { display:flex; align-items:center; justify-content:space-between; height:4rem; }
.lms-logo { display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.1rem; }
.lms-logo-mark { width:2rem; height:2rem; border-radius:.5rem; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.7rem; font-weight:900; }
.lms-logo span:last-child { color:var(--text3); font-size:.85rem; font-weight:600; }
.lms-nav { display:flex; align-items:center; gap:.5rem; }
.lms-nav a,.lms-nav button { padding:.5rem 1rem; border-radius:99px; font-size:.8rem; font-weight:600; color:var(--text2); transition:all .2s; }
.lms-nav a:hover,.lms-nav button:hover { color:var(--text); background:var(--hover); }
.lms-nav a.active { color:#fff; background:linear-gradient(135deg,#7c5cff,#5d3edc); box-shadow:0 2px 12px rgba(124,92,252,0.3); }
.lms-user { display:flex; align-items:center; gap:.75rem; }
.lms-user-info { text-align:right; }
.lms-user-name { font-size:.85rem; font-weight:600; }
.lms-user-role { font-size:.7rem; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; }
.lms-avatar { width:2.25rem; height:2.25rem; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; color:#fff; }

/* === LOGIN === */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:2rem; }
.login-card { width:100%; max-width:420px; background:var(--card); border:1px solid var(--border); border-radius:var(--rxl); padding:3rem; position:relative; overflow:hidden; }
.login-card::before { content:''; position:absolute; top:-50%; left:50%; transform:translateX(-50%); width:300px; height:300px; background:radial-gradient(circle,rgba(124,92,252,0.15),transparent 70%); pointer-events:none; }
.login-title { font-size:1.75rem; font-weight:800; text-align:center; margin-bottom:.5rem; position:relative; }
.login-subtitle { text-align:center; color:var(--text2); font-size:.9rem; margin-bottom:2rem; position:relative; }
.login-back { display:flex; align-items:center; gap:.25rem; color:var(--text3); font-size:.8rem; margin-bottom:1.5rem; transition:color .2s; position:relative; }
.login-back:hover { color:var(--accent); }

/* === FORMS === */
.form-group { margin-bottom:1.25rem; position:relative; }
.form-label { display:block; font-size:.8rem; font-weight:600; color:var(--text2); margin-bottom:.5rem; letter-spacing:.02em; }
.form-input { width:100%; padding:.875rem 1rem; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:var(--r); color:var(--text); font-size:.9rem; transition:all .2s; outline:none; }
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,92,252,0.15); }
.form-input::placeholder { color:var(--text3); }
select.form-input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239999bb' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; }
textarea.form-input { min-height:120px; resize:vertical; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.875rem 1.75rem; border-radius:var(--rxl); font-weight:600; font-size:.9rem; transition:all .25s cubic-bezier(.34,1.56,.64,1); white-space:nowrap; }
.btn-primary { background:var(--grad); color:#fff; box-shadow:0 4px 20px rgba(124,92,252,0.3); width:100%; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(124,92,252,0.4); }
.btn-sm { padding:.5rem 1rem; font-size:.8rem; border-radius:var(--r); }
.btn-outline { border:1px solid var(--border); color:var(--text); }
.btn-outline:hover { border-color:var(--border-a); background:var(--hover); }
.btn-danger { background:rgba(252,92,125,0.15); color:var(--accent3); border:1px solid rgba(252,92,125,0.2); }
.btn-danger:hover { background:rgba(252,92,125,0.25); }
.btn-success { background:rgba(92,244,208,0.15); color:var(--accent2); border:1px solid rgba(92,244,208,0.2); }
.btn-success:hover { background:rgba(92,244,208,0.25); }
.btn-accent { background:rgba(124,92,252,0.15); color:var(--accent); border:1px solid rgba(124,92,252,0.2); }
.btn-accent:hover { background:rgba(124,92,252,0.25); }
.btn-row { display:flex; gap:.5rem; flex-wrap:wrap; }

.error-msg { background:rgba(252,92,125,0.1); border:1px solid rgba(252,92,125,0.2); border-radius:var(--r); padding:.75rem 1rem; color:var(--accent3); font-size:.85rem; margin-bottom:1rem; display:none; position:relative; }
.error-msg.show { display:block; animation:shake .4s ease; }
.success-msg { background:rgba(92,244,208,0.1); border:1px solid rgba(92,244,208,0.2); border-radius:var(--r); padding:.75rem 1rem; color:var(--accent2); font-size:.85rem; margin-bottom:1rem; }

@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* === DASHBOARD === */
.dashboard { padding:2rem 0 4rem; }
.dash-title { font-size:1.5rem; font-weight:800; margin-bottom:.25rem; }
.dash-subtitle { color:var(--text2); font-size:.95rem; margin-bottom:2rem; }
.section-title { font-size:1.1rem; font-weight:700; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.section-title .badge { font-size:.7rem; }

/* === CARDS === */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:1.25rem; }
.course-card { background:var(--card); border:1px solid var(--border); border-radius:var(--rl); padding:1.5rem; transition:all .3s; position:relative; overflow:hidden; cursor:pointer; }
.course-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); opacity:0; transition:opacity .3s; }
.course-card:hover { border-color:var(--border-a); transform:translateY(-4px); box-shadow:var(--glow),var(--shadow); }
.course-card:hover::before { opacity:1; }
.course-card-source { display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .6rem; border-radius:99px; font-size:.65rem; font-weight:600; margin-bottom:.75rem; }
.source-stepik { background:rgba(92,244,208,0.1); color:var(--accent2); border:1px solid rgba(92,244,208,0.15); }
.source-custom { background:rgba(124,92,252,0.1); color:var(--accent); border:1px solid rgba(124,92,252,0.15); }
.course-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
.course-card p { color:var(--text2); font-size:.85rem; line-height:1.5; margin-bottom:1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.course-meta { display:flex; align-items:center; gap:1rem; font-size:.75rem; color:var(--text3); }
.course-progress { margin-top:1rem; }
.progress-bar { height:4px; background:rgba(255,255,255,0.06); border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; background:var(--grad); border-radius:99px; transition:width .5s ease; }
.progress-text { font-size:.7rem; color:var(--text3); margin-top:.375rem; }

/* === COURSE VIEW === */
.course-view { padding:2rem 0 4rem; }
.course-header { margin-bottom:2rem; }
.course-header h1 { font-size:1.75rem; font-weight:800; margin-bottom:.5rem; }
.course-header p { color:var(--text2); font-size:.95rem; }
.breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--text3); margin-bottom:1.5rem; }
.breadcrumb a { color:var(--accent); }
.breadcrumb a:hover { text-decoration:underline; }

.lesson-list { display:flex; flex-direction:column; gap:.5rem; }
.lesson-item { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; background:var(--card); border:1px solid var(--border); border-radius:var(--r); transition:all .2s; cursor:pointer; }
.lesson-item:hover { border-color:var(--border-a); background:var(--hover); }
.lesson-item.active { border-color:var(--accent); background:rgba(124,92,252,0.06); }
.lesson-num { width:2rem; height:2rem; border-radius:50%; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:var(--text3); flex-shrink:0; }
.lesson-item.completed .lesson-num { background:rgba(92,244,208,0.15); color:var(--accent2); }
.lesson-item.incorrect .lesson-num { background:rgba(252,92,125,0.15); color:var(--accent3); }
.lesson-info { flex:1; min-width:0; }
.lesson-info h4 { font-size:.875rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lesson-info span { font-size:.7rem; color:var(--text3); }
.lesson-status { font-size:.75rem; font-weight:600; }

/* === LESSON VIEW === */
.lesson-view { max-width:800px; margin:0 auto; padding:2rem 1.5rem 4rem; }
.lesson-view h2 { font-size:1.35rem; font-weight:700; margin-bottom:1.5rem; }
.lesson-content { font-size:.95rem; line-height:1.8; color:var(--text); margin-bottom:2rem; }
.lesson-content p { margin-bottom:1rem; }
.lesson-content img { max-width:100%; border-radius:var(--r); margin:1rem 0; }
.lesson-content ul,.lesson-content ol { padding-left:1.5rem; margin-bottom:1rem; }
.lesson-content code { font-family:'JetBrains Mono',monospace; background:var(--bg3); padding:.15em .4em; border-radius:.25rem; font-size:.85em; color:var(--accent2); }
.lesson-content pre { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); padding:1.25rem; overflow-x:auto; margin:1rem 0; }
.lesson-content pre code { background:none; padding:0; color:inherit; }

.quiz-options { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.5rem; }
.quiz-option { display:flex; align-items:center; gap:.75rem; padding:.875rem 1rem; background:var(--card); border:1.5px solid var(--border); border-radius:var(--r); cursor:pointer; transition:all .2s; font-size:.9rem; }
.quiz-option:hover { border-color:var(--border-a); background:var(--hover); }
.quiz-option.selected { border-color:var(--accent); background:rgba(124,92,252,0.08); }
.quiz-option.correct { border-color:var(--accent2)!important; background:rgba(92,244,208,0.08)!important; }
.quiz-option.wrong { border-color:var(--accent3)!important; background:rgba(252,92,125,0.08)!important; }
.quiz-radio { width:1.25rem; height:1.25rem; border-radius:50%; border:2px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.quiz-option.selected .quiz-radio { border-color:var(--accent); background:var(--accent); }
.quiz-option.selected .quiz-radio::after { content:''; width:.4rem; height:.4rem; border-radius:50%; background:#fff; }

.answer-input { width:100%; padding:.875rem 1rem; background:rgba(255,255,255,0.04); border:1.5px solid var(--border); border-radius:var(--r); color:var(--text); font-size:1rem; font-family:'JetBrains Mono',monospace; outline:none; transition:all .2s; margin-bottom:1rem; }
.answer-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,92,252,0.15); }

.lesson-nav { display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.lesson-nav .btn { flex:1; max-width:200px; }

.result-banner { padding:1rem 1.25rem; border-radius:var(--r); margin-bottom:1.5rem; font-weight:600; display:none; animation:fadeIn .3s ease; }
.result-banner.correct { display:block; background:rgba(92,244,208,0.1); border:1px solid rgba(92,244,208,0.2); color:var(--accent2); }
.result-banner.wrong { display:block; background:rgba(252,92,125,0.1); border:1px solid rgba(252,92,125,0.2); color:var(--accent3); }

/* === ADMIN === */
.admin-grid { display:grid; grid-template-columns:240px 1fr; min-height:calc(100vh - 4rem); }
.admin-sidebar { background:var(--bg2); border-right:1px solid var(--border); padding:1.5rem 1rem; }
.admin-sidebar h3 { font-size:.75rem; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.75rem; padding:0 .5rem; }
.admin-menu { display:flex; flex-direction:column; gap:.25rem; }
.admin-menu-item { padding:.625rem .75rem; border-radius:.625rem; font-size:.85rem; font-weight:500; color:var(--text2); transition:all .2s; cursor:pointer; display:flex; align-items:center; gap:.5rem; }
.admin-menu-item:hover { background:var(--hover); color:var(--text); }
.admin-menu-item.active { background:rgba(124,92,252,0.12); color:var(--accent); border:1px solid rgba(124,92,252,0.15); }
.admin-content { padding:2rem; overflow-y:auto; }
.admin-content h2 { font-size:1.25rem; font-weight:700; margin-bottom:1.5rem; }

/* Tables */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r); }
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding:.75rem 1rem; font-size:.7rem; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; background:var(--bg2); border-bottom:1px solid var(--border); }
td { padding:.75rem 1rem; font-size:.85rem; border-bottom:1px solid var(--border); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--hover); }

.badge { display:inline-flex; align-items:center; gap:.25rem; padding:.15rem .5rem; border-radius:99px; font-size:.7rem; font-weight:600; }
.badge-admin { background:rgba(124,92,252,0.15); color:var(--accent); }
.badge-student { background:rgba(92,244,208,0.1); color:var(--accent2); }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px); z-index:1000; display:none; align-items:center; justify-content:center; padding:2rem; }
.modal-overlay.show { display:flex; }
.modal { background:var(--bg2); border:1px solid var(--border); border-radius:var(--rxl); padding:2rem; width:100%; max-width:480px; max-height:80vh; overflow-y:auto; position:relative; animation:modalIn .3s ease; }
.modal h3 { font-size:1.15rem; font-weight:700; margin-bottom:1.5rem; }
.modal-close { position:absolute; top:1rem; right:1rem; width:2rem; height:2rem; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text3); transition:all .2s; font-size:1.1rem; }
.modal-close:hover { background:var(--hover); color:var(--text); }

@keyframes modalIn { from{opacity:0;transform:scale(0.95) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes fadeIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* Empty state */
.empty-state { text-align:center; padding:4rem 2rem; color:var(--text3); }
.empty-state .icon { font-size:3rem; margin-bottom:1rem; opacity:.5; }
.empty-state p { font-size:.95rem; margin-bottom:1.5rem; }

/* Loading spinner */
.spinner { width:2rem; height:2rem; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; margin:2rem auto; }
@keyframes spin { to{transform:rotate(360deg)} }

/* Responsive */
@media(max-width:768px) {
  .admin-grid { grid-template-columns:1fr; }
  .admin-sidebar { display:none; position:fixed; left:0; top:4rem; bottom:0; width:260px; z-index:50; }
  .admin-sidebar.show { display:block; }
  .card-grid { grid-template-columns:1fr; }
  .lms-header-inner { gap:.5rem; }
  .lms-user-info { display:none; }
  .lesson-view { padding:1.5rem 1rem 3rem; }
}

/* Scrollbar */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.2); }

/* Tabs */
.tabs { display:flex; gap:.25rem; margin-bottom:1.5rem; border-bottom:1px solid var(--border); padding-bottom:0; }
.tab { padding:.625rem 1rem; font-size:.85rem; font-weight:600; color:var(--text3); border-bottom:2px solid transparent; transition:all .2s; margin-bottom:-1px; }
.tab:hover { color:var(--text2); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* === CODE EDITOR === */
.code-editor-wrap { position:relative; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:1rem; }
.code-editor-header { display:flex; align-items:center; justify-content:space-between; padding:.5rem 1rem; background:rgba(255,255,255,0.03); border-bottom:1px solid var(--border); }
.code-editor-header span { font-size:.75rem; font-weight:600; color:var(--text3); display:flex; align-items:center; gap:.375rem; }
.code-editor-lang { padding:.15rem .5rem; border-radius:4px; background:rgba(92,244,208,0.1); color:var(--accent2); font-size:.65rem; font-weight:700; }
.code-textarea { width:100%; min-height:200px; padding:1rem; background:var(--bg3); color:var(--text); font-family:'JetBrains Mono',monospace; font-size:.85rem; line-height:1.7; border:none; outline:none; resize:vertical; tab-size:4; }
.code-textarea::placeholder { color:var(--text3); }
.code-run-bar { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.btn-run { background:rgba(92,244,208,0.15); color:var(--accent2); border:1px solid rgba(92,244,208,0.25); padding:.625rem 1.25rem; border-radius:var(--r); font-weight:700; font-size:.85rem; display:flex; align-items:center; gap:.5rem; transition:all .2s; }
.btn-run:hover { background:rgba(92,244,208,0.25); transform:translateY(-1px); }
.btn-run:disabled { opacity:.5; cursor:wait; }
.btn-run.running { animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* Test results */
.test-results { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:1.5rem; }
.test-results-header { padding:.75rem 1rem; background:rgba(255,255,255,0.03); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.test-results-header h4 { font-size:.85rem; font-weight:700; }
.test-results-summary { font-size:.75rem; font-weight:600; padding:.2rem .6rem; border-radius:4px; }
.test-results-summary.pass { background:rgba(92,244,208,0.15); color:var(--accent2); }
.test-results-summary.fail { background:rgba(252,92,125,0.15); color:var(--accent3); }
.test-case { padding:.75rem 1rem; border-bottom:1px solid var(--border); font-size:.8rem; }
.test-case:last-child { border-bottom:none; }
.test-case-header { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; font-weight:600; }
.test-case-icon { width:1.25rem; height:1.25rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.65rem; flex-shrink:0; }
.test-case-icon.pass { background:rgba(92,244,208,0.2); color:var(--accent2); }
.test-case-icon.fail { background:rgba(252,92,125,0.2); color:var(--accent3); }
.test-case-details { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; }
.test-case-details > div { background:rgba(255,255,255,0.02); border-radius:.375rem; padding:.5rem; }
.test-case-details label { display:block; font-size:.65rem; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.25rem; }
.test-case-details pre { font-family:'JetBrains Mono',monospace; font-size:.75rem; color:var(--text); white-space:pre-wrap; word-break:break-all; margin:0; background:none; border:none; padding:0; }
.test-case-details .error-output { color:var(--accent3); }

/* Test case management in admin */
.test-case-row { display:grid; grid-template-columns:1fr 1fr auto; gap:.5rem; margin-bottom:.5rem; align-items:start; }
.test-case-row textarea { min-height:60px; font-family:'JetBrains Mono',monospace; font-size:.8rem; }
.test-case-row .btn-sm { margin-top:.25rem; }