:root{
  --aqua:#1DB8CC; --aqua-deep:#14879A; --aqua-soft:#BFEBF0; --aqua-faint:#EAF9FB;
  --ink:#15242a; --fg2:#4a5a61; --muted:#eef2f4; --border:#dce4e7; --bg:#f7fafb;
  --ok:#1a8a4a; --okbg:#e4f6ec; --err:#c0392b; --errbg:#fdECEA; --warn:#a86a12; --warnbg:#fdf2df;
  --r:14px; --shadow:0 6px 24px rgba(20,135,154,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
a{color:var(--aqua-deep);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:960px;margin:0 auto;padding:0 20px}
header.hd{background:#fff;border-bottom:1px solid var(--border)}
.hd-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--aqua)}
.hd-actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-block;border:0;border-radius:10px;padding:10px 18px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--aqua);color:#fff}
.btn-primary:hover{background:var(--aqua-deep);text-decoration:none;color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--ink)}
.btn-ghost:hover{border-color:var(--aqua);text-decoration:none}
.btn-google{background:#fff;border:1px solid var(--border);color:var(--ink);display:inline-flex;align-items:center;gap:10px;justify-content:center;width:100%}
.btn-google:hover{border-color:var(--aqua);text-decoration:none}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:8px}
.hero{background:linear-gradient(160deg,var(--aqua-faint),#fff);padding:72px 0 60px}
.eyebrow{font-family:'Space Mono',ui-monospace,monospace;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--aqua-deep);text-transform:uppercase}
h1{font-size:38px;line-height:1.1;margin:10px 0 14px}
h2{font-size:24px;margin:0 0 12px}
.lead{font-size:18px;color:var(--fg2);max-width:620px}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.section{padding:40px 0}
.form{max-width:440px;margin:32px auto}
.form .card{padding:26px}
label{display:block;font-weight:600;font-size:13px;margin:14px 0 6px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;font-family:inherit;font-size:15px;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 3px var(--aqua-soft)}
textarea{min-height:74px;resize:vertical}
.hr-or{display:flex;align-items:center;gap:12px;color:var(--fg2);font-size:13px;margin:18px 0}
.hr-or::before,.hr-or::after{content:"";flex:1;height:1px;background:var(--border)}
.flash{padding:12px 14px;border-radius:10px;margin:10px 0;font-size:14px}
.flash.ok{background:var(--okbg);color:var(--ok)}
.flash.error{background:var(--errbg);color:var(--err)}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.badge.pending{background:var(--warnbg);color:var(--warn)}
.badge.approved{background:var(--okbg);color:var(--ok)}
.badge.paid{background:var(--okbg);color:var(--ok)}
.badge.unpaid{background:var(--errbg);color:var(--err)}
.badge.waived{background:var(--muted);color:var(--fg2)}
.badge.group{background:var(--aqua-faint);color:var(--aqua-deep)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--fg2)}
.muted{color:var(--fg2)}
.small{font-size:13px}
.inline-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.inline-form input,.inline-form select{width:auto}
.notice{background:var(--warnbg);color:var(--warn);border-radius:10px;padding:14px 16px;font-size:14px;margin:16px 0}
footer.ft{border-top:1px solid var(--border);background:#fff;margin-top:48px;padding:24px 0;color:var(--fg2);font-size:13px}
.stack>*+*{margin-top:8px}
@media(max-width:640px){h1{font-size:30px}.hd-inner{height:60px}}