/* Era Calculator - Style */

/* Mode switch */
#input-mode{margin-bottom:15px}

/* Timeline */
.era-timeline{margin:20px 0;padding:15px 10px;background:#f9f9f9;border-radius:3px}
.timeline-bar{position:relative;height:40px;background:#e8e8e8;border-radius:4px;overflow:hidden}
.timeline-era{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;border-right:1px solid rgba(255,255,255,0.3);transition:opacity .2s}
.timeline-era span{white-space:nowrap}
.timeline-era[data-era="meiji"]{background:#607d8b}
.timeline-era[data-era="taisho"]{background:#78909c}
.timeline-era[data-era="showa"]{background:#3592e2}
.timeline-era[data-era="heisei"]{background:#26a69a}
.timeline-era[data-era="reiwa"]{background:#F78015}
.timeline-era.active{opacity:1;box-shadow:inset 0 0 0 2px #fff}
.timeline-era:not(.active){opacity:0.6}

/* Comparison */
.era-comparison{margin:15px 0}
.era-comparison table{width:100%;border-collapse:collapse}
.era-comparison th,.era-comparison td{padding:10px 12px;text-align:center;font-size:13px;border:1px solid #e8e8e8}
.era-comparison th{background:#3592e2;color:#fff;font-weight:700}
.era-comparison tr:nth-child(even){background:#f9f9f9}
.era-comparison .highlight{background:#fff3e0;font-weight:700}
.era-comparison .unavailable{color:#bbb;font-style:italic}

/* Quick reference */
.quick-ref{max-width:800px;margin:20px auto;padding:0 10px}
.quick-ref h3{font-size:15px;color:#333;margin-bottom:10px}
.quick-ref table{width:100%;border-collapse:collapse}
.quick-ref th,.quick-ref td{padding:10px 12px;text-align:center;font-size:13px;border:1px solid #e8e8e8}
.quick-ref th{background:#3592e2;color:#fff;font-weight:700}
.quick-ref tr:nth-child(even){background:#f9f9f9}

/* Mobile responsive */
@media(max-width:768px){
  .timeline-era{font-size:9px}
  .era-comparison th,.era-comparison td{padding:6px 8px;font-size:12px}
  .quick-ref th,.quick-ref td{padding:6px 8px;font-size:12px}
}

@media(max-width:480px){
  .timeline-era span{font-size:8px}
}