* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f5f5f5; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .card { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); max-width: 480px; width: 100%; padding: 36px 28px; text-align: center; } h3 { font-size: 20px; color: #222; margin-bottom: 6px; font-weight: 700; } .subtitle { font-size: 13px; color: #999; margin-bottom: 24px; line-height: 1.6; } .section { margin-bottom: 20px; text-align: left; } .section-title { font-size: 12px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; font-weight: 600; } .row { display: flex; align-items: center; background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 10px 14px; gap: 10px; } .row .value { flex: 1; font-size: 13px; color: #333; word-break: break-all; font-family: "Courier New", monospace; line-height: 1.5; } .copy-btn { flex-shrink: 0; padding: 6px 12px; background: #fff; border: 1px solid #ddd; border-radius: 6px; font-size: 12px; color: #666; cursor: pointer; transition: all 0.15s; font-weight: 500; } .copy-btn:hover { background: #f0f0f0; border-color: #ccc; } .copy-btn:active, .copy-btn.copied { background: #333; color: #fff; border-color: #333; } .qr-section { margin: 24px 0; padding: 24px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .qr-section p { font-size: 13px; color: #666; margin-bottom: 14px; line-height: 1.6; } .qr-img { width: 180px; height: 180px; border-radius: 8px; border: 1px solid #eee; margin: 0 auto; display: block; } .bot-name { margin-top: 10px; font-size: 14px; color: #333; font-weight: 600; } .steps { text-align: left; margin-top: 16px; margin-bottom: 20px; } .step { display: flex; align-items: flex-start; margin-bottom: 8px; font-size: 13px; color: #777; line-height: 1.6; } .step-num { flex-shrink: 0; width: 20px; height: 20px; background: #333; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-right: 10px; margin-top: 2px; } .btn { display: inline-block; width: 100%; padding: 13px 24px; background: #333; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .btn:hover { opacity: 0.85; } .btn:active { opacity: 0.7; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .result-box { margin-top: 20px; text-align: left; display: none; } .result-box.show { display: block; animation: fadeIn 0.25s ease; } .result-box h4 { font-size: 13px; color: #333; margin-bottom: 12px; font-weight: 600; } .result-row { display: flex; align-items: center; background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; gap: 10px; } .result-row .label { font-size: 12px; color: #999; white-space: nowrap; font-weight: 500; } .result-row .value { flex: 1; font-size: 13px; color: #333; word-break: break-all; font-family: "Courier New", monospace; } .status-ok { color: #22c55e; font-weight: 600; font-size: 14px; } .status-err { color: #ef4444; font-size: 13px; line-height: 1.6; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }