/* Shared styling for the Happy Valley ATC backend (no inline CSS per standards). */
:root { --teal:#2c7fb8; --orange:#ef8c1f; --ink:#22323c; --panel:#ffffff; --bg:#eef6fb; }
* { box-sizing: border-box; }
body { font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
       color: var(--ink); background: var(--bg); margin: 0; padding: 5vh 16px; }
main { max-width: 880px; margin: 0 auto; }
h1 { color: var(--teal); margin-top: 0; }
a { color: var(--orange); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #dbe9f2; padding: 1px 5px; border-radius: 4px; }
.card { background: var(--panel); border-radius: 14px; padding: 20px 24px;
        box-shadow: 0 2px 10px rgba(0,0,0,.08); margin: 16px auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid #e0e8ee; }
th { color: var(--teal); }
.btn { display: inline-block; background: var(--orange); color: #fff; padding: 8px 16px;
       border-radius: 9px; font-weight: 700; border: none; cursor: pointer; }
.btn-secondary { background: #7c909c; }
label { display: block; font-weight: 600; margin: 10px 0 3px; }
input[type=text], input[type=number], input[type=password], textarea, select {
    width: 100%; padding: 7px 9px; border: 1px solid #bcccd6; border-radius: 7px; font: inherit; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > div { flex: 1 1 160px; }
.muted { color: #7c909c; }
.pill { display:inline-block; padding:1px 8px; border-radius:10px; font-size:13px; font-weight:700; }
.pill.free { background:#d9f4df; color:#1c6b2a; }
.pill.iap { background:#fde6cf; color:#9a5410; }