* { box-sizing: border-box; }
body { font-family: system-ui; margin: 0; background: #f4f6f5; color: #1c2b26; }
header { background: #0a7d52; color: #fff; padding: .6rem 1rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
header h1 { margin: 0; font-size: 1.2rem; }
#tabs { display: flex; gap: .3rem; }
#tabs button { background: transparent; color: #d8efe5; border: none; padding: .4rem .7rem; border-radius: .5rem; font-size: 1rem; }
#tabs button.active { background: #fff; color: #0a7d52; font-weight: 700; }
.user-box { margin-inline-start: auto; display: flex; gap: .5rem; align-items: center; }
.user-box button { background: #085e3e; color: #fff; border: none; border-radius: .5rem; padding: .3rem .7rem; }
main { max-width: 60rem; margin: 1rem auto; padding: 0 1rem; }
.filters { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.filters select, .filters input, .filters button { padding: .45rem .6rem; border: 1px solid #c8d4cf; border-radius: .5rem; font-size: 1rem; background: #fff; }
.quick, .range { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.totals { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip { background: #fff; border: 1px solid #c8d4cf; border-radius: .7rem; padding: .5rem .8rem; }
table { border-collapse: collapse; width: 100%; background: #fff; }
td, th { border: 1px solid #dde5e1; padding: .4rem .6rem; text-align: right; font-size: .95rem; }
th { background: #eaf3ef; }
.refunded { opacity: .55; text-decoration: line-through; }
.payment { color: #789; }
.badge { background: #c0392b; color: #fff; border-radius: 1rem; padding: 0 .45rem; font-size: .8rem; }
.hidden { display: none; }
.card-box { background: #fff; border: 1px solid #c8d4cf; border-radius: .7rem; padding: .7rem; margin-bottom: .6rem; }
.card-box pre { white-space: pre-wrap; background: #f4f6f5; padding: .5rem; border-radius: .4rem; }
.row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.row input, .row select, .row button, .card-box button, .card-box select { padding: .4rem .6rem; border: 1px solid #c8d4cf; border-radius: .5rem; font-size: .95rem; background: #fff; }
.row button, .card-box button { background: #0a7d52; color: #fff; border: none; }
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-box { background: #fff; padding: 2rem; border-radius: 1rem; display: flex; flex-direction: column; gap: .7rem; width: min(20rem, 90vw); box-shadow: 0 4px 20px rgb(0 0 0 / .08); }
.login-box input, .login-box button { padding: .6rem; border-radius: .5rem; border: 1px solid #c8d4cf; font-size: 1rem; }
.login-box button { background: #0a7d52; color: #fff; border: none; }
.err { color: #c0392b; min-height: 1.2em; margin: 0; }
.danger { background: #c0392b !important; color: #fff !important; border: none !important; }
.alias-chip { background: #eaf3ef; border: 1px solid #c8d4cf; border-radius: 1rem; padding: .15rem .6rem; display: inline-block; margin: .15rem 0; }
.alias-chip a { color: #c0392b; text-decoration: none; font-weight: 700; }
@media (max-width: 600px) { td, th { font-size: .85rem; padding: .3rem .4rem; } header h1 { display: none; } }