:root {
  --bg:#050813;
  --bg-2:#07101f;
  --panel:#091428;
  --panel-2:#0d1a31;
  --panel-3:#101f3a;
  --line:rgba(221,177,89,.22);
  --line-strong:rgba(230,194,110,.48);
  --text:#f7edd1;
  --muted:#c5b58c;
  --soft:#9ca5bf;
  --gold:#d7ad59;
  --gold-2:#f0d08b;
  --gold-3:#8b6220;
  --blue:#52a8ff;
  --blue-soft:#90d1ff;
  --purple:#8f5bf5;
  --shadow:0 30px 80px rgba(0,0,0,.45);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:Georgia,"Times New Roman",serif;
  background:
    radial-gradient(circle at 12% 16%, rgba(40,85,170,.22), transparent 20%),
    radial-gradient(circle at 80% 22%, rgba(255,201,97,.08), transparent 18%),
    radial-gradient(circle at 55% 72%, rgba(93,55,173,.10), transparent 24%),
    linear-gradient(180deg, #02060f 0%, #07111f 48%, #050813 100%);
  position:relative;
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}
body::before{
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255,236,179,.65), transparent 55%),
    radial-gradient(1.5px 1.5px at 28% 74%, rgba(175,214,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 26%, rgba(255,225,170,.55), transparent 60%),
    radial-gradient(2px 2px at 83% 64%, rgba(160,210,255,.45), transparent 58%),
    radial-gradient(1px 1px at 72% 35%, rgba(255,255,255,.45), transparent 60%);
  opacity:.8;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.app-shell{min-height:100vh}
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 28px;
  border-bottom:1px solid var(--line-strong);
  background:rgba(2,8,19,.82);
  backdrop-filter:blur(16px);
  box-shadow:0 10px 40px rgba(0,0,0,.22);
}
.brand a{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
  gap:8px;
  color:var(--gold-2);
  font-size:38px;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-shadow:0 0 22px rgba(216,177,87,.12);
}
.brand a::after{
  content:"PETS";
  font-size:14px;
  letter-spacing:.22em;
  transform:translateY(-4px);
  color:var(--gold);
}
.topnav,.topactions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nav-link{
  color:#efe2bb;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid transparent;
  font-size:18px;
  transition:.18s ease;
}
.nav-link:hover,.nav-link.active{
  color:#fff1cb;
  border-color:var(--line);
  background:linear-gradient(180deg, rgba(225,178,87,.16), rgba(225,178,87,.04));
  box-shadow:inset 0 0 0 1px rgba(255,223,149,.08), 0 8px 30px rgba(0,0,0,.18);
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:11px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(18,30,57,.86), rgba(10,17,33,.94));
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(255,223,149,.05);
}
.metric-pill{font-size:16px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:50px;
  padding:12px 18px;
  border-radius:16px;
  border:1px solid rgba(240,208,139,.35);
  background:linear-gradient(180deg, #f1c874 0%, #c99338 100%);
  color:#241300;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 18px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,245,217,.5);
}
.button:hover{filter:brightness(1.04)}
.button-small{min-height:42px;padding:9px 14px;font-size:16px;border-radius:14px}
.button-ghost{
  background:linear-gradient(180deg, rgba(16,28,54,.88), rgba(8,14,26,.92));
  color:var(--text);
  border-color:var(--line);
  box-shadow:inset 0 0 0 1px rgba(245,224,168,.05);
}
.container{max-width:1540px;margin:0 auto;padding:34px 28px 72px}
.flash{padding:16px 18px;border-radius:16px;margin-bottom:18px;border:1px solid var(--line)}
.flash-success{background:rgba(70,142,83,.16);color:#ddffd7}
.flash-error{background:rgba(174,68,68,.16);color:#ffd7d7}
.flash-info{background:rgba(82,168,255,.16);color:#deecff}
.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}
.page-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--gold-2);
  font-size:18px;
  letter-spacing:.04em;
}
.page-kicker-mark{
  width:58px;height:58px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(17,28,55,.88), rgba(10,17,31,.98));
  display:grid;place-items:center;font-size:28px;box-shadow:var(--shadow);
}
.page-title{font-size:64px;line-height:.95;margin:0 0 10px;color:#f6d48b}
.page-sub{margin:0;color:var(--muted);font-size:26px;max-width:760px;line-height:1.35}
.collection-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:28px;align-items:start}
.collection-panel,
.collection-surface,
.lux-card,
.pet-lux-card,
.empty-state{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(8,20,41,.94), rgba(5,11,24,.98));
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(240,208,139,.05);
}
.collection-panel::before,
.collection-surface::before,
.lux-card::before,
.pet-lux-card::before,
.empty-state::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,224,151,.09), transparent 12%, transparent 85%, rgba(255,224,151,.04));
}
.collection-panel{padding:24px}
.collection-panel + .collection-panel{margin-top:18px}
.panel-title{margin:0 0 14px;font-size:34px;color:#f6d48b}
.panel-kicker{margin:0 0 18px;color:var(--muted);font-size:18px}
.collection-totals{display:grid;gap:14px;margin-bottom:16px}
.total-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(228,198,107,.12)}
.total-label{display:flex;align-items:center;gap:10px;color:var(--text);font-size:18px}
.total-value{font-size:22px;color:#fff1c6}
.class-list{display:grid;gap:10px;margin-top:16px}
.class-pill{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:16px;background:rgba(14,25,47,.75);border:1px solid rgba(228,198,107,.08)}
.class-pill-left{display:flex;align-items:center;gap:10px;min-width:0}
.class-dot{width:12px;height:12px;border-radius:999px;box-shadow:0 0 14px currentColor}
.class-dot-common{color:#d9d5cc;background:#d9d5cc}
.class-dot-rare{color:#58a4ff;background:#58a4ff}
.class-dot-super-rare{color:#a068ff;background:#a068ff}
.class-dot-epic{color:#ff7a3d;background:#ff7a3d}
.class-dot-one-of-one{color:#f0d08b;background:#f0d08b}
.class-name{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.class-count{font-size:18px;color:#fff1c6}
.collection-surface{padding:24px}
.toolbar-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.collection-summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:18px}
.summary-highlight{color:#f4d89a}
.toolbar-form{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.search-wrap{position:relative;min-width:320px;flex:1 1 360px;max-width:520px}
.search-wrap input,
.select-wrap select{
  width:100%;
  min-height:54px;
  border-radius:16px;
  border:1px solid rgba(228,198,107,.22);
  background:linear-gradient(180deg, rgba(12,23,45,.95), rgba(6,12,25,.98));
  color:var(--text);
  padding:14px 18px;
  font-size:18px;
  outline:none;
}
.search-wrap input{padding-left:52px}
.search-wrap::before{
  content:"⌕";
  position:absolute;
  left:18px;top:13px;
  color:var(--gold);
  font-size:22px;
}
.select-wrap{min-width:190px}
.pet-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.pet-lux-card{display:flex;flex-direction:column}
.pet-media{
  position:relative;
  aspect-ratio: 9 / 9.6;
  overflow:hidden;
  border-bottom:1px solid rgba(228,198,107,.1);
  background:radial-gradient(circle at 50% 10%, rgba(255,245,201,.08), transparent 30%), linear-gradient(180deg, #0f1c39, #07111f);
}
.pet-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.pet-media::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(2,6,14,.66) 84%, rgba(2,6,14,.92) 100%);
}
.pet-frame{
  position:absolute;inset:10px;pointer-events:none;border-radius:22px;border:1px solid rgba(241,208,138,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)
}
.pet-rarity-badge{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;
  width:min(62%, 228px);
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.4));
}
.pet-rarity-text{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;
  padding:9px 18px;border-radius:999px;border:1px solid rgba(240,208,139,.34);
  background:rgba(8,14,26,.82);backdrop-filter:blur(10px);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#fff2c9;
}
.pet-body{padding:20px 20px 18px;display:flex;flex-direction:column;gap:12px}
.pet-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.pet-title{margin:0;font-size:28px;line-height:1;color:#f7dd9b}
.pet-title small{display:block;margin-top:6px;font-size:17px;color:var(--muted);font-weight:normal}
.pet-meta{display:flex;flex-wrap:wrap;gap:10px 14px;color:var(--muted);font-size:16px}
.pet-meta span::before{content:"•";margin-right:8px;color:rgba(240,208,139,.55)}
.pet-meta span:first-child::before{display:none}
.trait-list{display:grid;gap:8px;padding:0;margin:0;list-style:none}
.trait-item{display:flex;align-items:center;gap:10px;color:#e8dbb8;font-size:16px}
.trait-item::before{content:"✦";color:var(--gold);font-size:15px}
.pet-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.empty-state{padding:48px;text-align:center}
.empty-state h2{margin:0 0 12px;font-size:42px;color:#f6d48b}
.empty-state p{margin:0 auto 22px;max-width:560px;font-size:20px;color:var(--muted);line-height:1.5}
.note-copy{margin-top:14px;color:var(--soft);font-size:16px;line-height:1.5}
.lux-divider{height:1px;background:linear-gradient(90deg, transparent, rgba(240,208,139,.24), transparent);margin:18px 0}
.small-muted{color:var(--soft);font-size:15px}
.helper-card{padding:18px 18px 20px}
.helper-card h3{margin:0 0 10px;font-size:26px;color:#f6d48b}
.helper-card p{margin:0 0 16px;color:var(--muted);font-size:17px;line-height:1.5}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat,.card,.auth-card,.preview-card,.pet-card,.egg-card,.listing-card,.species-card{background:linear-gradient(180deg, rgba(10,19,36,.95), rgba(6,12,25,.98));border:1px solid rgba(228,198,107,.12);border-radius:22px;box-shadow:var(--shadow)}
.stat,.card,.auth-card,.preview-card{padding:20px}
.stat .value{font-size:34px;color:#f6d48b}
.muted{color:var(--muted)}
.table-wrap{overflow:auto}
input,select,textarea{font-family:inherit}
@media (max-width:1360px){
  .pet-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1180px){
  .collection-layout{grid-template-columns:1fr}
  .page-title{font-size:52px}
}
@media (max-width:980px){
  .topbar{flex-direction:column;align-items:flex-start}
  .page-head{flex-direction:column;align-items:flex-start}
  .pet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar-form{width:100%;justify-content:stretch}
  .search-wrap,.select-wrap{max-width:none;min-width:0;flex:1 1 100%}
}
@media (max-width:640px){
  .container{padding:22px 16px 48px}
  .brand a{font-size:28px}
  .brand a::after{font-size:11px}
  .page-title{font-size:40px}
  .page-sub{font-size:20px}
  .pet-grid,.grid-2,.grid-3,.grid-4,.stats-row{grid-template-columns:1fr}
  .pet-title{font-size:24px}
}