:root{
  --navy:#14284b; --navy-2:#1e3a66; --teal:#1f8a8a; --teal-soft:#e3f2f1;
  --orange:#e2742b; --ink:#1d2433; --muted:#5b6475; --line:#dfe3ea;
  --bg:#f5f7fa; --card:#ffffff; --error:#b42318; --ok:#1b7f3b;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.45;min-height:100vh;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:var(--navy);color:#fff}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.mark{background:var(--orange);color:#fff;border-radius:6px;padding:3px 7px;font-size:13px;letter-spacing:.5px}
.who{display:flex;align-items:center;gap:12px;font-size:14px}
.who .link{color:#cfe3ff;margin-top:0}
main{flex:1;width:100%;max-width:980px;margin:0 auto;padding:28px 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px}
.narrow{max-width:440px;margin:24px auto}
h1{font-size:22px;margin:0 0 8px;color:var(--navy)}
.hello{font-size:26px}
label{display:block;font-size:14px;font-weight:600;margin:14px 0 0}
input{display:block;width:100%;margin-top:6px;padding:10px 12px;font-size:16px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
button{font:inherit;font-size:15px;padding:10px 16px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;margin-top:16px}
button.primary{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600;width:100%}
button.primary:disabled{opacity:.6;cursor:wait}
button.link{border:0;background:none;padding:0;margin-top:14px;color:var(--teal);text-decoration:underline;font-size:14px}
a{color:var(--teal)}
.muted{color:var(--muted)} .small{font-size:13px}
.error{color:var(--error);font-size:14px;margin:10px 0 0}
.ok{color:var(--ok);font-size:14px}
.steps{padding-left:20px;margin:10px 0}
.qr{display:flex;justify-content:center;margin:8px 0}
.qr img{width:200px;height:200px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px}
code{background:var(--teal-soft);padding:2px 6px;border-radius:4px;word-break:break-all}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:20px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:6px;min-height:150px}
.tile h2{font-size:17px;margin:0;color:var(--navy)}
.tile .soon{align-self:flex-start;font-size:12px;font-weight:600;color:var(--teal);background:var(--teal-soft);border-radius:999px;padding:2px 10px;margin-top:auto}
.tile .item{border-top:1px solid var(--line);padding-top:8px;font-size:14px}
.ts-banner{position:sticky;top:0;z-index:10;background:var(--orange);color:#fff;font-weight:600;text-align:center;padding:8px 12px;font-size:14px}
.ts-banner button{margin:0 0 0 12px;padding:3px 10px;font-size:13px;background:#fff;color:var(--navy);border:0}
.search{max-width:420px}
.client-list{list-style:none;padding:0;margin:16px 0;display:grid;gap:8px;max-width:520px}
.client-list button{width:100%;text-align:left;margin:0;background:#fff}
.client-list button:hover{border-color:var(--teal)}
.foot{text-align:center;padding:18px}
@media (max-width:520px){.top{padding:12px 14px}.brand-name{display:none}.card{padding:18px}}