:root{
	--bg:#f6f7f9;
	--panel:#ffffff;
	--text:#1f2937;
	--muted:#6b7280;
	--border:#e5e7eb;
	--link:#2563eb;
	--radius:12px;
	--shadow:0 10px 24px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }

html,body{
	width:100%;
	height:100%;
	margin:0;
}

body{
	font-family: system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
	background:var(--bg);
	color:var(--text);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
}

/* ===== Card ===== */
.wrap{
	width:min(560px,100%);
	background:var(--panel);
	border:1px solid var(--border);
	border-radius:calc(var(--radius) + 4px);
	box-shadow:var(--shadow);
	padding:22px 18px;
}

h1{
	margin:0 0 10px;
	font-size:20px;
	letter-spacing:.02em;
}

.lead{
	margin:0 0 18px;
	font-size:13px;
	line-height:1.6;
	color:var(--muted);
}

/* ===== Buttons ===== */
.grid{
	display:grid;
	gap:12px;
}

a.btn{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	width:100%;
	padding:14px;
	border-radius:var(--radius);
	border:1px solid var(--border);
	background:#fff;
	color:var(--text);
	text-decoration:none;
	transition:
		transform .06s ease,
		box-shadow .12s ease,
		border-color .12s ease;
}

a.btn:hover{
	border-color:#cbd5e1;
	box-shadow:0 8px 18px rgba(0,0,0,.07);
	transform:translateY(-1px);
}

/* ===== Button contents ===== */
.btn .left{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:0;
}

.btn .icon{
	width:34px;
	height:34px;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid var(--border);
	background:#f8fafc;
	flex:0 0 auto;
}

.btn .title{
	font-size:15px;
	font-weight:700;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.btn .sub{
	display:block;
	margin-top:2px;
	font-size:12px;
	font-weight:400;
	color:var(--muted);
}

.btn .right{
	flex:0 0 auto;
	color:var(--link);
}

/* ===== Mobile ===== */
@media (max-width:480px){
	h1{ font-size:18px; }
	.btn .title{ font-size:14px; }
}