* { box-sizing: border-box; }
html, body { margin: 0; background: #0d1117; color: #e6edf3;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button, input, select { font: inherit; }
:root { --lime: #d6ff00; --line: #222a35; --panel: #10151c; --muted: #8b949e; }

/* ---------- каркас ---------- */
header { display: flex; align-items: center; gap: 14px; padding: 11px 18px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
  background: rgba(13,17,23,.96); backdrop-filter: blur(10px); }
.brand { font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.brand span { color: var(--lime); }
.steps { display: flex; gap: 6px; }
.steps button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: #161b22; color: var(--muted); cursor: pointer; }
.steps button.on { border-color: var(--lime); color: var(--lime); background: #1a2010; }
.steps button b { opacity: .55; margin-right: 6px; font-weight: 600; }
.totals { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.chip { padding: 4px 10px; border-radius: 999px; background: #161b22;
  border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.chip b { color: var(--lime); font-variant-numeric: tabular-nums; }

main { padding: 18px; max-width: 1240px; margin: 0 auto; }
.screen { display: none; }
.screen.on { display: block; }
h2 { font-size: 16px; margin: 0 0 4px; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 16px; max-width: 780px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.spacer { flex: 1; }

/* ---------- кнопки ---------- */
.btn { padding: 9px 14px; border-radius: 9px; border: 1px solid var(--line);
  background: #161b22; color: #e6edf3; cursor: pointer; }
.btn:hover:not(:disabled) { border-color: #3d4a5c; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--lime); color: #14181d; border-color: var(--lime); font-weight: 600; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.danger:hover { border-color: #ff6b6b; color: #ff6b6b; }
.btn.sm { padding: 6px 10px; font-size: 13px; }

label.field { display: inline-flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted); }
label.field input, label.field select { background: #161b22; border: 1px solid var(--line);
  color: #e6edf3; border-radius: 8px; padding: 8px 10px; min-width: 96px; }

/* ---------- галерея фото ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.photo { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--panel); display: flex; flex-direction: column; }
/* без absolute картинка задаёт свою высоту и перебивает aspect-ratio */
.photo .shot { position: relative; aspect-ratio: 4/3; background: #0a0d12;
  cursor: pointer; overflow: hidden; }
.photo .shot img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.photo .badge { position: absolute; top: 8px; right: 8px; padding: 3px 8px;
  border-radius: 999px; font-size: 11px; background: rgba(13,17,23,.85);
  border: 1px solid var(--line); }
.photo .badge.new { color: #d29922; border-color: #4a3d1a; }
.photo .badge.ready { color: var(--lime); border-color: #3d4a10; }
.photo .body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.photo .nm { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo .sub { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
.photo .sub b { color: var(--lime); }
.progress { height: 5px; border-radius: 999px; background: #1b222c; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--lime); width: 0; transition: width .3s; }
.photo .acts { display: flex; gap: 6px; }
.photo .acts .btn { flex: 1; }

.drop { border: 1.5px dashed #2b3542; border-radius: 14px; padding: 26px;
  text-align: center; color: var(--muted); margin-bottom: 16px; transition: .15s; }
.drop.hot { border-color: var(--lime); color: var(--lime); background: #151a10; }

/* ---------- карта плиток ---------- */
.mapwrap { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .mapwrap { grid-template-columns: 1fr; } }
#tilemap { width: 100%; border: 1px solid var(--line); border-radius: 12px;
  background: #0a0d12; display: block; cursor: pointer; }
.legend { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; color: var(--muted); }
.legend .k { display: flex; align-items: center; gap: 8px; }
.legend .sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); }
.side { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--panel); }
.side h3 { margin: 0 0 10px; font-size: 13px; }
.kv { display: flex; justify-content: space-between; font-size: 12.5px;
  color: var(--muted); padding: 3px 0; }
.kv b { color: #e6edf3; font-variant-numeric: tabular-nums; }

/* ---------- разметчик ---------- */
.markbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.canvaswrap { position: relative; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: #0a0d12; }
#mark { display: block; width: 100%; touch-action: none; cursor: crosshair; }
.markside { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .markside { grid-template-columns: 1fr; } }
#minimap { width: 100%; border: 1px solid var(--line); border-radius: 10px;
  background: #0a0d12; display: block; cursor: pointer; margin-bottom: 12px; }
kbd { background: #161b22; border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 6px; font-family: ui-monospace, monospace; font-size: 11.5px; }
.keys { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.keys div { display: flex; gap: 6px; align-items: center; }

/* ---------- обучение и использование ---------- */
pre.log { background: #0a0d12; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; max-height: 300px; overflow: auto; font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap;
  color: #b6c2cf; margin: 0; }
svg.chart { width: 100%; height: 180px; background: #0a0d12;
  border: 1px solid var(--line); border-radius: 10px; }
.bar { height: 6px; background: #161b22; border-radius: 999px; overflow: hidden; margin: 12px 0 8px; }
.bar i { display: block; height: 100%; background: var(--lime); width: 0; transition: width .3s; }
.big { font-size: 46px; font-weight: 700; color: var(--lime); line-height: 1; }
.result img { max-width: 100%; border-radius: 12px; border: 1px solid var(--line); display: block; }
.warn { border-left: 3px solid #d29922; padding: 8px 12px; color: #c9b458;
  font-size: 13px; margin: 12px 0; background: #16150c; border-radius: 0 8px 8px 0; }
.empty { color: var(--muted); text-align: center; padding: 40px 20px;
  border: 1px dashed #2b3542; border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 500; font-size: 12px; }