/* ── Error main area ── */
.err-main{flex:1;display:flex;align-items:center;justify-content:center;padding:64px 24px}
.err-card{
  background:#FFFDF9;
  border:1px solid var(--paw-card-bdr);
  border-radius:24px;
  padding:56px 48px 48px;
  max-width:520px;width:100%;
  text-align:center;
  position:relative;overflow:hidden;
}
/* Watermark circles */
/* .err-card::before{content:'';position:absolute;bottom:-44px;right:-44px;width:160px;height:160px;background:var(--paw-cream-dk);border-radius:50%;opacity:.6} */
/* .err-card::after {content:'';position:absolute;top:-32px;left:-32px;width:104px;height:104px;background:var(--paw-cream-dk);border-radius:50%;opacity:.4} */

/* Error code */
.err-code{font-family:'Fraunces',serif;font-size:96px;font-weight:600;line-height:1;letter-spacing:-3px;margin-bottom:8px;position:relative;z-index:1}
/* .err-code.e400{color:var(--paw-forest)} */
.err-code.e400, .err-code.e404, .err-code.e500 {color:var(--paw-gold)}
/* .err-code.e500{color:var(--paw-coral)} */

/* Badge */
.err-badge{display:inline-block;padding:4px 14px;border-radius:20px;font-size:12px;font-weight:500;margin-bottom:20px;position:relative;z-index:1}
.badge-forest{background:rgba(44,95,45,.1);color:var(--paw-forest)}
.badge-gold  {background:rgba(201,151,42,.12);color:var(--paw-gold)}
.badge-coral {background:rgba(212,112,74,.1);color:var(--paw-coral-dk)}

/* Illustration */
.err-illus{margin:20px auto 24px;position:relative;z-index:1;width:180px;height:180px}

/* Text */
.err-title{font-family:'Fraunces',serif;font-size:24px;font-weight:600;margin-bottom:10px;position:relative;z-index:1;color:var(--paw-ink)}
.err-sub{font-size:14px;font-weight:300;color:var(--paw-bark-lt);line-height:1.65;margin-bottom:8px;position:relative;z-index:1}
.err-tagline{font-family:'Fraunces',serif;font-style:italic;font-size:13px;color:var(--paw-bark-xlt);margin-bottom:32px;position:relative;z-index:1}

/* ══════════════════════════════
   CSS PET ILLUSTRATIONS
   ══════════════════════════════ */

/* --- 400: confused dog tilting head --- */
.dog{position:relative;width:180px;height:180px}
.dog .body{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:90px;height:70px;background:#D4956A;border-radius:45px 45px 35px 35px}
.dog .hw{position:absolute;bottom:76px;left:50%;transform-origin:bottom center;animation:tilt 2.8s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:translateX(-50%) rotate(-18deg)}50%{transform:translateX(-50%) rotate(18deg)}}
.dog .head{width:72px;height:66px;background:#D4956A;border-radius:50%;position:relative}
.dog .ear{position:absolute;width:26px;height:38px;background:#B8724A;border-radius:50%;top:-10px}
.dog .ear.l{left:-8px;transform:rotate(-15deg)} .dog .ear.r{right:-8px;transform:rotate(15deg)}
.dog .eye{position:absolute;width:12px;height:12px;background:#2C2C2A;border-radius:50%;top:22px}
.dog .eye.l{left:12px} .dog .eye.r{right:12px}
.dog .eye::after{content:'';position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;top:2px;left:2px}
.dog .nose{position:absolute;width:18px;height:13px;background:#2C2C2A;border-radius:50% 50% 40% 40%;bottom:16px;left:50%;transform:translateX(-50%)}
.dog .tail{position:absolute;bottom:28px;right:22px;width:14px;height:44px;background:#B8724A;border-radius:7px;transform-origin:bottom center;animation:wag .6s ease-in-out infinite alternate}
@keyframes wag{from{transform:rotate(10deg)}to{transform:rotate(40deg)}}
.dog .paw{position:absolute;bottom:10px;width:22px;height:16px;background:#D4956A;border-radius:11px 11px 8px 8px}
.dog .paw.l{left:38px} .dog .paw.r{right:38px; z-index: 2;}
.dog .qs{position:absolute;font-family:'Fraunces',serif;font-weight:600;color:var(--paw-forest);animation:fq 2.8s ease-in-out infinite}
.dog .q1{font-size:28px;top:0;right:10px;animation-delay:0s}
.dog .q2{font-size:20px;top:20px;right:0;animation-delay:.4s;opacity:.6}
.dog .q3{font-size:16px;top:36px;right:18px;animation-delay:.8s;opacity:.4}
@keyframes fq{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* --- 404: searching cat --- */
.cat404{position:relative;width:180px;height:180px}
.cat404 .body{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:80px;height:72px;background:#8C8C8A;border-radius:40px 40px 30px 30px}
.cat404 .tail{position:absolute;bottom:14px;right:14px;width:50px;height:16px;border:10px solid #6E6E6C;border-radius:0 0 30px 0;border-top:none;border-left:none}
.cat404 .tail-tip{position:absolute;bottom:14px;right:14px;width:18px;height:18px;background:#6E6E6C;border-radius:50%}
.cat404 .hw{position:absolute;bottom:76px;left:50%;transform-origin:bottom center;animation:look 3.5s ease-in-out infinite}
@keyframes look{0%{transform:translateX(-50%) rotate(0)}20%{transform:translateX(-50%) rotate(-25deg)}45%{transform:translateX(-50%) rotate(0)}65%{transform:translateX(-50%) rotate(25deg)}85%,100%{transform:translateX(-50%) rotate(0)}}
.cat404 .head{width:68px;height:62px;background:#8C8C8A;border-radius:50% 50% 48% 48%;position:relative}
.cat404 .ear{position:absolute;top:-14px;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:22px solid #8C8C8A}
.cat404 .ear.l{left:4px;transform:rotate(-8deg)} .cat404 .ear.r{right:4px;transform:rotate(8deg)}
.cat404 .ear::after{content:'';position:absolute;top:4px;left:-7px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:13px solid #E8ADAD}
.cat404 .eye{position:absolute;top:18px;width:15px;height:15px;background:#C4A53A;border-radius:50%}
.cat404 .eye.l{left:10px} .cat404 .eye.r{right:10px}
.cat404 .eye::before{content:'';position:absolute;width:5px;height:12px;background:#1A1A1A;border-radius:3px;top:1.5px;left:5px}
.cat404 .eye::after{content:'';position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;top:2px;left:2px;z-index:1}
.cat404 .nose{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);width:10px;height:8px;background:#E8ADAD;border-radius:50%}
.cat404 .wh{position:absolute;height:1.5px;background:#555;border-radius:1px;opacity:.5}
.cat404 .w1{width:28px;bottom:22px;left:-24px;transform:rotate(-8deg)}
.cat404 .w2{width:28px;bottom:16px;left:-24px;transform:rotate(4deg)}
.cat404 .w3{width:28px;bottom:22px;right:-24px;transform:rotate(8deg)}
.cat404 .w4{width:28px;bottom:16px;right:-24px;transform:rotate(-4deg)}
.cat404 .mag{position:absolute;top:10px;right:8px;animation:magb 3.5s ease-in-out infinite}
@keyframes magb{0%{transform:rotate(0)}20%{transform:rotate(-30deg) translateY(2px)}45%{transform:rotate(0)}65%{transform:rotate(30deg) translateY(2px)}85%,100%{transform:rotate(0)}}
.cat404 .mag-c{width:34px;height:34px;border:4px solid var(--paw-gold);border-radius:50%}
.cat404 .mag-h{width:4px;height:18px;background:var(--paw-gold);border-radius:2px;margin-left:24px;margin-top:-2px;transform:rotate(45deg);transform-origin:top center}
.cat404 .paw{position:absolute;bottom:8px;width:20px;height:14px;background:#8C8C8A;border-radius:10px 10px 7px 7px}
.cat404 .paw.l{left:40px} .cat404 .paw.r{right:40px; z-index: 2;}

/* --- 500: broken sleeping cat --- */
.cat500{position:relative;width:180px;height:180px}
.cat500 .body{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:100px;height:56px;background:#C8A882;border-radius:50%}
.cat500 .head{position:absolute;bottom:54px;left:30px;width:58px;height:52px;background:#C8A882;border-radius:50% 50% 46% 46%;animation:droop 3s ease-in-out infinite;transform-origin:bottom right}
@keyframes droop{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(-22deg)}}
.cat500 .ear{position:absolute;top:-12px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:18px solid #C8A882}
.cat500 .ear.l{left:2px;transform:rotate(-12deg)} .cat500 .ear.r{right:4px;transform:rotate(8deg)}
.cat500 .eye{position:absolute;width:12px;height:12px;top:18px}
.cat500 .eye.l{left:6px} .cat500 .eye.r{right:8px}
.cat500 .eye::before,.cat500 .eye::after{content:'';position:absolute;width:12px;height:2px;background:#7A5C3A;border-radius:1px;top:5px;left:0}
.cat500 .eye::before{transform:rotate(45deg)} .cat500 .eye::after{transform:rotate(-45deg)}
.cat500 .nose{position:absolute;width:9px;height:7px;background:#E8ADAD;border-radius:50%;bottom:14px;left:50%;transform:translateX(-50%)}
.cat500 .tail{position:absolute;bottom:12px;right:8px;width:48px;height:28px;border:9px solid #A8845C;border-radius:0 0 28px 0;border-top:none;border-left:none}
.cat500 .zz{position:absolute;font-family:'Fraunces',serif;font-weight:600;color:var(--paw-coral)}
.cat500 .z1{font-size:30px;top:4px;right:16px;animation:fz 2.2s ease-in-out infinite}
.cat500 .z2{font-size:22px;top:24px;right:6px;animation:fz 2.2s ease-in-out infinite .3s;opacity:.7}
.cat500 .z3{font-size:15px;top:40px;right:18px;animation:fz 2.2s ease-in-out infinite .6s;opacity:.4}
@keyframes fz{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(5deg)}}
.cat500 .warn{position:absolute;top:8px;left:12px}
.cat500 .warn .tri{width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:32px solid var(--paw-coral);position:relative}
.cat500 .warn .tri::after{content:'!';position:absolute;top:8px;left:-5px;color:#fff;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700}