:root {
  --icon-bg: #ffffff;
  --icon-card: #fbfdff;
  --icon-border: rgba(15, 23, 42, 0.12);
  --icon-border-strong: #bfd3f3;
  --icon-text: var(--ink);
  --icon-muted: #4f6487;
  --icon-blue: var(--primary);
  --icon-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.icon-tool-page { background: var(--icon-bg); color: var(--icon-text); }
.icon-tool-page .tool-back { color: var(--icon-blue); }

.icon-hero { max-width: 980px; margin: 20px auto 0; text-align: center; }
.icon-hero__title {
  margin: 10px 0 0;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-family: "Syne", "Inter", system-ui, sans-serif;
}
.icon-hero__title span { color: var(--icon-blue); }
.icon-hero__sub { margin: 10px auto 0; max-width: 790px; color: var(--icon-muted); font-size: 1.02rem; }

.icon-panel {
  max-width: 980px;
  margin: 14px auto 0;
  border: 1px solid var(--icon-border);
  border-radius: 20px;
  background: var(--icon-card);
  box-shadow: var(--icon-shadow-soft);
  padding: 16px;
}
.icon-panel h2 {
  margin: 0;
  font-family: "Syne", "Inter", system-ui, sans-serif;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  letter-spacing: -0.02em;
}

.icon-form { margin-top: 12px; display: grid; gap: 12px; }
.icon-upload-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.icon-file-input {
  grid-column: 1 / -1;
  border: 1px solid var(--icon-border-strong);
  border-radius: 11px;
  min-height: 46px;
  padding: 8px 12px;
  background: #fff;
  color: #2a3b5c;
}
.icon-upload-btn {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid #2f6cdf;
  background: linear-gradient(180deg, #3f86f5 0%, #2d69cf 100%);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.icon-hint { margin: 0; color: #57709a; font-size: 0.9rem; }

.icon-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.icon-field { min-width: 230px; display: grid; gap: 6px; color: #536a8f; font-weight: 700; font-size: .78rem; text-transform: uppercase; }
.icon-field input[type="range"] { width: 100%; accent-color: #2f6cdf; }

.icon-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.icon-card { border: 1px solid #d9e4f5; border-radius: 14px; background: #f8fbff; padding: 12px; }
.icon-card h3 { margin: 0; color: #5a7096; font-size: .98rem; text-transform: uppercase; letter-spacing: .04em; }
.icon-canvas-wrap {
  margin-top: 10px;
  border: 1px solid #c5d8f6;
  border-radius: 12px;
  background: #e9f1ff;
  min-height: 300px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.icon-canvas-wrap--checker {
  background-image: linear-gradient(45deg, #d8e6ff 25%, transparent 25%),
    linear-gradient(-45deg, #d8e6ff 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d8e6ff 75%),
    linear-gradient(-45deg, transparent 75%, #d8e6ff 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.icon-canvas-wrap canvas { max-width: 100%; height: auto; image-rendering: pixelated; cursor: grab; }
.icon-note { margin: 10px 0 0; color: #506587; font-size: .84rem; }
.icon-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

.icon-btn {
  min-height: 38px;
  border-radius: 9px;
  border: 1px solid #9ab4de;
  background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%);
  color: #2f527f;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 0 12px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 2px 0 rgba(15, 23, 42, .12);
}
.icon-btn:disabled { opacity: .55; cursor: not-allowed; }
.icon-btn--primary { border-color: #2f6cdf; background: linear-gradient(180deg, #3f86f5 0%, #2d69cf 100%); color: #fff; }
.icon-btn--danger { border-color: #efb8b8; color: #cb3f3f; background: linear-gradient(180deg, #fff 0%, #fff5f5 100%); }

.icon-results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.icon-count { margin: 0; color: #57709a; font-size: .88rem; font-weight: 700; }
.icon-empty { margin: 12px 0 0; color: #6a7f9f; font-size: .92rem; }

.mc-final-cta { max-width: 980px; margin: 16px auto 0; }
.mc-final-cta__banner {
  border-radius: 14px;
  border: 1px solid var(--icon-border);
  background: linear-gradient(135deg, #edf4ff, #f8fbff);
  box-shadow: var(--icon-shadow-soft);
  padding: 26px 20px;
  text-align: center;
}
.mc-final-cta__title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.65rem, 4.2vw, 2.3rem);
  letter-spacing: -0.02em;
  font-family: "Syne", "Inter", system-ui, sans-serif;
  font-weight: 600;
}
.mc-final-cta__sub { margin: 8px 0 0; color: #506587; font-size: 0.95rem; }
.mc-final-cta__btn { margin-top: 16px; border-radius: 10px; min-height: 44px; padding: 10px 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 980px) {
  .icon-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .icon-panel { padding: 12px; }
  .icon-upload-row { grid-template-columns: 1fr; }
  .icon-controls { flex-direction: column; align-items: stretch; }
  .icon-field { min-width: 0; }
  .icon-btn { width: 100%; }
}