@charset "utf-8";

/* Push! Passkey dev sample common style */
html,
body{
	margin:0;
	min-height:100vh;
}

body{
	background:#f5f7fb;
	color:#1f2937;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","メイリオ",Meiryo,sans-serif;
}

a{
	color:#0b4ea2;
}

.wrap{
	max-width:680px;
	margin:60px auto;
	background:#fff;
	padding:32px;
	border-radius:14px;
	box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.wrap.demo{
	width:720px;
	max-width:calc(100% - 40px);
}

h1{
	margin:0 0 12px;
	font-size:26px;
}

p{
	line-height:1.7;
	font-size:15px;
}

.box{
	margin:22px 0;
	padding:18px;
	background:#f8fafc;
	border:1px solid #e5e7eb;
	border-radius:10px;
}

.push_btn{
	display:inline-block;
	margin:8px 8px 8px 0;
	padding:13px 18px;
	border:0;
	border-radius:8px;
	background:#0b4ea2;
	color:#fff;
	font-weight:bold;
	font-size:15px;
	cursor:pointer;
}

.push_btn.auth{
	background:#1f7a4d;
}

.push_btn:disabled{
	background:#9ca3af;
	cursor:not-allowed;
}

.note{
	margin-top:20px;
	color:#6b7280;
	font-size:13px;
}

code{
	background:#f3f4f6;
	padding:2px 5px;
	border-radius:4px;
}

.top_sample{
	width:500px;
	max-width:calc(100% - 40px);
	margin:50px auto;
	text-align:center;
}

.top_sample_logo{
	width:250px;
	max-width:100%;
}


.result_message{
	margin:18px 0;
	padding:14px 16px;
	background:#fff7ed;
	border:1px solid #fed7aa;
	border-radius:10px;
	color:#9a3412;
	font-weight:600;
}

.result_message:empty{
	display:none;
}