:root {
      --bg: #0b0b10;
      --card: #151622;
      --ink: #e9ecf1;
      --muted: #a8afbf;
      
  }

  body {
      margin: 0;
      background: linear-gradient(180deg, #0a0b0f, #0e1220);
      color: var(--ink);
      font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  }

  .wrap {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 16px;
  }

  h1 {
      font-size: clamp(20px, 4vw, 28px);
      margin: 0
  }

  .panel {
      background: var(--card);
      border-radius: 14px;
      padding: 16px 16px 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .03);
  }

  label {
      display: block;
      font-weight: 600;
      margin: 12px 0 6px
  }

  input[type="text"] {
      width: 100%;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid #2a2f42;
      background: #0f1120;
      color: var(--ink);
      outline: none
  }

  .row {
      display: flex;
      gap: 8px
  }

  .row>* {
      flex: 1
  }

  select {
      width: 100%;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid #2a2f42;
      background: #0f1120;
      color: var(--ink)
  }

  .muted {
      color: var(--muted);
      font-size: 12px;
      margin-top: 6px
  }

  .actions {
      display: flex;
      gap: 10px;
      margin-top: 12px;
      flex-wrap: wrap
  }

  button {
      border: 0;
      border-radius: 12px;
      padding: 10px 14px;
      background: #2c6ef6;
      color: #fff;
      font-weight: 700;
      cursor: pointer
  }

  button.sec {
      background: #2a2f42
  }

  canvas {
      width: 100%;
      height: auto;
      display: block;
      background: #0000;
      border-radius: 12px
  }

  .preview {
      display: grid;
      grid-template-rows: 1fr auto;
      gap: 10px
  }

  .hint {
      font-size: 12px;
      color: var(--muted)
  }

  .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      background: #263251;
      color: #bcd2ff;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .3px
  }

  .footer-note {
      margin-top: 8px;
      color: #94a0b8;
      font-size: 12px
  }

  textarea {
  width: 100%;
  min-height: 72px;       /* roughly 3 lines */
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #2a2f42;
  background: #0f1120;
  color: var(--ink);
  outline: none;
  resize: vertical;       /* let users stretch if they want */
  line-height: 1.25;
}

.trophy-layout {
  display: grid;
  grid-template-columns: 380px minmax(0,1fr); /* narrow left, wide right */
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .trophy-layout { grid-template-columns: 1fr; }
}

.tool-card.trophy, .tool-card.preview {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

.preview canvas, .preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}