/* Independent, data-driven reference panel. All content remains real text. */
#reference {
  --reference-red: #b70f12;
  --reference-gold: #eac18d;
  container-type: inline-size;
}
#reference > .panel {
  padding: 12px;
  border: 2px solid #ffe4ac;
  border-radius: 30px;
  background: linear-gradient(135deg,#ff7450 0%,#ce1516 18%,#940c0e 50%,#e9211b 85%,#ffbd79);
  box-shadow: inset 0 0 0 5px #ffffff24,inset 0 0 18px #ffad65,0 6px 18px #76140924;
  overflow: hidden;
}
#reference .periods {
  display: flex;
  gap: 0;
  padding: 0;
  margin: 0 0 16px;
  overflow-x: auto;
  border: 2px solid #ffe2b9;
  border-radius: 25px;
  background: linear-gradient(#fffcf7,#f3dfd1);
  scrollbar-width: thin;
  scrollbar-color: #d89563 #f7e4d5;
}
#reference .periods button {
  position: relative;
  flex: 0 0 25%;
  min-width: 0;
  min-height: 50px;
  padding: 7px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #642b25;
  font-size: clamp(18px,3.5cqw,40px);
  font-weight: 750;
  box-shadow: inset -1px 0 #cfa992;
}
#reference .periods button.active {
  background: linear-gradient(145deg,#ff4533,#cd1117 45%,#9b080c);
  color: #fff;
  border-radius: 23px;
  box-shadow: inset 0 0 0 2px #ffdfa4,inset 0 3px 9px #fff3b8a6,0 3px 9px #a8352740;
}
#reference .periods button.active::after {
  content: '';position:absolute;bottom:4px;left:33%;right:33%;height:5px;
  border-radius:8px;background:linear-gradient(90deg,#efba70,#fffbd5,#efba70);
}
#reference .periods button:focus-visible { outline:3px solid #502316;outline-offset:-6px; }
#reference .prediction {
  position: relative;
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 3px solid #ffe8bf;
  border-radius: 27px;
  padding: 5px 16px 10px;
  background: linear-gradient(#fffaf0e8,#fff6e7e0),url('/assets/zodiac-background.jpg') center/cover;
  box-shadow: inset 0 0 0 3px #fffdf4,0 3px 9px #670a0a40;
  overflow:hidden;
  animation:none;
}
#reference .prediction td {
  height:60px;
  padding:6px 6px;
  border:0;
  vertical-align:middle;
  background:transparent;
}
#reference .prediction tr + tr td { border-top:1px solid #dcc4ad;box-shadow:inset 0 1px #fff; }
#reference .prediction td:first-child { width:17%;text-align:left; }
#reference .prediction td:nth-child(2) { color:var(--reference-red); }
#reference .prediction td:last-child { width:18%;text-align:right;white-space:normal; }
.reference-label {
  display:inline-flex;align-items:center;justify-content:center;
  width:90%;min-height:36px;padding:3px;
  border:1px solid #dab084;border-radius:16px 8px;
  background:linear-gradient(#fffaf0,#f5dfbf);
  box-shadow:inset 0 0 0 2px #fff9ed,0 2px 2px #b1845826;
  font-size:clamp(17px,3cqw,34px);font-weight:750;color:#b61911;white-space:nowrap;
}
.reference-chips { display:flex;flex-wrap:wrap;align-items:center;gap:4px; }
.reference-chip {
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:clamp(22px,3.6cqw,40px);height:clamp(22px,3.6cqw,40px);
  border:2px solid #fff;border-radius:50%;
  background:radial-gradient(ellipse at 40% 20%,#fff 5%,#fff3f0 40%,#f6c7bf 100%);
  box-shadow:0 0 0 1px #f9dfd8,inset 0 2px 4px #f7cdca;
  color:#b80e0c;font-size:clamp(14px,2.4cqw,27px);font-weight:750;font-variant-numeric:tabular-nums;
}
.reference-chip-wide { width:auto;padding:0 14px;border-radius:50px;white-space:nowrap; }
.reference-result {
  display:inline-flex;align-items:center;justify-content:center;min-height:33px;max-width:100%;
  padding:4px 18px;border:1px solid #c9bfb3;border-radius:40px;
  background:linear-gradient(#fff,#e8e3db);box-shadow:inset 0 0 0 2px #fff;
  color:#53483e;font-size:clamp(13px,2.5cqw,27px);font-weight:650;
}
@media(max-width:600px) {
  #reference > .panel { padding:6px;border-radius:19px; }
  #reference .periods { margin-bottom:9px;border-radius:15px; }
  #reference .periods button { min-height:33px;font-size:17px;padding:5px 6px; }
  #reference .periods button.active { border-radius:14px; }
  #reference .prediction { border-radius:18px;padding:2px 5px 6px; }
  #reference .prediction td { height:46px;padding:2px 3px; }
  #reference .prediction td:first-child { width:19%; }
  #reference .prediction td:last-child { width:22%; }
  .reference-label { width:100%;min-height:27px;padding:2px;font-size:15px;border-radius:8px 4px; }
  .reference-chips { gap:2px 4px; }
  .reference-chip { width:20px;height:20px;font-size:13px;border-width:1px; }
  .reference-chip-wide { width:auto;min-height:22px;padding:0 6px;font-size:13px; }
  .reference-result { min-height:26px;padding:3px 7px;font-size:12px; }
}