* { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%); color: #1f2937; } .container { max-width: 480px; margin: 0 auto; padding: 24px 16px 40px; } .card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); } .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #eff6ff; color: #2563eb; font-size: 12px; margin-bottom: 12px; } h1 { margin: 0 0 8px; font-size: 24px; } .desc { margin: 0 0 20px; color: #6b7280; line-height: 1.6; } .meta { display: grid; gap: 8px; margin-bottom: 20px; font-size: 14px; } .meta div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #f9fafb; border-radius: 10px; } .meta span:last-child { color: #374151; text-align: right; word-break: break-all; } .btn { width: 100%; border: none; border-radius: 12px; padding: 14px 16px; font-size: 16px; font-weight: 600; cursor: pointer; } .btn-primary { background: #2563eb; color: #fff; } .btn-primary:disabled { background: #93c5fd; cursor: not-allowed; } .status { margin-top: 16px; padding: 12px; border-radius: 10px; background: #f8fafc; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; } .status.error { background: #fef2f2; color: #b91c1c; } .status.ok { background: #ecfdf5; color: #047857; } footer { margin-top: 16px; text-align: center; color: #9ca3af; font-size: 12px; }