/* ── Saved page ──────────────────────────────────────────── */
.saved-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 28px 100px;
}

.saved-header { margin-bottom: 36px; }
.saved-header h1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 46px;
  font-weight: 700;
  background: linear-gradient(135deg,#fff 30%,#a89bff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 8px;
}
.saved-header p { font-size: 15px; color: var(--text-muted); }

/* ── Grid ────────────────────────────────────────────────── */
.saved-grid { display: flex; flex-direction: column; gap: 12px; }

/* ── Card ────────────────────────────────────────────────── */
.saved-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 14px 14px;
  backdrop-filter: blur(10px);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  animation: fadeUp 0.35s ease both;
}
.saved-card:hover {
  border-color: rgba(124,124,255,0.3);
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

.saved-card-thumb {
  position: relative;
  width: 88px;
  height: 66px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
}
.saved-card-thumb img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.75);
  transition: filter 0.2s;
}
.saved-card-thumb:hover img { filter:brightness(0.9); }

.saved-thumb-emoji {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:28px;
}

.saved-type-badge {
  position: absolute;
  bottom: 5px; left: 5px;
  font-size: 9px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em;
  padding: 2px 6px; border-radius:99px; border:1px solid;
}
.saved-type-badge.guide { background:rgba(93,202,165,0.2); color:var(--teal); border-color:rgba(93,202,165,0.3); }
.saved-type-badge.build { background:rgba(124,124,255,0.2); color:#a89bff; border-color:rgba(124,124,255,0.3); }

.saved-card-info { flex:1; min-width:0; }
.saved-card-game { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--violet); margin-bottom:4px; }
.saved-card-title {
  font-size:15px; font-weight:600; color:var(--text);
  text-decoration:none; display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:6px; transition:color 0.15s;
}
.saved-card-title:hover { color:var(--purple); }
.saved-card-meta { display:flex; gap:14px; font-size:12px; color:var(--text-muted); }

.saved-remove-btn {
  background:none; border:none; border-radius:var(--radius-sm);
  color:var(--text-hint); cursor:pointer; padding:8px;
  transition:all 0.15s; flex-shrink:0;
}
.saved-remove-btn:hover { color:var(--red); background:rgba(255,92,92,0.1); }

/* ── Skeleton ────────────────────────────────────────────── */
.saved-skeleton {
  height: 94px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--bg-card) 25%, rgba(255,255,255,0.05) 50%, var(--bg-card) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite linear;
  border: 1px solid var(--border);
}
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ── Empty state ─────────────────────────────────────────── */
.saved-empty {
  display:flex; flex-direction:column; align-items:center;
  padding:80px 24px; text-align:center; gap:12px;
}
.saved-empty-icon  { font-size:52px; opacity:0.4; }
.saved-empty-title { font-family:'Rajdhani',sans-serif; font-size:24px; font-weight:700; color:var(--text); }
.saved-empty-desc  { font-size:14px; color:var(--text-muted); max-width:300px; line-height:1.7; }
.saved-empty-desc a { color:var(--purple); text-decoration:none; }
.saved-empty-desc a:hover { color:var(--violet); }