/* Стили только этого инструмента. Всё общее — в design-system/. */

/* ---------- Карточка формата в выдаче ---------- */
.spec{margin-top:16px}
.spec .card-head{align-items:center}
.spec-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.spec-plat{color:var(--muted-foreground);font-size:13px;font-weight:500}
.spec-sub{margin:12px 0 6px;font-size:13px;font-weight:600;color:var(--muted-foreground)}
.spec-sub:first-child{margin-top:0}
.spec .tbl{margin-top:0}
.spec-notes{margin:12px 0 0;padding-left:18px;color:var(--muted-foreground);font-size:13px;line-height:1.55}
.spec-notes li + li{margin-top:4px}
.spec-docs{margin-top:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.spec-docs a{color:var(--foreground)}
.spec-sizes{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.spec-sizes code{font-size:12px;background:var(--muted);border-radius:4px;padding:2px 6px;white-space:nowrap}
.nowrap{white-space:nowrap}

/* ---------- Сейфзоны ---------- */
.safe-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px;align-items:start}
.stage{background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:grid;place-items:center}
.stage canvas{width:100%;max-width:280px;height:auto;border-radius:8px;display:block;box-shadow:var(--shadow-sm)}
.card-head select{width:auto;min-width:240px;max-width:100%}
.safe-side{min-width:0}
.safe-controls{margin-top:16px}
.zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:12px}
.zone{border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);padding:8px 10px;background:var(--control)}
.zone b{display:block;font-size:15px;font-weight:600;line-height:20px;font-family:var(--mono)}
.zone span{display:block;font-size:11.5px;line-height:16px;color:var(--muted-foreground)}
@media (max-width:820px){
  .safe-grid{grid-template-columns:1fr}
  .stage canvas{max-width:220px}
}

/* ---------- Проверка файла ---------- */
.drop{border:1px dashed var(--input);border-radius:var(--radius);padding:28px 20px;text-align:center;cursor:pointer;background:var(--control);transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--ring);background:var(--accent)}
.drop svg{width:24px;height:24px;color:var(--muted-foreground)}
.drop p{margin:8px 0 0;font-size:14px}
.drop .hint-sm{margin-top:4px}
.file-res{margin-top:16px}
.file-res h3{margin:0;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.file-res h3 code{font-size:13px;font-weight:500;word-break:break-all}
.file-res + .file-res{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}

/* ---------- Подвал ---------- */
.foot-note{color:var(--muted-foreground);font-size:13px;margin-top:40px;padding-top:20px;border-top:1px solid var(--border);max-width:80ch}
.foot-note a{color:var(--foreground)}