:root {
  --tool-ui-accent: #6969E6;
  --tool-ui-accent-strong: #1d4ed8;
  --tool-ui-accent-soft: #f3f7ff;
  --tool-ui-accent-tint: #eef0ff;
  --tool-ui-border: #e5e7eb;
  --tool-ui-muted: #6b7280;
}

body {
  background: #ffffff;
}

main input[type="checkbox"],
main input[type="radio"],
main input[type="range"] {
  accent-color: var(--tool-ui-accent);
}

main [class*="-total-progress-bar"] {
  background: var(--tool-ui-accent);
}

.tool-ui-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: stretch;
}

.tool-ui-workspace {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-height: 100%;
}

.tool-ui-settings {
  min-height: 100%;
}

.tool-ui-stage-card {
  min-height: 0;
}

.tool-ui-generated-stage {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  padding: 18px;
}

.tool-ui-stage-list {
  flex: 1;
  margin-top: 0;
  align-content: start;
  overflow: auto;
}

.tool-ui-drop-zone {
  border: 1px dashed #d1d5db;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.tool-ui-drop-zone:hover,
.tool-ui-drop-zone[class*="-is-over"] {
  border-color: var(--tool-ui-accent);
  background: var(--tool-ui-accent-soft);
}

.tool-ui-drop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.tool-ui-drop-content [class*="-drop-title"] {
  margin-bottom: 0;
}

.tool-ui-drop-content [class*="-drop-hint"] {
  margin: 0;
}

.tool-ui-drop-icon,
.tool-ui-empty-icon,
.tool-ui-placeholder-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.tool-ui-drop-icon svg {
  width: 90px;
  height: 90px;
}

.tool-ui-empty-icon svg,
.tool-ui-placeholder-icon svg {
  width: 100px;
  height: 100px;
}

.tool-ui-drop-zone[class*="-compact"] .tool-ui-drop-icon {
  display: none;
}

.tool-ui-drop-zone[class*="-compact"] .tool-ui-drop-content {
  gap: 4px;
}

.tool-ui-empty {
  width: 100%;
  min-height: 280px;
  color: var(--tool-ui-muted);
  background: #F9FAFC;
  /* border: 1px solid var(--tool-ui-border); */
  border-radius: 8px;
  text-align: center;
  line-height: 1.5;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tool-ui-placeholder {
  max-width: 360px;
  margin: 0 auto;
  color: var(--tool-ui-muted);
  text-align: center;
  line-height: 1.5;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tool-ui-generated-stage .tool-ui-empty {
  min-height: 100%;
}

.tool-ui-force-hidden {
  display: none !important;
}

main button[class*="-btn"]:not([class*="-mode-btn"]):not([class*="-percent-btn"]):not([class*="-remove-btn"]):not([class*="-card-tool"]),
main a[class*="-download-link"] {
  border-color: var(--tool-ui-border);
  background: #ffffff;
  color: #171717;
}

main button[class*="-btn"]:not([class*="-mode-btn"]):not([class*="-percent-btn"]):not([class*="-remove-btn"]):not([class*="-card-tool"]):hover:not(:disabled),
main a[class*="-download-link"]:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

main button[class*="-btn"][class*="-primary"] {
  border-color: var(--tool-ui-accent);
  background: var(--tool-ui-accent);
  color: #ffffff;
}

main button[class*="-btn"][class*="-primary"]:hover:not(:disabled) {
  border-color: var(--tool-ui-accent-strong);
  background: var(--tool-ui-accent-strong);
}

main button[class*="-btn"][class*="-zip"] {
  border-color: var(--tool-ui-border);
  background: #ffffff;
  color: #171717;
  font-weight: 400;
}

main button[class*="-btn"][class*="-active"],
main button[class*="-mode-btn"][class*="-active"],
main button[class*="-percent-btn"][class*="-active"] {
  border-color: var(--tool-ui-accent);
  background: var(--tool-ui-accent-tint);
  color: #4f46e5;
  box-shadow: none;
}

.tool-ui-settings [class*="-field"] input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.tool-ui-settings [class*="-field"] select,
.tool-ui-settings [class*="-field"] textarea {
  width: 100%;
  font-family: inherit;
}



.btn-primary{
  background: var(--tool-ui-accent) !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  body {
    padding: 20px !important;
  }

  .tool-ui-page {
    width: 100% !important;
    margin: 0 auto !important;
  }

  .tool-ui-toolbar {
    display: block;
  }

  .tool-ui-settings {
    margin-top: 12px;
  }

  .tool-ui-generated-stage {
    min-height: 420px;
  }

  .tool-ui-stage-list {
    grid-template-columns: 1fr !important;
  }
}