/* 
  Octarule Project
  Author: Keith (Arc.Keith)
  Created: July 2025
  License: Creative Commons Attribution 4.0 International (CC BY 4.0)
  https://creativecommons.org/licenses/by/4.0/
*/

body {
    font-family: sans-serif;
    background: #111;
    color: #ddd;
  }
main {
    max-width: 500px;
}
  h1 {
    text-align: center;
    color: #eee;
  }
  label {
    font-size: 1rem;
    display: block;
    margin: 10px auto;
    width: 100%;
    max-width: 300px;
  }
  input {
    font-size: 1rem;
    padding: 0.5em;
    background: #222;
    border: 1px solid #555;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
  }
  button {
    font-size: 1rem;
    margin: 10px auto;
    width: 100%;
    max-width: 300px;
    padding: 0.6em;
    background: #3f509d;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
  }
  button:hover {
    background: #5f70cd;
  }
#result {
  background: #1a1a1a;
  border: 1px solid #444;
  padding: 1em;
  border-radius: 8px;
}


  .note {
    font-size: 0.9rem;
    color: #aaa;
    text-align: center;
    margin-top: 10px;
  }
  .coin {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 50%;
    color: white;
  }
  .bronze { background: #cd7f32; }
  .silver { background: #c0c0c0; color: #000; }
  .blue   { background: steelblue; }
  .bill {
    display: inline-block;
    padding: 6px 12px;
    margin: 5px;
    background: #2e7d32;
    color: white;
    border-radius: 4px;
  }
  .bill-grid {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 5px;
    margin-top: 10px;
  }
  .keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 200px;
    margin: 20px auto;
  }
  .keypad button {
    font-size: 1.2rem;
    padding: 15px;
    background: #222;
    color: #fff;
    border-radius: 6px;
    border: 1px solid #444;
  }
  .keypad button:hover {
    background: #444;
  }