/* Reset & Base */
* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: system-ui, -apple-system, sans-serif; background:#f9f9fb; color:#1a1a1a; line-height:1.5; }
.container { max-width: 600px; margin: 2rem auto; padding: 1.5rem; background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.05); }

/* Typography */
h1 { font-size:1.75rem; margin-bottom:0.5rem; }
.subtitle { color:#555; margin-bottom:1.5rem; }
h3 { font-size:1.25rem; margin:1.5rem 0 1rem 0; color:#1976d2; }
label { display:block; margin-bottom:0.35rem; font-weight:600; }
.req { color:#d32f2f; }

/* Form */
.field + .field { margin-top:1rem; }
select, input[type=number] {
  width:100%; padding:0.75rem; font-size:1rem; border:1px solid #ccc; border-radius:8px;
  transition:border 0.2s;
}
select:focus, input:focus { outline:none; border-color:#1976d2; }

/* Output */
.output { margin-top:2rem; padding:1rem; background:#e3f2fd; border-radius:8px; min-height:120px; }
.placeholder { color:#666; font-style:italic; }
.schedule-table { width:100%; border-collapse: collapse; margin:1rem 0; font-size:0.95rem; }
.schedule-table th, .schedule-table td { padding:0.5rem; border:1px solid #ddd; text-align:left; }
.schedule-table th { background:#1976d2; color:white; }
.schedule-table tr:nth-child(even) { background:#f5f5f5; }

/* Disclaimer */
.disclaimer { margin-top:2rem; font-size:0.875rem; color:#555; border-top:1px solid #eee; padding-top:1rem; }

/* Responsive */
@media (max-width: 480px) {
  .container { margin:1rem; padding:1rem; }
}
/* TOOLTIP — 100% WORKING */
.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  background: #1976d2;
  color: white;
  font-weight: bold;
  font-size: 11px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
}

.tooltip-content {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #1a1a1a;
  color: white;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 320px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.tooltip-content::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;
  border: 6px solid transparent;
  border-bottom-color: #1a1a1a;
}

.tooltip-content.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}