:root {
  --bg: #02040a;
  --card: rgba(10, 25, 40, 0.6);
  --border: rgba(79, 195, 247, 0.2);
  --text: #e1f5fe;
  --muted: rgba(179, 229, 252, 0.72);
  --accent: #29b6f6;
  --accent-soft: rgba(41, 182, 246, 0.24);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 500px at 12% 10%, rgba(79, 195, 247, 0.14), transparent),
    radial-gradient(ellipse 700px 450px at 85% 10%, rgba(100, 255, 218, 0.08), transparent),
    var(--bg);
  color: var(--text);
  font-family: 'Poppins', 'Segoe UI', sans-serif;
}

.ratings-page {
  width: min(920px, calc(100% - 2rem));
  margin: 2.2rem auto;
  animation: pageSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ratings-header {
  margin-bottom: 1.3rem;
}

.back-link {
  display: inline-block;
  margin-bottom: 0.9rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.back-link:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

h1 {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
}

.ratings-header p {
  margin: 0.45rem 0 0;
  color: var(--muted);
}

.ratings-list {
  display: grid;
  gap: 0.8rem;
}

.rating-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.45rem;
  animation: cardFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.rating-item:nth-child(1) { animation-delay: 0.08s; }
.rating-item:nth-child(2) { animation-delay: 0.16s; }
.rating-item:nth-child(3) { animation-delay: 0.24s; }
.rating-item:nth-child(4) { animation-delay: 0.32s; }
.rating-item:nth-child(5) { animation-delay: 0.40s; }
.rating-item:nth-child(6) { animation-delay: 0.48s; }
.rating-item:nth-child(7) { animation-delay: 0.56s; }

.rating-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(41, 182, 246, 0.12);
  border-color: rgba(79, 195, 247, 0.35);
}

.rating-item.lock-glow {
  animation: lockPulse 0.7s ease;
}

.rating-item.reset-shake {
  animation: resetShake 0.5s ease;
}

.item-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.item-meta {
  flex-shrink: 0;
  color: var(--text);
  opacity: 0.85;
}

.item-title {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

.item-title:hover {
  color: #b3e5fc;
}

.stars {
  display: inline-flex;
  gap: 0.35rem;
}

.star {
  border: 1px solid var(--border);
  background: transparent;
  color: #d8c9d1;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.2s ease, color 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, background 0.25s ease;
}

.star:not(:disabled):hover {
  transform: scale(1.25) rotate(-8deg);
}

.star:not(:disabled):active {
  transform: scale(0.9);
}

.star.pop {
  animation: starPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.star:hover,
.star:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.star.active {
  color: var(--accent);
  border-color: rgba(41, 182, 246, 0.5);
  background: rgba(41, 182, 246, 0.08);
  text-shadow: 0 0 8px rgba(41, 182, 246, 0.5);
}

.star:disabled {
  cursor: default;
  opacity: 0.7;
}

.rating-value {
  font-size: 0.92rem;
  color: var(--muted);
}

/* ---------- ARCHIVED PAGES ---------- */
.archived-pages {
  margin-top: 2.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  animation: cardFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

.archived-title {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.archived-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

.archived-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem;
}

.archived-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.archived-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(79, 195, 247, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.archived-icon {
  font-size: 1.4rem;
  filter: drop-shadow(0 0 8px rgba(41, 182, 246, 0.2));
}

.archived-name {
  flex: 1;
  font-weight: 500;
  font-size: 0.95rem;
}

.archived-arrow {
  color: var(--muted);
  font-size: 1.1rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.archived-card:hover .archived-arrow {
  transform: translateX(4px);
  color: var(--accent);
}

.bottom-note {
  margin-top: 1.1rem;
  color: #b3e5fc;
  font-size: 0.95rem;
}

/* ---------- ANIMATIONS ---------- */
@keyframes pageSlideIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes starPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.55) rotate(-12deg); }
  60%  { transform: scale(0.85) rotate(6deg); }
  80%  { transform: scale(1.15) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes lockPulse {
  0%   { box-shadow: 0 0 0 0 rgba(41, 182, 246, 0.35); border-color: var(--accent); }
  50%  { box-shadow: 0 0 18px 4px rgba(41, 182, 246, 0.18); }
  100% { box-shadow: 0 0 0 0 transparent; border-color: var(--border); }
}

@keyframes resetShake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-6px); }
  30%      { transform: translateX(5px); }
  45%      { transform: translateX(-4px); }
  60%      { transform: translateX(3px); }
  75%      { transform: translateX(-2px); }
  90%      { transform: translateX(1px); }
}

@media (max-width: 560px) {
  .ratings-page {
    width: calc(100% - 1rem);
    margin: 1rem auto;
  }

  .rating-item {
    padding: 0.75rem;
  }
}