body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(135deg, #f0f4ff, #f9f9fb);
  color: #111;
}

.ios-card {
  border-radius: 28px;
  background: linear-gradient(145deg, #ffffff, #f2f6ff);
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
  border: 1px solid #e5e7eb;
}

.ios-btn {
  border-radius: 14px;
  font-weight: 600;
  padding: 14px 22px;
  transition: all 0.25s ease;
}

.ios-btn.primary {
  background: linear-gradient(145deg, #007aff, #4da3ff);
  color: #fff;
}
.ios-btn.primary:hover {
  background: linear-gradient(145deg, #0064d9, #3b8cff);
  transform: scale(1.03);
}

.ios-btn.gray {
  background: linear-gradient(145deg, #f2f2f7, #e5e5ea);
  color: #000;
}
.ios-btn.gray:hover {
  background: linear-gradient(145deg, #e0e0e5, #d1d1d6);
  transform: scale(1.03);
}

.ios-btn.green {
  background: linear-gradient(145deg, #34c759, #5cd97c);
  color: #fff;
}
.ios-btn.green:hover {
  background: linear-gradient(145deg, #28a745, #46c068);
  transform: scale(1.03);
}

.ios-input, .ios-select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid #d1d1d6;
  background: #fff;
  font-size: 1rem;
  appearance: none;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
}
.ios-input:focus, .ios-select:focus {
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.25);
}
.ios-select {
  background: url("data:image/svg+xml;utf8,<svg fill='gray' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 14px center/14px;
}

#resultBox {
  border-radius: 22px;
  padding: 24px 28px;
  margin-top: 36px;
  background: linear-gradient(145deg, #eaf3ff, #f6faff);
  border: 1px solid #c7d7ff;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

#resultLabel {
  font-weight: 600;
  font-size: 1rem;
  color: #555;
  margin-bottom: 10px;
}

#result {
  font-size: 1.35rem;
  font-weight: 500;
  color: #111;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Laptop/Desktop special layout */
@media (min-width: 768px) {
  .ios-card {
    width: 85%;
    padding: 6rem 5rem;
  }
  .toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    background: #f9f9fb;
    border-radius: 22px;
    padding: 24px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 32px;
  }
  .btn-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 36px;
  }
}

/* Mobile view adjustments */
@media (max-width: 767px) {
  .toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #f9f9fb;
    border-radius: 16px;
  }

  .ios-input, .ios-select {
    padding: 10px 12px;
    font-size: 0.95rem;
  }

  .btn-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
  }

  .btn-row .ios-btn {
    padding: 10px 12px;
    font-size: 0.95rem;
    width: 100%;
    border-radius: 12px;
  }
  #footer {
  font-size: 10px;
}
}