*{box-sizing:border-box;margin:0;padding:0}
.hidden { display: none !important; } /* Обязательный класс для скрытия элементов */

:root{--bg:#0d1117;--surface:rgba(255,255,255,0.06);--border:rgba(255,255,255,0.10);--text:#e8eefc;--muted:#7a8a9a;--green:#2ecc71;--red:#e74c3c;--yellow:#f1c40f;--accent:#4e9eff;}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg);
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--bg); }
*::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }

body{margin:0;background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;background:var(--bg);z-index:10;transition:opacity .25s;overflow-y:auto;}
.screen.hidden{opacity:0;pointer-events:none}
#startScreen { justify-content: flex-start; padding-top: 80px; }

h1{font-size:2rem;font-weight:900;letter-spacing:-.5px}
h2{font-size:1.4rem;font-weight:700}
h3{font-size:1.1rem;font-weight:700;color:var(--accent);margin-bottom:10px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:14px;border:none;font-family:'Nunito',sans-serif;font-size:1.05rem;font-weight:700;cursor:pointer;transition:transform .12s,box-shadow .12s;min-width:200px;}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 20px rgba(78,158,255,.35)}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);min-width:120px;padding:10px 18px;font-size:.9rem}
.btn-dontknow{background:rgba(231,76,60,.15);color:var(--red);border:1px solid rgba(231,76,60,.3);min-width:120px;padding:10px 18px;font-size:.9rem}
.btn-sm {min-width: 0; padding: 8px 14px; font-size: 0.85rem;}
input[type=file]{display:none;}
.file-label{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--surface);border:1px dashed var(--border);border-radius:12px;cursor:pointer;font-size:.95rem;color:var(--muted);transition:border-color .2s,color .2s;width:100%;justify-content:center;}
.file-label:hover{border-color:var(--accent);color:var(--text)}
.auth-input{width:100%;max-width:300px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:'Nunito',sans-serif;font-size:1rem;outline:none;transition:border-color .2s;}
.auth-input:focus{border-color:var(--accent)}
#authError{color:var(--red);font-size:.9rem;min-height:1.2em;}
#progressWrap{position:absolute;top:0;left:0;right:0;height:5px;background:rgba(255,255,255,.08)}
#progressBar{height:100%;background:var(--accent);border-radius:0 3px 3px 0;transition:width .4s ease;width:0%;}
#progressLabel{position:absolute;top:12px;right:16px;font-size:.8rem;color:var(--muted);font-weight:700;}
#streakLabel{position:absolute;top:12px;left:16px;font-size:.8rem;color:var(--yellow);font-weight:700;}
#quizScreen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:70px 20px 20px;background:var(--bg);z-index:10;}
#quizScreen.hidden{display:none}
#questionBox{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px 32px;font-size:1.3rem;font-weight:700;text-align:center;max-width:680px;width:100%;line-height:1.4;}
#answersGrid{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);gap:12px;max-width:680px;width:100%;}
.answer-btn{background:var(--surface);border:1px solid var(--border);border-radius:14px;color:var(--text);font-family:'Nunito',sans-serif;font-size:1rem;font-weight:600;padding:16px 12px;cursor:pointer;text-align:center;transition:background .15s,border-color .15s,transform .1s;line-height:1.3;}
.answer-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.answer-btn:active{transform:scale(.97)}
.answer-btn.correct{background:rgba(46,204,113,.2);border-color:var(--green);color:var(--green)}
.answer-btn.wrong{background:rgba(231,76,60,.2);border-color:var(--red);color:var(--red)}
@keyframes bounce{0%{transform:scale(1)}30%{transform:scale(1.13)}55%{transform:scale(.95)}75%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}35%{transform:translateX(8px)}55%{transform:translateX(-6px)}75%{transform:translateX(6px)}90%{transform:translateX(-3px)}}
.anim-bounce{animation:bounce .45s ease}
.anim-shake{animation:shake .4s ease}

/* Подняли кнопки над оверлеем, чтобы они не тускнели */
#quizActions{display:flex;gap:12px;max-width:680px;width:100%;justify-content:flex-end;position:relative;z-index:30;}
#overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);font-size:3rem;z-index:20;pointer-events:none;}

#learnScreen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;background:var(--bg);z-index:10;}
#learnScreen.hidden{display:none}
#learnCard{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:40px 40px;max-width:600px;width:100%;text-align:center;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
#learnQ{font-size:1.25rem;font-weight:700;line-height:1.4}
#learnA{font-size:1.1rem;color:var(--accent);font-weight:600;min-height:1.5em;transition:opacity .2s}
#learnA.hidden{opacity:0}
#learnCounter{font-size:.85rem;color:var(--muted);font-weight:700}
#learnActions{display:flex;gap:12px}
#endStatsBox{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px 32px;max-width:520px;width:100%;text-align:center;line-height:2;font-size:1rem;max-height:70vh;overflow-y:auto;}
.stat-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border)}
.stat-row:last-child{border:none}
.hard-list{text-align:left;margin-top:8px;font-size:.9rem;color:var(--muted)}
.hard-item{padding:3px 0}
.deck-btn{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 24px;color:var(--text);font-size:1.1rem;font-weight:700;cursor:pointer;transition:.2s;width:100%;text-align:left;display:flex;align-items:center;gap:10px;}
.deck-btn:hover{background:rgba(78,158,255,.1);border-color:var(--accent);}

.modal{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal.active{display:flex;}
.modal-card{background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:30px;max-width:600px;width:100%;max-height:85vh;overflow-y:auto;position:relative;}
.user-stat-row{background:var(--surface);padding:16px;border-radius:12px;margin-bottom:15px;}
.deck-stat-row{display:flex;justify-content:space-between;font-size:.85rem;margin-top:5px;color:var(--text);border-top:1px solid var(--border);padding-top:5px;}
.admin-section { margin-bottom: 30px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.manage-item { display:flex; justify-content:space-between; align-items:center; background:var(--surface); padding:10px; border-radius:10px; margin-bottom:8px; gap:10px; }
.manage-item-col { background:var(--surface); padding:15px; border-radius:12px; margin-bottom:15px; display:flex; flex-direction:column; gap:15px; }
.manage-item-top { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.manage-item-top input { flex:1; min-width: 150px; }
.cb-label { display:flex; align-items:center; gap:5px; font-size:.9rem; cursor:pointer; }

.preview-item { display:flex; justify-content:space-between; gap:15px; padding:12px 15px; border-bottom:1px solid var(--border); font-size:0.95rem; align-items: center; }
.preview-item:last-child { border-bottom:none; }
.preview-item .q { font-weight:700; color:var(--text); flex:1; display:flex; align-items:center; gap:8px; }
.preview-item .a { color:var(--accent); text-align:right; flex:1; }
.preview-item input { width: 100%; padding: 6px 10px; font-size: 0.9rem; }
.speak-icon { cursor: pointer; color: var(--accent); font-size: 0.9em; transition: transform 0.1s; }
.speak-icon:hover { transform: scale(1.2); }

.deck-stat-block { background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; margin-bottom: 8px; }
.progress-bar-bg { width: 100%; height: 8px; background: var(--border); border-radius: 4px; margin: 6px 0; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--green); border-radius: 4px; transition: width 0.3s ease; }

.modal-close-btn { position: absolute; top: 15px; right: 15px; background: transparent; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; transition: color 0.2s; padding: 5px; line-height: 1; z-index: 10; }
.modal-close-btn:hover { color: var(--text); }

.top-bar { position: absolute; top: 0; left: 0; right: 0; padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; z-index: 20; background: linear-gradient(to bottom, var(--bg) 80%, transparent); }
.top-bar-left { display: flex; gap: 8px; flex-wrap: wrap; }
.top-bar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.katex { color: inherit; }

/* MULTI MODE */
.answer-btn.multi-btn { text-align: left; padding-left: 20px; position: relative; }
.answer-btn.multi-btn::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--muted);
  border-radius: 6px;
  margin-right: 15px;
  vertical-align: middle;
  transition: background 0.2s, border 0.2s;
}
.answer-btn.multi-btn.selected::before {
  background: var(--accent);
  border-color: var(--accent);
}
.answer-btn.multi-btn.selected {
  background: rgba(78,158,255,0.1);
  border-color: var(--accent);
}
.answer-btn.multi-btn.dim { opacity: 0.4; }

#multiComment {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 15px 20px;
  max-width: 680px;
  width: 100%;
  font-size: 1rem;
  color: var(--accent);
  text-align: center;
  animation: fadeIn 0.3s ease;
  position: relative; /* Подняли над оверлеем */
  z-index: 30;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* ARCADE STAR SHINE */
@keyframes starShine {
  0% { text-shadow: 0 0 5px var(--yellow); transform: scale(1); }
  50% { text-shadow: 0 0 20px var(--yellow), 0 0 30px #fff; transform: scale(1.15); }
  100% { text-shadow: 0 0 5px var(--yellow); transform: scale(1); }
}
.star-shine {
  display: inline-block;
  animation: starShine 1.5s infinite ease-in-out;
}