:root{
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1c2029;
  --border: #2a2f3a;
  --accent: #5ac8fa;
  --accent-2: #7ee081;
  --text: #e9edf1;
  --muted: #a7b0bd;
  --danger: #ff7474;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --radius-sm: 10px;
}

*{ box-sizing: border-box; }
html, body{
  margin:0; padding:0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
img, video{ max-width:100%; height:auto; border-radius: var(--radius-sm); }
a{
  color: var(--accent);
  text-decoration: none;
  transition: .2s ease;
}
a:hover{ color:#8ad7ff; text-decoration: underline; }
h1, h2, h3{ margin: .2rem 0 1rem; line-height: 1.2; }
h1 {text-align: center;}

table{ border-collapse: collapse; }
td{ vertical-align: top; }

table[border="1"]{
  border:1px solid var(--border) !important;
  border-radius: var(--radius);
  background: var(--panel);
  overflow:hidden;
  box-shadow: var(--shadow);
}
table[border="0"]{
  border: none;
}

main > table, header > table, footer > table{
  max-width: 1300px;
  margin: 0 auto;
  background: transparent;
  border: none !important;
}

hr{
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
  margin: 24px 0;
}

header{
  position: sticky; top:0; z-index: 20;
  background: rgba(15,17,21,.85);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 0 rgba(255,255,255,.03) inset, 0 8px 20px rgba(0,0,0,.25);
  top: 0;
  z-index: 1000;
}

header img[alt*="Логотип"]{ display:block; }
header nav a{
  display:inline-block;
  padding:10px 14px;
  margin: 0 2px;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  border:1px solid transparent;
}
header nav a:hover{
  background: var(--panel-2);
  border-color: var(--border);
  transform: translateY(-1px);
}
header nav a strong{ color: var(--accent); }

header table[border="1"]
td{
  background: var(--panel-2);
  border-color: var(--border);
  
}
header table[border="1"] a{
  display:block; padding:8px 0;
}
header td[bgcolor="lightgray"]{
  background: #2b3240 !important;
}

button, .btn{
  cursor: pointer;
  border:1px solid var(--border);
  background: linear-gradient(180deg, #242a35, #1a1f28);
  color: var(--text);
  padding:10px 16px;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 6px 18px rgba(0,0,0,.25);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
button:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(255,255,255,.05) inset, 0 10px 24px rgba(0,0,0,.35);
}
button:active{ transform: translateY(0); }

/* Сетка кнопок «Задание на выполнение» (ЕГЭ/ОГЭ) */
.task-numbers{
  display: grid;
  gap: 8px;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto 1rem;
}
.task-numbers--ege{
  grid-template-columns: repeat(13, minmax(48px, 1fr));
}
.task-numbers--oge{
  grid-template-columns: repeat(8, minmax(48px, 1fr));
}
@media (max-width: 800px){
  .task-numbers--ege{ grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .task-numbers--oge{ grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
}
.task-number-btn{
  width: 100%;
  min-width: 48px;
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
}
.task-number-btn--span2{
  grid-column: span 2;
}

td > button[type="submit"]{
  width:70px !important;
  height:56px !important;
  font-weight:700;
  border-radius: 12px;
}
td > button[type="submit"][style*="background-color"]{
  background: linear-gradient(180deg, #495062, #2f3644) !important;
  border-color:#616b7e;
}

a > button[type="button"]{
  width:180px !important; height:44px !important;
  font-weight:700; letter-spacing:.3px;
  background: linear-gradient(180deg, #34b1ff, #2496db);
  border-color: #1a85c6;
}
a > button[type="button"]:hover{
  background: linear-gradient(180deg, #5ac8fa, #2aa6ee);
}

input[type="text"], select{
  width: 100%;
  max-width: 620px;
  padding:10px 12px;
  border-radius: 10px;
  border:1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  outline: none;
}
input::placeholder{ color: var(--muted); }
label{ color: var(--muted); }

main p{ margin: .2rem 0 .9rem; }
small{ color: var(--muted); }

table[width="80%"][border="1"], 
table[width="100%"][border="1"][cellpadding="8"],
table[width="100%"][border="1"][cellpadding="10"]{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
}
table[border="1"] tr:first-child td{
  background: rgba(255,255,255,.02);
  border-bottom:1px solid var(--border);
  font-weight:600;
}

img[alt*="Схема"]{ border:1px solid var(--border); }

table[height="300"][border="1"] td {
  background: radial-gradient(1200px 500px at 50% 0%, rgba(90, 200, 250, .06), transparent 60%), var(--panel);
}
table[height="300"][border="1"] p {
  min-height: 70px;
  
}
table[height="300"][border="1"] img {
  aspect-ratio: 16 / 9;
  height: auto;
}
table[height="300"][border="1"] a {
  font-weight: 600;
  display: inline-block;
  margin-top: 8px;
}

table[height="300"][border="1"] {
  margin-bottom: 20px;
}

details{
  border:1px dashed var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  background: #151924;
}
summary{ cursor:pointer; color: var(--accent-2); font-weight:700; }
details[open]{ border-style: solid; }

footer{
  margin-top: 40px;
  background: #0e1218;
  box-shadow: 0 -10px 30px rgba(0,0,0,.35) inset;
  width: 100%;
}
footer img{ filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
footer a:hover img{ transform: translateY(-1px); transition: .15s; }
footer p{ color: var(--muted); margin:0 0 6px; }

::selection{ background: rgba(90,200,250,.25); }
td[align="center"] p strong{ font-size: 1.05rem; }

video{
  background:#000;
  border:1px solid var(--border);
}

.sidebar-actions{
  margin: 14px 0 20px; 
  padding: 0;
  display: flex;
  gap: 10px;
  text-align: center;
              
}

.sidebar-actions .btn{
  width: 100%;
}

@media (max-width: 1024px){
  header nav a{ padding:8px 10px; }
  a > button[type="button"]{ width:160px !important; }
  
}
@media (min-width: 861px){
  header > table td:last-child > table[border="1"]{
    margin-top: 15px;
  }
}
@media (max-width: 860px){
  table[width="100%"] tr{ display:block; }
  table[width="100%"] td{ width:100% !important; display:block; }
  header > table td[width]{ width:100% !important; text-align:center !important; }
  header > table td:last-child{ margin-top:8px; }
  td > button[type="submit"]{ width:52px !important; height:52px !important; }
}
@media (max-width: 560px){
  body{ font-size: 15px; }
  header nav a{ margin:2px 0; }
  a > button[type="button"]{ width:100% !important; }
  input[type="text"], select{ max-width: 100%; }
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  width: calc(33% - 20px);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: var(--text);
  height: 40px;
  margin: 20px;
}

.card-date {
  color: var(--muted);
  font-size: 14px;
}

.card a {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 15px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

.card a:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .card {
    width: 100%;
  }
}

.field { 
  margin: 0 0 14px;
  margin-left: 20px;
  width: 100%; 
}

.field label { display:block; font-weight:600; margin: 0 0 6px; color: var(--text); }

.field__hint,
.field__error{
  font-size: 12px; line-height: 1.2;
  min-height: 18px;
}

.field__hint{ color: var(--muted); }
.field__error{ color: var(--danger); }

.answer-container{
  min-height: 110px;
  display: grid; align-items: start;
}

.answer-variant{ display:none; }
.answer-variant.is-active{ display:block; }

.form-actions{ display:flex; gap:10px; margin-top: 8px; }
.form-actions .btn, .form-actions button{ width:100%; }

.file-note{ font-size:12px; color: var(--muted); margin-top:6px; }

textarea{
  width: 100%;
  max-width: 620px;
  height: 150px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  outline: none;
}

img.zoomable {
    cursor: zoom-in;
}

.zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: auto;
}

.zoom-overlay__inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.zoom-overlay__img {
    max-width: none;
    max-height: none;
    will-change: transform;
    transform: translate3d(0,0,0) scale(1);
    transform-origin: center center;
    cursor: grab;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
}

.zoom-overlay__img:active {
    cursor: grabbing;
}

.answer-check{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.answer-input{
  min-width: 220px;
  flex: 1 1 220px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
  box-sizing: border-box;
}

.answer-input:focus{
  border-color: rgba(255,255,255,.35);
}

.answer-btn{
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  cursor: pointer;
}

.answer-btn:hover{ background: rgba(255,255,255,.14); }
.answer-btn:disabled{ opacity: .6; cursor: default; }

.answer-result{
  width: 100%;
  margin-top: 6px;
  font-size: 14px;
  opacity: .95;
}

.answer-result.ok{ color: #6bff95; }
.answer-result.bad{ color: #ff7b7b; }
.answer-result.neutral{ color: rgba(255,255,255,.8); }