/* Yukhyo module styles (migrated from inline styles) */
:root{
  --accent:#ff6b35;
  --accent-2:#ffb366;
  --bg: #0e0e12;
  --panel-bg: rgba(255,107,53,0.08);
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#081018 0%, #0e0e12 100%);color:var(--accent-2);font-family:Inter, 'Courier New', monospace;padding:24px}
.container{max-width:880px;margin:0 auto}
.hero{text-align:center;margin-bottom:20px}
.title{color:var(--accent);font-size:22pt;margin:0 0 8px;text-shadow:0 0 10px var(--accent)}
.subtitle{color:var(--accent-2);font-size:12pt;margin:0;font-style:italic}
.grid.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.card{background:var(--panel-bg);padding:15px;border-radius:12px;border:1px solid var(--accent);}
.card.single{margin-bottom:15px}
.card-title{color:var(--accent);margin-bottom:10px}
.card-body{color:var(--accent-2);line-height:1.6}
.card-body.centered{text-align:center;font-size:14pt}
/* Enhanced Wu Xing pentagon chart with astronomical theming */
#wuxing-chart{width:360px;height:360px;margin:0 auto;position:relative}
#wuxing-chart canvas{width:100%;height:100%}
.wuxing-tooltip{
  position:absolute;
  background:rgba(12,12,16,0.95);
  border:2px solid var(--accent);
  border-radius:8px;
  padding:12px;
  font-size:11px;
  line-height:1.4;
  color:var(--accent-2);
  max-width:250px;
  z-index:1000;
  pointer-events:none;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
.wuxing-tooltip h4{margin:0 0 6px 0;color:var(--accent);font-size:13px}
.wuxing-tooltip .planet{color:#ffcc66;font-weight:bold}
.wuxing-tooltip .virtue{color:#66ccff;font-style:italic}
.wuxing-legend{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
  margin-top:16px;
  font-size:11px;
}
.legend-item{
  background:rgba(255,107,53,0.05);
  padding:8px;
  border-radius:6px;
  border:1px solid rgba(255,107,53,0.2);
}
.legend-item .element-name{color:var(--accent);font-weight:bold}
.legend-item .planet-name{color:#ffcc66}
.element-colors {
  --wood-color: #2d5a27;
  --fire-color: #8b2635; 
  --earth-color: #8b6914;
  --metal-color: #6b6b73;
  --water-color: #1a365d;
}

/* Expandable Details Pane */
.details-pane {
  background: rgba(255,107,53,0.06);
  border: 1px solid rgba(255,107,53,0.3);
  border-radius: 12px;
  margin-bottom: 15px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  cursor: pointer;
  background: rgba(255,107,53,0.08);
  border-bottom: 1px solid rgba(255,107,53,0.2);
  transition: all 0.2s ease;
}

.details-header:hover {
  background: rgba(255,107,53,0.12);
}

.details-title {
  color: var(--accent);
  font-size: 16pt;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.expand-icon {
  font-size: 14px;
  transition: transform 0.3s ease;
  color: var(--accent-2);
}

.details-pane.expanded .expand-icon {
  transform: rotate(180deg);
}

.details-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.details-pane.expanded .details-content {
  max-height: 500px;
}

.details-body {
  padding: 18px;
}

.detail-section {
  margin-bottom: 16px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.section-title {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.detail-item {
  background: rgba(255,107,53,0.04);
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,107,53,0.15);
  font-size: 12px;
}

.detail-label {
  color: var(--accent-2);
  font-weight: 500;
  opacity: 0.8;
}

.detail-value {
  color: var(--accent-2);
  font-weight: 600;
  margin-left: 6px;
}

.trigram-display {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,107,53,0.04);
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,107,53,0.15);
}

.trigram-lines {
  font-family: monospace;
  font-size: 14px;
  line-height: 1.2;
  color: var(--accent);
}

.trigram-info {
  flex: 1;
}

.trigram-name {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
}

.trigram-meaning {
  color: var(--accent-2);
  font-size: 11px;
  opacity: 0.8;
  margin-top: 2px;
}

.elements-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.element-chip {
  background: rgba(255,107,53,0.08);
  border: 1px solid rgba(255,107,53,0.2);
  border-radius: 16px;
  padding: 4px 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
}

.element-chip .element-emoji {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.element-chip .element-text {
  color: var(--accent-2);
  opacity: 0.9;
}

/* Animation states */
.details-pane {
  transform: translateY(0);
}

.details-pane.collapsed {
  transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .details-header {
    padding: 12px 15px;
  }
  
  .details-title {
    font-size: 14pt;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
  }
  
  .elements-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}
.verdict{background:rgba(255,107,53,0.2);border-radius:12px;border:2px solid var(--accent);padding:15px;text-align:center}
.verdict-title{font-size:16pt;font-weight:700;color:var(--accent);margin-bottom:8px}
.verdict-main{font-size:14pt;color:var(--accent-2);font-style:italic}
.verdict-sub{font-size:11pt;color:#ff9966;margin-top:8px}
.controls{display:flex;gap:10px;justify-content:center;margin-top:18px}
.btn{background:var(--accent);color:#0b0b0b;padding:10px 16px;border-radius:8px;border:none;cursor:pointer;font-weight:700}
.btn.secondary{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.footer{text-align:center;margin-top:26px;color:#6b6b6b;font-size:12px}

/* small screens */
@media (max-width:600px){.grid.two-cols{grid-template-columns:1fr}.title{font-size:18pt}}