@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* --- Font Sizing --- */
html {
  font-size: 16px;
}
@media (max-width: 500px) {
  html {
    font-size: 15px;
  }
}

/* --- Base Styles --- */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #eafbe5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='46' viewBox='0 0 70 46'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%231db954' fill-opacity='0.13'%3E%3Cpolygon points='68 44 62 44 62 46 56 46 56 44 52 44 52 46 46 46 46 44 40 44 40 46 38 46 38 44 32 44 32 46 26 46 26 44 22 44 22 46 16 46 16 44 12 44 12 46 6 46 6 44 0 44 0 42 8 42 8 28 6 28 6 0 12 0 12 28 10 28 10 42 18 42 18 28 16 28 16 0 22 0 22 28 20 28 20 42 28 42 28 28 26 28 26 0 32 0 32 28 30 28 30 42 38 42 38 0 40 0 40 42 48 42 48 28 46 28 46 0 52 0 52 28 50 28 50 42 58 42 58 28 56 28 56 0 62 0 62 28 60 28 60 42 68 42 68 0 70 0 70 46 68 46'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: #18181b;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  line-height: 1.7;
}

.center {
  text-align: center;
}

.card, .report-card {
  background: #fff;
  color: #18181b;
  padding: 1.5rem 1.2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(34,197,94,0.10), 0 1.5px 0 #222;
  border: 3px solid #222;
  margin: 1.2rem auto;
  max-width: 650px;
  width: 98vw;
  box-sizing: border-box;
  transition: box-shadow 0.2s, transform 0.15s;
}

.card:not(:last-child), .report-card:not(:last-child) {
  margin-bottom: 1.5rem;
}

.report-header {
  background: none;
  border: none;
  margin-bottom: 0.5rem;
  padding-bottom: 0;
  border-radius: 0;
}

.report-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1db954;
  margin-bottom: 1.2rem;
  text-align: center;
}

.report-key-figures {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 0.5rem;
}

.report-figure {
  background: #eaffea;
  border-radius: 8px;
  padding: 0.7em 1em;
  font-size: 1.08rem;
  color: #15803d;
  border: 2px solid #1db954;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.2em;
}

.figure-label {
  color: #1db954;
  font-weight: 700;
}

.figure-value {
  color: #7bc47f;
  opacity: 1;
}

.report-section {
  background: #f6fff6;
  border-radius: 10px;
  padding: 1.1rem 1rem;
  border: 2px solid #1db954;
  box-shadow: 0 1px 6px rgba(34,197,94,0.08);
  margin: 1.2rem 0;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1db954;
  margin-bottom: 0.7em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  text-align: center;
  justify-content: center; /* Ensures title is centered horizontally */
}

.diagnosis-list {
  color: #15803d;
  border-radius: 10px;
  padding: 1.1em 1em;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 100%;
  margin: 0 auto 1em;
  box-shadow: 0 2px 8px rgba(34,197,94,0.10);
}

.diagnosis-list ul {
  margin: 0;
  padding-left: 1.1em;
}

.diagnosis-list li {
  margin-bottom: 0.7em;
  color: #15803d;
}

#roast-text {
  background: #18181b;
  border-radius: 10px;
  padding: 1rem;
  color: #e2e2e2;
  font-size: 1rem;
  line-height: 1.6;
  box-shadow: 0 1px 6px rgba(34,197,94,0.10);
  border: 2px solid #1db954;
  margin-bottom: 0.7em;
}

/* --- Buttons --- */
.btn {
  background: #1db954;
  color: #fff;
  padding: 0.7rem 1.3rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 10px rgba(22,163,74,0.13);
  border: none;
  margin: 0.5em 0;
  transition: background 0.2s, transform 0.15s;
}

.btn:hover {
  background: #15803d;
  transform: scale(1.03);
}

.btn:active {
  background: #14532d;
  transform: scale(0.97);
}

/* --- Loader --- */
.loader {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 50%, transparent 50%);
  animation: loading 2s linear infinite;
  margin-bottom: 1rem;
  display: none;
  z-index: 10;
}

#loading-message {
  text-align: center;
  background: #fffbe6;
  color: #15803d;
  border: 2px solid #1db954;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(34,197,94,0.10), 0 1.5px 0 #222;
  margin: 2rem auto;
  max-width: 500px;
  padding: 2rem 1.5rem;
  font-size: 1.2rem;
  font-weight: 500;
}

.hidden {
  display: none !important;
}

/* --- Report Card Styling --- */
.report-card {
  background: #18181b;
  color: #e5e5e5;
  padding: 2.5rem 2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.report-header {
  border-bottom: 1px solid #2e2e30;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  background: linear-gradient(90deg, rgba(34,197,94,0.07), rgba(24,24,27,0.02));
  border-radius: 12px 12px 0 0;
}

.report-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1db954;
  margin-bottom: 1.2rem;
  text-align: center;
}

.report-key-figures {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 0.5rem;
}

.report-figure {
  background: #eaffea;
  border-radius: 8px;
  padding: 0.7em 1em;
  font-size: 1.08rem;
  color: #15803d;
  border: 2px solid #1db954;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.2em;
}

.report-figure:hover {
  background: rgba(34,197,94,0.08);
}

.figure-label {
  font-weight: 600;
  color: #22c55e;
}

.figure-value {
  color: #d4d4d4;
  opacity: 0.9;
}

/* --- Sections --- */
.report-section {
  margin: 1.2rem 0 1.2rem 0;
  background: #23233a;
  border-radius: 10px;
  padding: 1rem;
  border-top: 1px solid rgba(34,197,94,0.10);
  box-shadow: 0 1px 8px rgba(0,0,0,0.10);
  animation: fadein-section 0.7s;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1db954;
  margin-bottom: 0.7em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  text-align: center;
  justify-content: center; /* Ensures title is centered horizontally */
}

.diagnosis-list {
  padding-left: 1.2em;
  color: #b6f5c6;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 65ch;
  margin: 0 auto 1em;
}

#roast-text {
  background: #18181b;
  border-radius: 10px;
  padding: 1rem;
  color: #e2e2e2;
  font-size: 1rem;
  line-height: 1.6;
  box-shadow: 0 1px 6px rgba(34,197,94,0.10);
}

/* --- Icons --- */
.icon {
  width: 1.1em;
  height: 1.1em;
  stroke: #22c55e;
  opacity: 0.9;
  margin-right: 0.4em;
  transition: transform 0.2s;
}

.report-figure:hover .icon {
  transform: scale(1.1) rotate(-5deg);
}

/* --- Accordion --- */
.accordion-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2em;
  border-radius: 4px;
  transition: background 0.2s;
}
.accordion-toggle:hover {
  background: rgba(34,197,94,0.1);
}
.accordion-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.collapsible {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.3s;
}
.report-section.open .collapsible {
  max-height: 500px;
  opacity: 1;
}

/* --- Tooltip --- */
.keyword-tooltip {
  border-bottom: 1px dotted #22c55e;
  font-weight: 600;
  position: relative;
  cursor: help;
  color: #1db954;

}
.keyword-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 120%;
  transform: translateX(-50%);
  background: #18181b;
  color: #e2e2e2;
  padding: 0.4em 0.7em;
  border-radius: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.keyword-tooltip:hover::after {
  opacity: 1;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .card, .report-card {
    max-width: 90vw;
    padding: 1.1rem 0.3rem; /* Reduced horizontal padding */
    min-width: 0;
    width: 90vw;
    box-sizing: border-box;
    margin: 0.7rem 0.05rem; /* Reduced horizontal margin */
  }
  .report-section {
    padding: 0.7rem 0.3rem; /* Reduced horizontal padding */
    margin: 0.7rem 0.05rem; /* Reduced horizontal margin */
  }
  #roast-text, .diagnosis-list {
    padding: 0.7rem 0.3rem; /* Reduced horizontal padding */
    font-size: 0.98rem;
  }
}

.genre-visualization {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 340px; /* Increased for label space */
}
.genre-visualization canvas {
  width: 100% !important;
  height: auto !important;
  max-width: 400px;
  min-height: 320px; /* Increased for label space */
  max-height: 340px;
  display: block;
}
@media (max-width: 600px) {
  .genre-visualization {
    max-width: 98vw;
    min-height: 260px;
  }
  .genre-visualization canvas {
    max-width: 98vw;
    min-height: 220px;
    height: auto !important;
  }
}

.report-key-figures.no-boxes .report-figure.no-box {
  background: none;
  border: none;
  padding: 0.2em 0;
  margin-bottom: 0.1em;
}
.analysis-contrast {
  color: #222;
  font-weight: 500;
}
.diagnosis-list.diagnosis-box {
  border-radius: 10px;
  color: #000000;
  padding: 1.1em 1em;
  margin: 0 auto 1em;
  font-size: 1.05rem;
  line-height: 1.7;
  box-shadow: 0 2px 8px rgba(34,197,94,0.10);
  text-align: left;
}
.diagnosis-list.diagnosis-box > div {
  margin-bottom: 0.7em;
}
#roast-text.description-contrast {
  background: none;
  border: none;
  color: #000000;
  padding: 0;
  margin-bottom: 0.7em;
  font-size: 1.05rem;
  line-height: 1.7;
  box-shadow: none;
}
.section-title {
  text-align: center;
  justify-content: center; /* Ensures title is centered horizontally */
}

@keyframes fadein-section {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.analysis-table {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.7em 1.2em; /* Increased vertical gap */
  align-items: center;
  margin-bottom: 0.5rem;
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
}
.analysis-row {
  display: contents;
}
.analysis-table .figure-label {
  justify-self: start;
  text-align: left;
  font-weight: 600;
  color: #1db954;
  opacity: 1;
  padding-right: 0.5em;
  font-size: 1.13rem; /* Slightly larger */
  letter-spacing: 0.01em;
}
.analysis-table .figure-value {
  justify-self: start;
  text-align: left;
  color: #222;
  opacity: 1;
  font-weight: 500;
  word-break: break-word;
  font-size: 1.07rem; /* Slightly larger for balance */
}