*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#333;background:#f3f3f4}

/* login */
.login-page{display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{background:#fff;width:100%;max-width:380px;padding:32px 28px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.brand{font-size:20px;font-weight:700;letter-spacing:.2px;color:#1ab394;margin-bottom:18px}
.brand span{color:#676a6c;font-weight:400}
h1{font-size:20px;margin:0 0 18px}
label{display:block;font-size:13px;color:#676a6c;margin:14px 0 6px}
input{width:100%;padding:10px 12px;border:1px solid #e5e6e7;border-radius:3px;font-size:14px}
input:focus{outline:none;border-color:#1ab394}
button{width:100%;margin-top:20px;padding:10px 12px;border:0;border-radius:3px;background:#1ab394;color:#fff;font-size:14px;cursor:pointer}
button:hover{background:#18a689}
.notice{margin:0 0 16px;padding:10px 12px;background:#fcf8e3;border:1px solid #faebcc;border-radius:3px;font-size:13px;color:#8a6d3b}
.foot{margin-top:22px;font-size:13px}
.foot a{color:#676a6c;text-decoration:none}
.foot a:hover{color:#1ab394}
.muted{color:#676a6c;font-size:14px}

/* admin shell */
.admin-header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:#fff;border-bottom:1px solid #e7eaec}
.admin-header .brand{margin:0}
.who{font-size:13px;color:#676a6c}
.who a{margin-left:14px;color:#1ab394;text-decoration:none}
.admin-main{max-width:960px;margin:32px auto;padding:0 24px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:24px}
.tile{background:#fff;border:1px solid #e7eaec;border-radius:4px;padding:20px;font-weight:600}
.tile span{display:block;margin-top:6px;font-weight:400;font-size:12px;color:#9a9a9a}