input, select, button {font-size: 16px}
/* ---- Reset & base ---- */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: #111;
    background: #fff;
}

/* ---- Layout shell ---- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* allow page to grow */
}

/* ---- Main content ---- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* still centers when content is short */
  padding: 16px;
  gap: 16px;
}

/* ---- Input + button ---- */
.controls {
    display: flex;
    gap: 8px;
}

input {
    width: 5.5em;
    font-size: 16px; /* prevents iOS zoom */
    padding: 6px 8px;
}

button {
    font-size: 16px;
    padding: 6px 12px;
    cursor: pointer;
}

/* ---- Result area ---- */
.result {
  width: 100%;
  max-width: 480px;
  /* no max-height */
  /* no overflow */
}

/* Plain table, no styling */
.result table {
    border-collapse: collapse;
}

.result td {
    padding: 2px 6px;
    vertical-align: top;
    white-space: nowrap;
}

/* ---- Footer ---- */
.footer {
    padding: 8px 16px;
    text-align: center;
    font-size: 12px;
    color: #777;
}

/* Keep footer subtle */
.footer div + div {
    margin-top: 2px;
}