:root{
  --bg:#0b0d10;
  --card:#12161b;
  --text:#eef2f7;
  --muted:#b6c0cc;
  --line:#233041;
  --accent:#7c5cff;
  --ok:#3ddc97;
  --warn:#ffd166;
  --danger:#ff5c7a;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(61,220,151,.18), transparent 55%),
    var(--bg);
  min-height:100vh;
}

.wrap{max-width:1100px;margin:0 auto;padding:36px 24px 80px;position:relative;z-index:1;}
.wrap > .card + .card{ margin-top: 28px; }

.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:12px;flex-wrap:wrap;}
.badge{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(12,14,18,.6);}
.dot{width:10px;height:10px;border-radius:50%;background:#77ffd7;box-shadow:0 0 12px rgba(119,255,215,.6);} 
.title{font-weight:700;}

.btn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(12,14,18,.6);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.btn:hover{border-color:var(--accent);}
.btn.primary{border-color:var(--accent); background:rgba(124,92,255,.12);} 

.card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);}
.card-header{padding:18px 20px;border-bottom:1px solid var(--line);} 
.card-title{font-weight:700;font-size:18px;}
.card-body{padding:18px 20px;}
.muted{color:var(--muted);} 

.pet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.pet-card{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(12,14,18,.6);} 
.pet-photo{width:64px;height:64px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);} 
.pet-photo img{max-width:100%;max-height:100%;object-fit:cover;} 
.pet-meta{display:flex;flex-direction:column;gap:4px;} 

.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.product-card{border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(12,14,18,.6);display:flex;flex-direction:column;gap:10px;}
.product-title{font-weight:700;}
.product-desc{color:var(--muted);font-size:13px;}
.product-row{display:flex;gap:8px;align-items:center;} 
.product-row label{font-size:12px;color:var(--muted);} 
.select, input[type="number"]{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0d1117;
  color:var(--text);
}

.rot-0{transform:rotate(0deg);}
.rot-90{transform:rotate(90deg);}
.rot-180{transform:rotate(180deg);}
.rot-270{transform:rotate(270deg);}

.cart-list{display:flex;flex-direction:column;gap:12px;}
.cart-item{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(12,14,18,.6);}
.cart-meta{display:flex;flex-direction:column;gap:4px;}
.cart-title{font-weight:700;}
.cart-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.cart-line-total{font-weight:700;}
.cart-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap;}
.cart-total{font-weight:700;}

.btn.disabled,
.btn[aria-disabled="true"]{
  opacity:.5;
  pointer-events:none;
}

.checkout-row{display:flex;flex-direction:column;gap:8px;max-width:280px;margin-bottom:12px;}
.checkout-actions{margin-top:12px;}
.error{color:#ff8f8f;margin-top:8px;min-height:18px;}

.toast{position:fixed;right:24px;bottom:24px;background:#111520;border:1px solid var(--line);color:#fff;padding:12px 16px;border-radius:12px;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s;z-index:999;}
.toast.show{opacity:1;transform:translateY(0);} 

@media (max-width: 700px){
  .topbar{flex-direction:column;align-items:flex-start;}
}