/* Конвертер оценочных средств. Самостоятельное приложение: ни один стиль отсюда
   не разделяется с тренажером по госэкзамену, иначе правка там ломала бы это.

   Направление: лист в клетку, на котором разложены карточки вопросов. Поэтому
   фон расчерчен сеткой, бумага холодная, а единственный яркий объект на экране —
   зона загрузки. Теней нет нигде: глубина делается поверхностью, линией и светом. */

:root{
  /* Палитра взята с официального сайта волггму (volgmed.ru, переменные их стилей):
     изумруд --primary-color #078877, темный #1A685D, светлый #16B798, синий акцент
     #147FC7, золото #C5952F, фон страницы #ECEEEE. Своих оттенков не выдумываем:
     приложение показывают на кафедре, и оно должно читаться как вузовское.

     По умолчанию приложение ТЕМНОЕ (решение Лианы 22.10.2026), поэтому темные
     значения стоят прямо в :root, а не за медиазапросом: системная светлая тема
     его не перебивает. Светлое включается только кнопкой. */
  --paper:#0A1413; --surface:#10201D; --surface-2:#172B27;
  --ink:#E7EFEC; --ink-2:#9FB2AE; --ink-3:#8A9A97;
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07);
  --grid:rgba(255,255,255,.045);
  --glow:rgba(22,183,152,.18);

  --acc:#16B798; --acc-text:#3FD3B5; --on-acc:#04221D; --acc-hover:#35CBAD;
  --acc-soft:rgba(22,183,152,.12); --acc-line:rgba(22,183,152,.32);

  --warn-text:#E5C78C; --warn-soft:rgba(229,199,140,.12); --warn-line:rgba(229,199,140,.32);
  --err-text:#F08A80; --err-soft:rgba(240,138,128,.11); --err-line:rgba(240,138,128,.30);

  --t-multi:#35CBAD; --t-open:#58A8E4; --t-seq:#E5C78C; --t-match:#A98BE0;

  /* Цвет метки у типа вопроса несет смысл, а не украшает: по нему видно,
     что внутри дисциплины есть и закрытые, и открытые задания. */

  --f-display:"Unbounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-ui:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

:root[data-theme="light"]{
  --paper:#ECEEEE; --surface:#FFFFFF; --surface-2:#F3F6F5;
  --ink:#16201E; --ink-2:#475452; --ink-3:#5F6C6A;
  --line:rgba(22,32,30,.13); --line-soft:rgba(22,32,30,.07);
  --grid:rgba(22,32,30,.055);
  --glow:rgba(7,136,119,.15);

  --acc:#078877; --acc-text:#06695C; --on-acc:#FFFFFF; --acc-hover:#1A685D;
  --acc-soft:rgba(7,136,119,.08); --acc-line:rgba(7,136,119,.26);

  --warn-text:#8A6410; --warn-soft:rgba(197,149,47,.14); --warn-line:rgba(197,149,47,.38);
  --err-text:#AE2F26; --err-soft:rgba(190,60,48,.09); --err-line:rgba(190,60,48,.28);

  --t-multi:#078877; --t-open:#147FC7; --t-seq:#C5952F; --t-match:#6B4FA8;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-ui);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;position:relative;min-height:100vh;
}
/* Сетка и свечение лежат отдельным слоем под содержимым: так они не мешают
   прокрутке и не перерисовываются вместе с карточками. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 480px at 50% -120px, var(--glow), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/30px 30px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/30px 30px;
  mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%);
}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.14;font-weight:600}
p{margin:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:9;background:var(--acc);color:var(--on-acc);
  padding:10px 16px;border-radius:9px;font-weight:600;text-decoration:none}

.wrap{max-width:960px;margin:0 auto;padding:0 24px}
@media(max-width:700px){.wrap{padding:0 16px}}

/* ---------- шапка ---------- */
header{position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.head{display:flex;align-items:center;gap:14px;padding:13px 0}
.mark{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.mark svg{flex:none}
.mark b{font-family:var(--f-display);font-size:14px;font-weight:600;letter-spacing:-.02em;
  white-space:nowrap}
.mark span{font-size:13px;color:var(--ink-3);white-space:nowrap}
@media(max-width:600px){.mark span{display:none}}
.theme{width:38px;height:38px;flex:none;display:grid;place-items:center;cursor:pointer;
  border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.theme:hover{color:var(--ink);border-color:var(--acc-line)}
.theme svg{width:18px;height:18px}
.i-sun{display:none}
:root[data-theme="light"] .i-sun{display:block}
:root[data-theme="light"] .i-moon{display:none}

/* ---------- первый экран ---------- */
.intro{padding:40px 0 26px}
/* Строка принадлежности над заголовком: приложение вузовское, и это видно
   раньше, чем человек дочитает заголовок. */
.eyebrow{margin-bottom:14px;font-size:13px;font-weight:600;color:var(--acc-text);
  display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--acc)}
.intro h1{font-family:var(--f-display);font-size:clamp(29px,4.1vw,46px);font-weight:600;
  letter-spacing:-.035em;text-wrap:balance;max-width:15ch}
.intro h1 em{font-style:normal;color:var(--acc-text)}
.intro p{margin-top:18px;max-width:52ch;font-size:17.5px;color:var(--ink-2)}
.local{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:7px 14px;
  border-radius:999px;background:var(--surface);border:1px solid var(--acc-line);
  font-size:13.5px;font-weight:500;color:var(--acc-text)}
.local svg{width:15px;height:15px}
@media(max-width:700px){.intro{padding:38px 0 24px}.intro p{font-size:16px}}

/* ---------- рабочая зона ---------- */
.work{display:grid;gap:16px}
/* Раскрывающаяся строка с необязательной настройкой: тихая, пока не нужна. */
.more summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;
  font-weight:500;color:var(--ink-2);list-style:none;padding:6px 2px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.more[open] summary::before{transform:rotate(45deg)}
.more summary:hover{color:var(--ink)}
.more .field{margin-top:12px}
.field{display:grid;gap:8px}
.field label{font-size:14px;font-weight:600}
.field label span{margin-left:7px;font-weight:500;color:var(--ink-3)}
/* Строка «во что превратится категория» — ответ на главный вопрос преподавателя
   «куда это ляжет в Moodle», поэтому стоит в карточке, а не в справке. */
.card .cat{margin-top:12px;font-family:var(--f-mono);font-size:12px;color:var(--ink-2);
  overflow-wrap:break-word}
.card .cat b{color:var(--ink);font-weight:500}
.field input{height:54px;padding:0 17px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-size:15.5px}
.field input:focus{outline:2px solid var(--acc);outline-offset:0;border-color:transparent}
.field .hint{font-size:13.5px;color:var(--ink-3)}
.field .hint code{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2)}

/* Зона загрузки — единственный громкий объект экрана. Внутри своя клетка: при
   перетаскивании она подсвечивается, и видно, что файл попал куда нужно. */
.drop{position:relative;overflow:hidden;border:2px dashed var(--acc-line);border-radius:20px;
  background:var(--surface);padding:44px 24px;text-align:center;cursor:pointer;
  transition:border-color .18s, transform .18s}
/* Свет живет внутри самой зоны. Раньше он был на общем фоновом слое и всегда
   светил в верхние 360 px окна, то есть мимо того, что подсвечивал. */
.drop::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 220px at 50% 42%, var(--glow), transparent 72%)}
.drop::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/22px 22px;
  mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent 100%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent 100%);
  transition:opacity .18s}
.drop>*{position:relative}
.drop .ico{width:58px;height:58px;margin:0 auto 15px;display:grid;place-items:center;
  border-radius:15px;background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--acc-text)}
.drop .ico svg{width:26px;height:26px}
.drop b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em}
.drop span{display:block;margin-top:8px;font-size:14.5px;color:var(--ink-2)}
.drop:hover{border-color:var(--acc-line)}
.drop.hot{border-color:var(--acc);border-style:solid;transform:scale(1.008)}
.drop.hot::before{opacity:1}
.drop.hot b,.drop.hot span{color:var(--acc-text)}
@media(max-width:700px){.drop{padding:36px 16px;border-radius:17px}.drop b{font-size:18px}}
@media (prefers-reduced-motion: reduce){.drop{transition:none}.drop.hot{transform:none}}

.busy[hidden]{display:none}
.busy{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2)}
.busy i{width:14px;height:14px;border-radius:50%;border:2px solid var(--acc-line);
  border-top-color:var(--acc);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- карточка дисциплины ---------- */
.out{display:grid;gap:14px;margin-top:12px}
.card{border:1px solid var(--line);border-radius:20px;background:var(--surface);
  padding:24px 26px;animation:rise .26s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .busy i{animation:none}
  .card{animation:none}
}
.card .top{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.card .count{font-family:var(--f-display);font-size:38px;font-weight:600;letter-spacing:-.04em;
  line-height:1;color:var(--acc-text);min-width:96px}
.card .count small{display:block;margin-top:6px;font-family:var(--f-ui);font-size:12.5px;
  font-weight:500;letter-spacing:0;color:var(--ink-3)}
.card .about{min-width:0;flex:1}
.card .name{font-size:22px;font-weight:600;letter-spacing:-.022em;line-height:1.2}
.card .src{margin-top:5px;font-family:var(--f-mono);font-size:12px;color:var(--ink-3);
  overflow-wrap:break-word}
.types{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.type{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;
  padding:5px 12px 5px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.type::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--dot,var(--ink-3))}
.type b{font-weight:600;color:var(--ink)}

.note{margin-top:16px;padding:14px 16px;border-radius:13px;font-size:14px;
  background:var(--warn-soft);border:1px solid var(--warn-line)}
.note b{display:block;margin-bottom:5px;color:var(--warn-text)}
.note ul{margin:0;padding-left:18px}
.note li+li{margin-top:3px}
.note.bad{background:var(--err-soft);border-color:var(--err-line)}
.note.bad b{color:var(--err-text)}

.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;
  padding:0 19px;border-radius:12px;border:1px solid transparent;font:inherit;font-size:14.5px;
  font-weight:600;cursor:pointer;text-decoration:none;background:var(--acc);color:var(--on-acc);
  transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--acc-hover)}
.btn.sec{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.sec:hover{background:var(--surface-2);border-color:var(--acc-line)}
.btn[disabled]{opacity:.55;cursor:default}
.btn svg{width:17px;height:17px}
@media(max-width:560px){
  .btns{display:grid;gap:9px}
  .btns .btn,.all .btn{width:100%}
  .card{padding:20px}
  .card .count{font-size:32px;min-width:0}
}

.all{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 22px;border-radius:17px;background:var(--acc-soft);border:1px solid var(--acc-line)}
.all b{font-size:15px}

/* ---------- справка ---------- */
.help{margin:70px 0 80px;padding-top:36px;border-top:1px solid var(--line-soft)}
.help h2{font-size:13px;font-weight:600;color:var(--ink-3);text-transform:none}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:24px 0 0;padding:0;
  list-style:none;counter-reset:s}
.steps li{position:relative;padding-top:52px;font-size:15px;color:var(--ink-2)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:-2px;
  font-family:var(--f-display);font-size:44px;font-weight:600;line-height:1;
  letter-spacing:-.05em;color:var(--acc-soft);
  -webkit-text-stroke:1px var(--acc-line)}
.steps b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
@media(max-width:760px){
  .steps{grid-template-columns:1fr;gap:22px}
  .steps li{padding-top:0;padding-left:52px;min-height:44px}
  .steps li::before{font-size:36px}
}
footer{padding:0 0 52px;font-size:13.5px;color:var(--ink-3)}