.domain-verification { max-width: 600px; margin: 0 auto; padding: 24px; background: #ffffff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .domain-verification h3 { margin: 0 0 8px 0; color: #1a1a1a; font-size: 24px; font-weight: 600; } .domain-verification .description { margin: 0 0 24px 0; color: #666; font-size: 14px; } /* Error message */ .error-message { padding: 12px; margin-bottom: 16px; background: #fee; border: 1px solid #fcc; border-radius: 6px; color: #c33; } /* Input section */ .input-section { display: flex; flex-direction: column; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group label { font-weight: 500; color: #333; font-size: 14px; } .domain-input, .wallet-input { padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; transition: border-color 0.2s; } .domain-input:focus, .wallet-input:focus { outline: none; border-color: #4f46e5; } .domain-input:disabled, .wallet-input:disabled { background: #f5f5f5; cursor: not-allowed; } .help-text { font-size: 12px; color: #666; margin-top: -4px; } /* Buttons */ .primary-button, .secondary-button { padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .primary-button { background: #4f46e5; color: white; } .primary-button:hover:not(:disabled) { background: #4338ca; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); } .primary-button:disabled { background: #9ca3af; cursor: not-allowed; transform: none; } .secondary-button { background: #f3f4f6; color: #374151; } .secondary-button:hover:not(:disabled) { background: #e5e7eb; } .cancel-button { margin-top: 12px; } /* Instructions section */ .instructions-section { display: flex; flex-direction: column; gap: 20px; } .instructions-section h4 { margin: 0; color: #1a1a1a; font-size: 18px; } /* DNS record display */ .dns-record { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .record-field { display: flex; flex-direction: column; gap: 4px; } .record-field strong { font-size: 12px; text-transform: uppercase; color: #6b7280; letter-spacing: 0.5px; } .record-field span { font-size: 14px; color: #1f2937; } .value-container { display: flex; gap: 8px; align-items: center; } .value-container code { flex: 1; padding: 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; font-size: 13px; word-break: break-all; font-family: 'Courier New', monospace; } .copy-button { padding: 8px 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; font-size: 12px; cursor: pointer; white-space: nowrap; transition: all 0.2s; } .copy-button:hover { background: #f3f4f6; border-color: #d1d5db; } /* Help section */ .help-section { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 16px; } .help-section p { margin: 0 0 8px 0; color: #1e40af; font-size: 14px; } .help-section ol { margin: 8px 0; padding-left: 24px; color: #1e3a8a; } .help-section li { margin: 4px 0; font-size: 14px; } .expires-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid #bfdbfe; font-size: 13px; color: #1e40af; } /* Status message */ .status-message { padding: 12px; border-radius: 6px; font-size: 14px; font-weight: 500; } .status-message.success { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; } .status-message.error { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; } /* Blockchain verification */ .blockchain-verification { display: flex; flex-direction: column; gap: 16px; } .blockchain-verification p { margin: 0; color: #374151; } /* Verified container */ .verified-container { text-align: center; } .verified-container h3 { color: #059669; font-size: 28px; } .verified-domain-display { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 20px 0; padding: 16px; background: #d1fae5; border-radius: 8px; } .verified-domain-display strong { font-size: 20px; color: #065f46; } .verification-type { padding: 4px 8px; background: #059669; color: white; border-radius: 4px; font-size: 12px; text-transform: uppercase; } .verified-date { color: #6b7280; font-size: 14px; margin-bottom: 20px; } /* Responsive */ @media (max-width: 640px) { .domain-verification { padding: 16px; } .value-container { flex-direction: column; align-items: stretch; } .copy-button { width: 100%; } }