:root{--gold:#e6c36a;--panel:#152238;--line:#2a3a50;--txt:#e0e0e0;--muted:#a9b1bc;--bg:#0b1320}
*{box-sizing:border-box} body{margin:0;min-height:100vh;font-family:'Inter',sans-serif;color:var(--txt);background:var(--bg) url('../textura.png') repeat;background-size:1024px 1024px}
header{position:sticky;top:0;z-index:100;height:70px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 40px;background:linear-gradient(rgba(10,20,35,.95),rgba(5,10,20,.98)),url('../textura.png');border-bottom:2px solid var(--gold);box-shadow:0 5px 20px rgba(0,0,0,.5)}
.logo img{height:50px}
header[data-shared-header="true"] nav{justify-self:center;display:flex;flex-wrap:wrap}
header[data-shared-header="true"] nav>a{padding:10px 16px;font-size:13px;font-weight:700;color:#bbb;text-decoration:none;text-transform:uppercase}
header[data-shared-header="true"] nav>a:hover,header[data-shared-header="true"] nav>a.is-active{color:var(--gold)}
.search-box{display:flex;align-items:center}
.search-box input{padding:8px 12px;border:1px solid #334;border-radius:4px 0 0 4px;background:rgba(255,255,255,.1);color:#fff;outline:none}
.search-box button{border:1px solid #334;border-left:0;border-radius:0 4px 4px 0;background:#334;color:var(--gold);padding:8px 12px}
.page-shell{width:min(1240px,calc(100% - 32px));margin:0 auto;padding:34px 0 60px}
.breadcrumbs{display:flex;gap:10px;align-items:center;margin-bottom:20px;font-size:13px;color:var(--muted)} .breadcrumbs a{color:#f5deb0;text-decoration:none}
.section-hero{margin-bottom:20px;padding:28px;border:1px solid rgba(230,195,106,.22);border-radius:8px;background:linear-gradient(135deg,rgba(17,25,37,.98),rgba(14,18,27,.9))}
.eyebrow{margin:0 0 10px;color:var(--gold);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700}
.section-hero h1{margin:0;font-family:'Cinzel',serif;font-size:clamp(2.1rem,3vw,3.6rem)}
.hero-copy{margin:14px 0 0;max-width:900px;color:var(--muted);line-height:1.7}
.source-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.source-strip span{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;border:1px solid rgba(230,195,106,.24);border-radius:6px;background:rgba(8,14,24,.68);color:#f1dfb4;font-size:13px;font-weight:800}
.toolbar{margin-bottom:18px;padding:14px;border:1px solid rgba(227,194,116,.18);border-radius:8px;background:rgba(21,34,56,.92);display:flex;flex-wrap:wrap;gap:14px 20px;align-items:end}
.toolbar label{display:grid;gap:6px;color:#d9e0ec;font-size:13px}.toolbar label span{color:#f5deb0;font-weight:700}
.toolbar select,.toolbar input{min-height:36px;border:1px solid rgba(230,195,106,.24);border-radius:6px;background:#101d2f;color:#fff;font:inherit;padding:0 10px}.toolbar .search{min-width:320px;flex:1}
.pets-list{display:grid;grid-template-columns:1fr;gap:12px}
.pet-card{border:1px solid var(--line);border-radius:8px;background:rgba(15,25,40,.95);overflow:hidden}
.pet-card-featured{background:linear-gradient(180deg,rgba(7,14,24,.98),rgba(10,24,40,.98));border-color:rgba(230,195,106,.32);box-shadow:0 10px 30px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.03)}
.pet-head{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;background:rgba(8,12,20,.78)}
.pet-featured-head{align-items:flex-start;background:linear-gradient(90deg,rgba(6,12,21,.96),rgba(10,25,42,.92));border-bottom:1px solid rgba(230,195,106,.18)}
.pet-head h2{margin:0;font-family:'Cinzel',serif;font-size:1.05rem;color:#fff4cd}
.pet-featured-head h2{display:flex;align-items:center;gap:9px;margin:0 0 8px;text-transform:uppercase}
.pet-featured-head h2>i:first-child{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(230,195,106,.4);background:rgba(230,195,106,.12);color:#e6c36a;font-size:12px;flex:0 0 auto}
.pet-featured-head .title-star{color:#e6c36a;font-size:14px}
.pet-meta-row{display:flex;flex-wrap:wrap;gap:7px}.pet-meta-row span{padding:4px 9px;border:1px solid rgba(65,144,198,.24);border-radius:999px;background:rgba(12,43,67,.68);color:#b9d5ed;font-size:11px;font-weight:700}.pet-meta-row strong{color:#67c7f2}
.badge{padding:5px 8px;border:1px solid rgba(230,195,106,.24);border-radius:6px;background:#11243d;color:#f5deb0;font-size:12px;font-weight:800}
.pet-main{display:grid;grid-template-columns:minmax(142px,220px) minmax(280px,1fr) minmax(190px,260px);align-items:start;gap:8px;padding:8px;min-height:180px}
.pet-left,.pet-center,.pet-side{display:grid;gap:8px;align-content:start}
.pet-icon{display:grid;place-items:center;background:radial-gradient(circle at 50% 52%,rgba(230,195,106,.12),transparent 48%),rgba(7,18,31,.72);border:1px solid rgba(65,144,198,.18);border-radius:7px;padding:18px;min-height:190px}
.pet-icon img{width:180px;height:180px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.pet-icon img.is-lowres{
  width:180px;
  height:180px;
  image-rendering:auto;
}
.pet-icon-fallback{width:112px;height:112px;display:grid;place-items:center;border:1px solid rgba(230,195,106,.25);border-radius:8px;color:#f5deb0;background:rgba(8,14,24,.55)}
.pet-content{display:grid;gap:8px}
.pet-section{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:rgba(11,20,34,.7)}
.pet-section h3{margin:0;padding:9px 11px;font-family:'Cinzel',serif;font-size:.92rem;color:#fff2c8;background:rgba(8,20,34,.44);border-bottom:1px solid rgba(65,144,198,.18)}
.pet-section p{margin:0;padding:9px 10px;font-size:14px;line-height:1.45}
.pet-description-panel{min-height:118px}.pet-description-panel p{padding:12px 14px;color:#bfd5ee;font-size:13px;line-height:1.7}
.pet-effects{padding:8px 10px;display:grid;gap:4px}
.pet-effects li{font-size:13px}
.pagination-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.pagination-bar button,.pagination-bar .page-ellipsis{min-height:34px;padding:0 12px;border:1px solid rgba(230,195,106,.24);border-radius:6px;background:#11243d;color:#f5deb0;font-weight:700;font-size:13px}
.pagination-bar button[disabled]{opacity:.5}
footer{margin-top:44px;padding:30px 20px;text-align:center;border-top:2px solid var(--gold);background:linear-gradient(to top,#050a10,#0b1320)} footer p{margin:6px 0;font-size:13px;color:#888}
@media (max-width:900px){.pets-list{grid-template-columns:1fr}}
@media (max-width:980px){.pet-main{grid-template-columns:minmax(132px,180px) 1fr}.pet-side{grid-column:1/-1}}
@media (max-width:760px){.toolbar{display:grid}.toolbar .search{min-width:0}.pet-featured-head{display:grid}.pet-featured-head h2{font-size:1rem}.pet-main{grid-template-columns:1fr;min-height:130px}.pet-side{grid-column:auto}.pet-icon{min-height:128px;padding:12px}.pet-icon img,.pet-icon-fallback{width:140px;height:140px}}
@media (max-width:1080px){header{grid-template-columns:1fr;gap:8px;height:auto;padding:12px 18px}header[data-shared-header="true"] nav{justify-content:flex-start}.search-box{display:none}.page-shell{width:min(1240px,calc(100% - 20px));padding-top:20px}}