:root{--navy:#142252;--blue:#1b2f6e;--bg:#f4f7f6;--ok:#1a8f4c;--err:#c0392b}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:var(--bg);color:#12213f}
header{background:var(--navy);color:#fff;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:10px}
header h1{margin:0;font-size:1.2rem}main{max-width:1000px;margin:0 auto;padding:16px}
button,.btn{background:var(--blue);color:#fff;border:0;border-radius:10px;padding:10px 16px;font-size:1rem;cursor:pointer}
button.sec{background:#dfe6f3;color:var(--navy)}button.danger{background:var(--err)}
input,select,textarea{font:inherit;padding:10px;border:1px solid #b9c4d8;border-radius:8px;max-width:100%}
.card{background:#fff;border-radius:12px;padding:16px;margin:12px 0;box-shadow:0 1px 4px #0001}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:8px;border-bottom:1px solid #e3e8f2}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs button{background:#dfe6f3;color:var(--navy)}.tabs button.on{background:var(--blue);color:#fff}
.err{color:var(--err)}.muted{color:#667}
.big{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.big>*{flex:1 1 200px;max-width:240px}
.big button{padding:28px 10px;font-size:1.6rem;border-radius:16px}
.big button.done{background:var(--ok)}
.center{text-align:center}
.ok-screen{background:var(--ok);color:#fff;border-radius:20px;padding:50px 20px;font-size:2rem}
.pres{display:flex;justify-content:space-between;align-items:center;padding:14px;margin:6px 0;border-radius:12px;background:#fff;border:2px solid #dfe6f3;font-size:1.1rem;cursor:pointer;width:100%;color:inherit;text-align:left}
.pres.on{border-color:var(--ok);background:#e6f6ec}

header img{height:48px;width:auto;display:block}
header .brand{display:flex;align-items:center;gap:12px}
header{border-bottom:4px solid #fff3}
.hero{text-align:center;padding:18px 0 4px}.hero img{height:130px}
.hero h1{margin:10px 0 0;color:var(--navy);font-size:1.6rem}
button:hover{filter:brightness(1.15)}

.pad-wrap{margin:26px auto 0;max-width:300px}
.pd{height:58px;line-height:58px;font-size:2rem;letter-spacing:.2em;background:#fff;border:2px solid #b9c4d8;border-radius:12px;margin-bottom:8px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pad button{font-size:1.7rem;padding:16px 0;border-radius:12px;touch-action:manipulation}
.pad button.ok{background:var(--ok)}
.btn{text-decoration:none;display:inline-block}
.btn.sec{background:#dfe6f3;color:var(--navy)}
#who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:600px){
 header{padding:8px 12px;flex-wrap:wrap;gap:8px}
 header img{height:34px}header h1{font-size:1.05rem}
 #who{margin-left:auto}#who .uname{display:none}
 #who button,#who .btn{padding:8px 12px;font-size:.9rem}
 main{padding:12px}
}