.qr-input-area {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .tab-bar {
      display: flex;
      gap: 4px;
      background: var(--color-bg);
      padding: 4px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border);
    }
    .tab-btn {
      flex: 1;
      padding: 10px 16px;
      border: none;
      background: transparent;
      border-radius: 6px;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--color-text-secondary);
      transition: all var(--transition-fast);
      white-space: nowrap;
    }
    .tab-btn:hover {
      color: var(--color-text);
      background: var(--color-surface-hover);
    }
    .tab-btn.active {
      background: var(--color-surface);
      color: var(--color-primary);
      box-shadow: var(--shadow-sm);
      font-weight: 600;
    }
    .tab-content { display: none; }
    .tab-content.active { display: block; }
    .qr-text-input {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-size: 1rem;
      color: var(--color-text);
      background: var(--color-surface);
      outline: none;
      transition: border-color var(--transition-fast);
      resize: vertical;
    }
    .qr-text-input:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px var(--color-primary-light);
    }
    .qr-text-input::placeholder {
      color: var(--color-text-muted);
    }
    .wifi-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .wifi-fields .field-full { grid-column: 1 / -1; }
    .field-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .field-group label {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--color-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .qr-output {
      display: flex;
      gap: 32px;
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid var(--color-border-light);
      align-items: flex-start;
    }
    .qr-preview-wrapper {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .qr-preview {
      width: 220px;
      height: 220px;
      background: white;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }
    .qr-preview canvas, .qr-preview svg {
      max-width: 100%;
      max-height: 100%;
    }
    .qr-placeholder {
      text-align: center;
      color: var(--color-text-muted);
      font-size: 0.85rem;
    }
    .qr-placeholder .icon { font-size: 2rem; margin-bottom: 8px; }
    .qr-options {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .color-row {
      display: flex;
      gap: 16px;
    }
    .color-field {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
    }
    .color-field input[type="color"] {
      width: 40px;
      height: 40px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      padding: 2px;
      background: var(--color-surface);
    }
    .download-row {
      display: flex;
      gap: 10px;
      margin-top: 8px;
    }
    .tab-bar { flex-wrap: wrap; }
    .logo-upload-area {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .logo-drop-zone {
      border: 2px dashed var(--color-border);
      border-radius: var(--radius-sm);
      padding: 16px;
      text-align: center;
      cursor: pointer;
      transition: border-color var(--transition-fast), background var(--transition-fast);
      font-size: 0.85rem;
      color: var(--color-text-secondary);
    }
    .logo-drop-zone:hover, .logo-drop-zone.drag-over {
      border-color: var(--color-primary);
      background: var(--color-primary-light);
    }
    .logo-drop-zone input[type="file"] { display: none; }
    .logo-preview-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .logo-thumb {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border);
      object-fit: contain;
      background: white;
    }
    .logo-info { flex: 1; font-size: 0.85rem; color: var(--color-text-secondary); }
    .logo-remove {
      background: none;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      padding: 6px 12px;
      cursor: pointer;
      font-size: 0.8rem;
      color: var(--color-text-secondary);
      transition: all var(--transition-fast);
    }
    .logo-remove:hover { border-color: #e74c3c; color: #e74c3c; }
    .logo-notice {
      font-size: 0.78rem;
      color: var(--color-primary);
      background: var(--color-primary-light);
      padding: 8px 12px;
      border-radius: var(--radius-sm);
    }
    @media (max-width: 768px) {
      .qr-output { flex-direction: column; align-items: center; }
      .qr-options { width: 100%; }
      .wifi-fields { grid-template-columns: 1fr; }
      .download-row { flex-direction: column; }
      .download-row .btn { width: 100%; }
    }