/* QR Code Generator — Tool-specific styles */

.page { padding: 40px 20px; max-width: 900px; margin: 0 auto; }
.page h1 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.page .subtitle { color: #888; margin-bottom: 20px; font-size: 14px; }

.qr-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  align-items: start;
}

/* Input card */
.qr-input-card { padding: 24px; }

label {
  display: block; font-size: 13px; font-weight: 600; color: #aaa;
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;
}

.type-tabs {
  display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap;
}
.type-tab {
  padding: 8px 14px; font-size: 13px; font-weight: 500;
  background: #1a1a1a; border: 1px solid #333; border-radius: 6px;
  color: #888; cursor: pointer; transition: all 0.2s;
}
.type-tab:hover { color: #ccc; border-color: #555; }
.type-tab.active { background: #cc0000; border-color: #cc0000; color: #fff; }

.type-input input[type="text"],
.type-input input[type="email"],
.type-input input[type="tel"],
.type-input textarea {
  width: 100%; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 8px;
  color: #e1e1e1; font-size: 14px; padding: 12px 14px; outline: none;
  transition: border-color 0.2s; margin-bottom: 8px;
}
.type-input input:focus,
.type-input textarea:focus { border-color: #ff4444; }
.type-input input::placeholder,
.type-input textarea::placeholder { color: #444; }
.type-input textarea {
  height: 100px; resize: vertical;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.type-input select {
  width: 100%; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 8px;
  color: #e1e1e1; font-size: 14px; padding: 10px 12px; outline: none;
  cursor: pointer; margin-bottom: 8px;
}
.type-input select option { background: #141414; }

/* Options */
.options-section { margin-top: 16px; }
.option-row {
  display: flex; gap: 16px; margin-bottom: 12px;
}
.option-row > div { flex: 1; }
.option-row select {
  width: 100%; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 8px;
  color: #e1e1e1; font-size: 13px; padding: 8px 10px; outline: none; cursor: pointer;
}
.option-row select option { background: #141414; }

.color-input {
  display: flex; align-items: center; gap: 10px;
}
.color-input input[type="color"] {
  width: 36px; height: 36px; border: 1px solid #333; border-radius: 6px;
  background: none; cursor: pointer; padding: 2px;
}
.color-input span {
  font-size: 13px; color: #888;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

/* Preview card */
.qr-preview-card {
  background: #141414; border: 1px solid #262626;
  border-radius: 12px; padding: 24px; text-align: center;
  position: sticky; top: 20px;
}

.qr-placeholder {
  padding: 60px 20px; color: #444; font-size: 14px;
}

.qr-canvas-wrap {
  display: flex; justify-content: center; padding: 20px;
  background: #fff; border-radius: 8px; margin-bottom: 16px;
}
.qr-canvas-wrap canvas {
  display: block; image-rendering: pixelated;
}

.qr-info {
  font-size: 12px; color: #666; margin-bottom: 12px;
}

.download-row {
  display: flex; gap: 10px; justify-content: center;
}
.download-row .btn {
  padding: 10px 24px; font-size: 14px;
}

@media (max-width: 700px) {
  .qr-layout { grid-template-columns: 1fr; }
  .qr-preview-card { position: static; }
  .type-tabs { gap: 6px; }
  .type-tab { padding: 6px 10px; font-size: 12px; }
  .option-row { flex-direction: column; gap: 10px; }
}