/* СПОКОЙНЫЙ РЕТРО-ТЕРМИНАЛ CSS */
* { box-sizing: border-box; font-family: 'Consolas', 'Courier New', monospace; }
html, body { margin: 0; padding: 0; background: #1e1e1e; color: #cccccc; line-height: 1.6; }
::selection { background: #4a8c6f; color: #fff; }
a { color: #8fc0a9; text-decoration: underline; }

/* Сетка */
.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; } .gap-3 { gap: 1rem; } .mt-4 { margin-top: 1.5rem; } .mb-4 { margin-bottom: 1.5rem; }
.max-w-6xl { max-width: 1050px; margin: 0 auto; padding: 0 1.5rem; } .max-w-3xl { max-width: 750px; margin: 0 auto; padding: 0 1.5rem; }
.max-w-4xl { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }

/* Хедер */
header { border-bottom: 1px solid #333; background: #252526; padding: 0.75rem 0; position: sticky; top: 0; z-index: 10; }
.brand-mark { border: 1px solid #4a8c6f; color: #8fc0a9; padding: 0.4rem; display: flex; align-items: center; justify-content: center; border-radius: 4px; }

/* Кнопки */
.btn { background: #2d2d2d; color: #d4d4d4; border: 1px solid #444; padding: 0.5rem 1rem; cursor: pointer; font-size: 0.9rem; transition: all 0.15s; border-radius: 3px; }
.btn:hover { background: #3e3e42; border-color: #555; }
.btn-primary { background: #4a8c6f; color: #fff; border-color: #4a8c6f; }
.btn-primary:hover { background: #3b7059; border-color: #3b7059; }
.btn-danger { color: #f48771; border-color: #5a2a2a; background: #2d1e1e; }
.btn-danger:hover { background: #4a2525; border-color: #f48771; }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Формы */
.field { margin-bottom: 1.25rem; position: relative; }
.field input { width: 100%; background: #1e1e1e; border: 1px solid #444; color: #ccc; padding: 0.75rem; font-size: 1rem; outline: none; border-radius: 3px; }
.field input:focus { border-color: #4a8c6f; }
.field label { position: absolute; left: 0.75rem; top: 0.75rem; transition: 0.2s; pointer-events: none; color: #888; }
.field input:focus + label, .field input:not(:placeholder-shown) + label { top: -0.6rem; font-size: 0.75rem; color: #8fc0a9; background: #1e1e1e; padding: 0 0.25rem; }

/* Карточки */
.class-card, .test-card, .student-row { border: 1px solid #333; background: #252526; padding: 1rem; margin-bottom: 0.75rem; border-radius: 4px; }
.class-card:hover { border-color: #555; background: #2d2d2d; cursor: pointer; }
.class-card.create { border: 1px dashed #555; color: #888; display: flex; align-items: center; justify-content: center; min-height: 100px; }
.class-card.create:hover { border-color: #8fc0a9; color: #8fc0a9; }

/* Бейджи и чипы */
.role-badge { border: 1px solid #444; background: #2d2d2d; color: #ccc; padding: 0.2rem 0.5rem; font-size: 0.8rem; border-radius: 3px; }
.chip { border: 1px solid #444; background: #1e1e1e; padding: 0.1rem 0.4rem; font-size: 0.75rem; color: #888; margin-right: 0.5rem; border-radius: 3px; }
.test-id { color: #6a9955; font-weight: bold; margin-right: 0.5rem; }

/* Модалки */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(2px); }
.modal { background: #252526; border: 1px solid #444; padding: 2rem; width: 100%; max-width: 500px; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.modal h3 { margin-top: 0; color: #fff; font-weight: normal; border-bottom: 1px solid #333; padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }

/* Журнал (Таблица) */
.journal-wrapper { overflow-x: auto; border: 1px solid #333; border-radius: 6px; background: #252526; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; text-align: center; font-size: 0.9rem; }
th, td { border: 1px solid #333; padding: 0.75rem 0.5rem; }
th { background: #2d2d2d; color: #fff; font-weight: normal; }
th.sticky-left, td.sticky-left { position: sticky; left: 0; background: #252526; text-align: left; z-index: 2; min-width: 180px; border-right: 2px solid #333; }
th.sticky-left { background: #2d2d2d; }
tr:hover td { background-color: #2a2a2a; }
tr:hover td.sticky-left { background-color: #2d2d2d; }
.th-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; }
.th-id { color: #8fc0a9; font-weight: bold; font-size: 1rem; }
.th-title { color: #a0a0a0; font-size: 0.75rem; font-weight: normal; max-width: 130px; white-space: normal; word-wrap: break-word; line-height: 1.2; }
.j-grade { display: inline-block; padding: 0.2rem 0.6rem; font-weight: bold; border-radius: 3px; min-width: 28px; }
.g5 { background: #1e3b2e; color: #8fc0a9; } .g4 { background: #1e2e3b; color: #8fbcbb; } .g3 { background: #3b2e1e; color: #dcdcaa; } .g2 { background: #3b1e1e; color: #f48771; }

/* Конструктор тестов */
.q-block { border: 1px solid #333; background: #252526; padding: 1.25rem; margin-bottom: 1rem; border-radius: 6px; }
.q-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.q-num { background: #333; color: #8fc0a9; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; flex-shrink: 0; }
.q-text { flex: 1; background: #1e1e1e; border: 1px solid #444; color: #fff; padding: 0.6rem 0.75rem; border-radius: 3px; outline: none; font-size: 1rem; }
.q-text:focus { border-color: #4a8c6f; }

.opt-list { display: flex; flex-direction: column; gap: 0.5rem; }
.opt-row { display: flex; align-items: center; gap: 0.75rem; }
.opt-row input[type="radio"] { accent-color: #4a8c6f; width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }
.opt-row input[type="text"] { flex: 1; background: #1e1e1e; border: 1px solid #444; color: #ccc; padding: 0.5rem 0.75rem; border-radius: 3px; outline: none; }
.opt-row input[type="text"]:focus { border-color: #4a8c6f; }
.opt-remove { background: transparent; border: none; color: #f48771; cursor: pointer; font-size: 1.2rem; padding: 0 0.5rem; opacity: 0.6; transition: opacity 0.2s; }
.opt-remove:hover { opacity: 1; }

.save-bar { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; padding: 1rem; background: #252526; border: 1px solid #333; border-radius: 6px; position: sticky; bottom: 1rem; }

/* Разное */
.empty-state { border: 1px dashed #444; padding: 2rem; text-align: center; color: #777; border-radius: 4px; }
.hidden { display: none !important; }

@media (max-width: 720px) {
  .max-w-6xl, .max-w-3xl, .max-w-4xl { padding: 0 1rem; }
  .actions-row { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .actions-row .btn { width: 100%; }
  .grid-2 { grid-template-columns: 1fr; }
  .student-row { flex-direction: column; align-items: flex-start; }
  .student-row > div:last-child { margin-top: 1rem; width: 100%; display: flex; gap: 0.5rem; }
  .student-row > div:last-child button { flex: 1; }
  .save-bar { flex-direction: column-reverse; }
  .save-bar .btn { width: 100%; }
}