:root{
  --bg: #fbf7f2;
  --paper: #ffffff;
  --ink: #1f1f1f;
  --muted: rgba(31,31,31,.65);
  --line: rgba(31,31,31,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.08);

  --green-bg: rgba(17,124,67,.12);
  --green-ink: rgba(17,124,67,.95);
  --amber-bg: rgba(217,119,6,.14);
  --amber-ink: rgba(150,83,4,.95);
  --gray-bg: rgba(0,0,0,.06);
  --gray-ink: rgba(0,0,0,.55);
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

.container{
  max-width: 960px;
  margin: 48px auto;
  padding: 0 20px;
}

.header{
  background: rgba(255,255,255,.7);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow);
}

h1{
  margin: 0 0 8px 0;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 36px;
}

.subtitle{
  margin: 0;
  color: var(--muted);
}

.list{
  margin-top: 18px;
}

.gift-card{
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  margin: 12px 0;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.gift-card.gifted{
  background: rgba(255,255,255,.55);
  color: var(--gray-ink);
  box-shadow: none;
}

.gift-thumb{
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.gift-card.gifted .gift-thumb{
  filter: grayscale(1);
  opacity: .7;
}

.gift-main{
  flex: 1;
  min-width: 0;
}

.gift-top{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.gift-name{
  font-weight: 700;
  font-size: 18px;
}

.gift-price{
  font-weight: 700;
}

.badge{
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
}

.badge.available{ background: var(--green-bg); color: var(--green-ink); }
.badge.reserved{ background: var(--amber-bg); color: var(--amber-ink); }
.badge.gifted{ background: var(--gray-bg); color: var(--gray-ink); }

.note{
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.loading,
.empty{
  margin-top: 16px;
  color: var(--muted);
}