/* HookGuard — Loader Studio layout (v51)
   The loader builder used to be one cramped column: the style picker, the
   colour chips, the editor and the responsibility checkbox stacked with no
   breathing room, and the "original script" label duplicated above the editor.
   This sheet gives the tab the same card language as the "Found a bug?" form:
   icon chips in tinted squares, tidy sections, one action row.
*/

.ls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0 14px;
}

.ls-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.ls-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ls-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--accent, var(--accent));
}

.ls-ico .ico { width: 17px; height: 17px; }

.ls-head-txt { min-width: 0; }

.ls-head-txt b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

.ls-head-txt p {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .52);
}

.ls-head .src-tag-pill { margin-left: auto; flex: none; }

/* --- style picker: the "found a bug?" chips, but one per row ------------ */
.loader-preset-reasons {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 0;
}

.loader-preset-reasons .bug-reason {
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 12px;
}

.preset-note { margin: 10px 2px 0; }

/* --- accent + gradient ------------------------------------------------- */
.loader-theme-card { display: grid; gap: 14px; }

.loader-palette-quick { display: flex; flex-wrap: wrap; gap: 8px; }

.loader-theme-card .pal-chip {
  border-radius: 11px;
  padding: 8px 11px 8px 9px;
}

.loader-theme-card .pal-chip span { font-size: 11.5px; }

.loader-custom-colors {
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  align-items: start;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.loader-custom-colors .custom-col-item { margin: 0; min-width: 0; }

.loader-custom-colors .custom-col-item label { font-size: 11.5px; }

.loader-custom-colors .color-picker-input-wrap { padding: 5px 8px 5px 5px; }

.loader-custom-colors .grad-preview-full {
  grid-column: 1 / -1;
  height: 40px;
  border-radius: 10px;
}

/* --- original script --------------------------------------------------- */
.ls-source { margin-bottom: 0; }

.ls-source .code-editor-box { margin-bottom: 0; }

.ls-actions {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.ls-actions .src-safety-row {
  flex: 1 1 420px;
  margin: 0;
  padding: 0;
}

.ls-actions .src-build-btn {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.ls-source .admin-form-error { margin-top: 12px; }

@media (max-width: 1040px) {
  .ls-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .ls-actions { flex-direction: column; }
  .ls-actions .src-build-btn { width: 100%; justify-content: center; }
}