*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial;background:#f2f4f7}
/* TOP BAR */
.topbar{
  position:sticky; top:0; z-index:10;
  background:#0b5ed7;color:#fff;padding:10px 14px;
}
.topbar-user{font-size:clamp(14px,4vw,18px);text-align:center}
.topbar-user .role{opacity:.85;margin-left:6px}
/* APP CONTAINER */
.app{max-width:520px;margin:0 auto;padding:16px;text-align:center}
h2{font-size:clamp(22px,5vw,28px);margin:12px 0}
.small{font-size:clamp(13px,3.5vw,15px);color:#444}
label{font-size:clamp(16px,4.2vw,20px);display:block;margin-top:10px}
input,select,button{
  width:100%;font-size:clamp(18px,4.5vw,22px);
  padding:14px;margin:10px 0;border-radius:10px
}
input,select{border:1px solid #ccc;background:#fff}
button{border:none;background:#0066cc;color:#fff}
button:disabled{background:#aaa}
.success{color:green;font-size:clamp(14px,4vw,18px);margin-top:6px}
.error{color:red;font-size:clamp(14px,4vw,18px);margin-top:6px}
video{width:100%;height:50vh;max-height:50vh;object-fit:cover;border-radius:14px;background:#000;margin-top:12px}
.line{border-bottom:1px solid #ddd;padding:10px 0;font-size:clamp(14px,4vw,16px);text-align:left}
.rowbtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.rowbtns a{flex:1 1 48%;text-decoration:none}
.rowbtns button{width:100%;font-size:clamp(14px,4vw,18px);padding:10px;margin:6px 0}
.card{background:#fff;border-radius:14px;padding:12px;margin:10px 0;box-shadow:0 1px 8px rgba(0,0,0,.06)}