/* Стили интерактивных инструментов форума */

.tool-panel{ margin-bottom:28px; }
.tool-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:start; }
@media (max-width: 900px){ .tool-grid{ grid-template-columns:1fr; } }

.tool-main, .tool-side{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px 24px;
}
.tool-field{ margin-bottom:16px; }
.tool-field label{
  display:block; font-family:var(--font-mono); font-size:.74rem;
  color:var(--grey-dim); margin-bottom:8px;
}
.tool-field input[type=text], .tool-field input[type=number],
.tool-field textarea, .tool-field select, .dm-toolbar input, .dm-toolbar select{
  width:100%; background:var(--black); border:1px solid var(--border);
  border-radius:var(--r-md); padding:.7rem .95rem; color:var(--white);
  font-family:var(--font-body); font-size:.92rem;
}
.tool-field textarea{ resize:vertical; font-family:var(--font-mono); font-size:.88rem; line-height:1.6; }
.tool-field input:focus, .tool-field textarea:focus, .tool-field select:focus{
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(232,52,42,.15);
}
.tool-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.tool-hint{ font-size:.78rem; color:var(--grey-dim); line-height:1.55; margin-top:8px; }
.tool-hint code, .tool-steps code{
  font-family:var(--font-mono); font-size:.85em; background:var(--surface-2);
  border:1px solid var(--border); border-radius:5px; padding:1px 5px; color:var(--red-hi);
}
.tool-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; counter-reset:s; }
.tool-steps li{ position:relative; padding-left:18px; font-size:.83rem; color:var(--grey); line-height:1.55; }
.tool-steps li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; background:var(--red); border-radius:1px; }
.tool-steps b{ color:var(--white); }

/* ---- превью в стиле списка серверов Minecraft ---- */
.mc-preview{
  /* настоящая текстура земли из игры вместо нарисованной клетки */
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url("/forum/assets/img/mc-dirt.png") center/auto repeat;
  border:2px solid #1a1a1a; border-radius:6px; padding:14px; margin-bottom:20px;
}
.mc-server-row{
  display:flex; gap:12px; align-items:flex-start;
  background:rgba(0,0,0,.55); border:1px solid #2b2b2b; padding:10px;
}
.mc-icon{
  width:56px; height:56px; flex-shrink:0;
  background:url("/forum/assets/img/mc-server-icon.png") center/cover no-repeat;
  border:1px solid #1a1a1a;
  image-rendering:pixelated;   /* иконка маленькая — не размываем при растяжении */
}
.mc-lines{ flex:1; min-width:0; font-family:var(--font-mono); }
.mc-name{ color:#FFFFFF; font-size:.92rem; margin-bottom:4px; }
.mc-motd{ font-size:.88rem; line-height:1.45; min-height:1.25em; word-break:break-word; }
.mc-players{
  text-align:right; font-family:var(--font-mono); font-size:.82rem; color:#AAAAAA; flex-shrink:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
}
.mc-ping{ width:22px; height:12px; background:linear-gradient(90deg,#55FF55 60%,#333 60%); }
@keyframes mcmagic{ 0%{opacity:1} 50%{opacity:.35} 100%{opacity:1} }
.mc-magic{ animation:mcmagic .35s steps(2) infinite; }

/* ---- палитра и кнопки форматов ---- */
.swatches{ display:flex; gap:6px; flex-wrap:wrap; }
.swatch{
  width:30px; height:30px; border-radius:7px; border:1px solid var(--border);
  cursor:pointer; padding:0; transition:transform .12s ease, border-color .12s ease;
}
.swatch:hover{ transform:translateY(-2px); border-color:var(--white); }
.fmt-buttons{ display:flex; gap:6px; flex-wrap:wrap; }
.fmt-btn{
  width:34px; height:32px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--white);
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
}
.fmt-btn:hover{ border-color:var(--red); color:var(--red-hi); }
.fmt-btn.on{ background:var(--red); border-color:var(--red); color:#120503; }

.code-out{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--black); border:1px solid var(--border); border-radius:var(--r-md);
  padding:12px 14px;
}
.code-out code{
  flex:1; min-width:0; font-family:var(--font-mono); font-size:.82rem; color:var(--white);
  word-break:break-all; white-space:pre-wrap; line-height:1.6;
}
.code-out.tall code{ max-height:280px; overflow-y:auto; }
.code-out .btn{ flex-shrink:0; }
.btn.copied{ background:#3FBF6A; color:#06200f; }

/* ---- DeluxeMenus ---- */
.dm-toolbar{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px; }
.dm-toolbar label{ font-family:var(--font-mono); font-size:.74rem; color:var(--grey-dim); }
.dm-toolbar input{ min-width:220px; margin-top:6px; }
.dm-toolbar select{ margin-top:6px; }
.dm-chest{
  display:grid; grid-template-columns:repeat(9, 1fr); gap:4px;
  background:#c6c6c6; border:3px solid #373737; border-radius:4px; padding:8px;
}
.dm-slot{
  aspect-ratio:1; background:#8b8b8b; border:2px solid #373737;
  display:grid; place-items:center; position:relative; padding:0; cursor:pointer;
}
.dm-slot:hover{ background:#a5a5a5; }
.dm-slot.filled{ background:#5a7d3f; }
.dm-slot.active{ outline:2px solid var(--red); outline-offset:1px; }
.dm-num{ font-family:var(--font-mono); font-size:.6rem; color:#5a5a5a; }
.dm-mat{ font-family:var(--font-mono); font-size:.62rem; color:#fff; font-weight:700; }
.dm-amount{
  position:absolute; right:2px; bottom:1px;
  font-family:var(--font-mono); font-size:.58rem; color:#fff; text-shadow:1px 1px 0 #000;
}

/* ---- градиент ---- */
.grad-preview{
  background:var(--black); border:1px solid var(--border); border-radius:var(--r-md);
  padding:26px 20px; text-align:center; margin-bottom:20px;
  font-family:var(--font-mono); font-size:1.5rem; word-break:break-word; line-height:1.4;
}
.grad-colors{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.grad-stop{ position:relative; }
.grad-stop input[type=color]{
  width:52px; height:40px; border:1px solid var(--border); border-radius:9px;
  background:var(--black); padding:3px; cursor:pointer;
}
.stop-del{
  position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border); color:var(--grey);
  font-size:.7rem; line-height:1; display:grid; place-items:center;
}
.stop-del:hover{ border-color:var(--red); color:var(--red-hi); }
.grad-presets{ display:flex; gap:8px; flex-wrap:wrap; }
.preset{
  height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--border);
  position:relative; overflow:hidden;
}
.preset span{
  position:relative; font-size:.76rem; font-weight:600; color:#0A0A0B;
  text-shadow:0 1px 2px rgba(255,255,255,.4);
}
.preset:hover{ border-color:var(--white); }

/* ---- проверка плагина ---- */
.scan-intro{ margin-bottom:18px; }
.scan-intro p{ color:var(--grey); font-size:.92rem; line-height:1.65; }
.scan-zone{ margin-bottom:8px; }
.verdict{
  display:flex; flex-direction:column; gap:5px;
  border:1px solid var(--border); border-left-width:3px; border-radius:var(--r-lg);
  padding:20px 24px; margin-bottom:16px; background:var(--surface);
}
.verdict b{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--white); }
.verdict span{ font-family:var(--font-mono); font-size:.78rem; color:var(--grey-dim); }
.verdict.ok{ border-left-color:#3FBF6A; }
.verdict.low{ border-left-color:#7FA6C9; }
.verdict.moderate{ border-left-color:#E0B341; }
.verdict.high{ border-left-color:#FF8A3D; }
.verdict.critical{ border-left-color:#FF4D3D; background:linear-gradient(150deg, rgba(255,77,61,.1), transparent 60%), var(--surface); }
.scan-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.risk-pill{
  font-family:var(--font-mono); font-size:.72rem; padding:4px 11px;
  border:1px solid var(--border); border-radius:999px;
}
.finding{
  background:var(--surface); border:1px solid var(--border); border-left-width:3px;
  border-radius:var(--r-md); padding:14px 18px; margin-bottom:10px;
}
.finding-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.finding-risk{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; }
.finding-head b{ color:var(--white); font-size:.93rem; }
.finding p{ font-size:.86rem; color:var(--grey); line-height:1.6; }
.finding-where{
  margin-top:8px; font-family:var(--font-mono); font-size:.72rem; color:var(--grey-dim);
  background:var(--black); border-radius:8px; padding:8px 11px; word-break:break-all;
}
.scan-note{
  margin-top:18px; padding:14px 18px; font-size:.82rem; color:var(--grey-dim); line-height:1.6;
  background:var(--surface-2); border:1px dashed var(--border); border-radius:var(--r-md);
}
.scan-note b{ color:var(--grey); }