Styling refactor

web/app/adopt/[id]/page.js

@@ -15,7 +15,6 @@ export default function PetDetailPage() {
 
   useEffect(() => {
     if (!id) return;
-
     fetch(`${API_BASE}/api/v1/pets/${id}`)
       .then((res) => {
         if (!res.ok) throw new Error(`HTTP ${res.status} – ${res.statusText}`);
@@ -27,12 +26,12 @@ export default function PetDetailPage() {
   }, [id]);
 
   return (
-    <main className="pet-detail-page">
-      <div className="pet-detail-container">
-        <Link href="/adopt" className="pet-detail-back">← Back to Pets</Link>
+    <main className="min-h-screen py-12 px-8 pb-20">
+      <div className="max-w-[860px] mx-auto">
+        <Link href="/adopt" className="inline-block mb-8 text-[#e68672] no-underline text-base font-semibold transition-colors hover:text-[#d4705e]">← Back to Pets</Link>
 
-        {loading && <p className="adopt-status-msg">Loading pet details...</p>}
-        {error && <p className="adopt-status-msg adopt-error">{error}</p>}
+        {loading && <p className="text-center text-[#666] text-[1.1rem] py-12">Loading pet details...</p>}
+        {error && <p className="text-center text-[#c0392b] text-[1.1rem] py-12">{error}</p>}
 
         {!loading && !error && pet && (
           <PetProfile